CSS

1、CSS简介

CSS又可以称之重叠样式表，就是给MTNL标签修改样式的
语法结构：

选择器 {
	属性名1:属性值1;
	属性名2:属性名2;
}

注释语法：

/*注释内容*/
正常代码
/*
多行注释
多行注释
*/

引入方式：
1、在HTML代码的style标签内部直接编写（不推荐）
2、在HTML代码的link标签中通过herf属性引入
3、直接在相对应的标签内部通过style属性直接书写也可以（不推荐）
如：< h1 style="color:blue">学不会啊< /h1>
展示：

学不会啊

2、基本选择器（之后内容都很重要）

选择器：
css就是用来调节标签样式的，那么为什么要学习选择器呢？
因为在同一个页面上有很多相同名字的标签，尽管其中的内容各不相同，并且咋不同的位置，为了能够区分我们到底要修改哪个位置的标签，这时候就需要“选择器”来帮助我们区分并找到相对应的标签

1、标签选择器：通过标签名字直接查找

div {
	coler:red;
}
/*找到所有的div标签及其内部的标签更改文本的颜色*/

2、类选择器：通过 .class值查找标签（句点符加上slass的值）

.c1 {
	coler:red;
}
/*找到所有拥有此类值得标签*/

3、id选择器：通过每个标签独有的id查找

#d1 {
	coler:red;
}
/*找到id值为d1的标签*/

4、通用选择器：将所有的选择器都找到

* {
	coler:red;
}
/*只要是标签，都会找到*/

3、组合选择器

为了能够区分嵌套标签之间的关系，早期的程序员们发明了一种称呼来帮助我们可以更好的了解组合选择器的特点
1、后代选择器：特征为空格

div p {
	coler:red;
}
/*找到div内部所有的p标签*/

2、儿子选择器：特征为 >

div > p {
	coler:red;
}
/*只找div标签下一级的p标签，不在深入查找，上一个是内部所有*/

3、毗邻选择器：特征为 +

div + p {
	coler:red;
}
/*找到div标签下面仅仅贴着的p标签*/

4、弟弟选择器：特征为 ~

div ~ p {
	coler:red;
}
/*找到div标签同级下面的所有p标签*/

4、属性选择器

标签内部是可以自定义属性的：
id，calss这是自带属性，还可以自定义，只要符合格式即可：
如：day=“1”
查找方式：
1、属性查找

[day] {
	coler:red;
}
/*找到所有拥有day的属性标签*/

2、属性＋属性值查找

[day='1'] {
	coler:red;
}
/*找到拥有属性day并且属性值为1的标签*/

3、标签＋属性+属性值

p[day='1'] {
	coler:red;
}
/*找到p标签中含有day属性且属性值为1的标签*/

4、分组与嵌套

1、多个选择器并列使用

div,span,p {
	coler:red;
}
/*找到所有div标签或者span或p标签*/

2、不同选择器查找

div,#d1,.c1 {
	coler:red;
}
/*找到div或者id为1或者类为c1的所有标签*/

3、不并列查找

.c1 p {
	coler:red;
}
/*找到类为c1内部的后代所有p标签*/

4、直接筛选

div#d1 {
	coler:red;
}
/*找到div标签且id值为d1的标签*/

注：上述所有标签的查找只要查找的深度够深或者精确度越高或者外部标签已经被更改然后又找到了自身并被更改，那么优先级以最深最精确的为标准
例：
div {coler:red;} 这是更改所有div标签及其内部所有的后代标签
div p {coler:blue;} 但这个p标签同样被更改了，那么这个优先级最高

5、伪类选择器

1、a标签调整颜色

/*a标签默认的颜色本身就会变化，不点击显示的是蓝色是，点击之后返回显示是紫色*/
a:link {    /*直接更改a标签的显示颜色*/
	coler:red;
}
a:hover {    /*鼠标悬停之后显示的颜色*/
	coler:blue;
}
a:active {    /*鼠标选中点击之后的颜色*/
	coler:mistyrose;
}
a:cisted {    /*点击之后返回页面显示的颜色*/
	coler:darkray;
}

2、input标签调整颜色

/*这是将输入框点击之后的颜色更改*/
input:focus {
	background-color: red;
}
/*我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)*/

---

---

注：上述内容纯手撸，如有不对请手下留情并帮忙指出，谢谢您嘞。