【笔记】CSS样式和选择器
目录
如何添加CSS之行内样式
通过内部样式添加CSS
如何添加CSS外部样式
CSS样式表的优先级
CSS选择器
CSS简单选择器
元素选择器
ID选择器
类选择器
分组选择器
通用选择器
CSS组合选择器
后代选择器
子选择器
编辑相邻的兄弟选择器
一般兄弟选择器
CSS伪类选择器
常用的伪类选择器
CSS伪元素选择器
CSS属性选择器
css选择器的四种属性
如何添加CSS之行内样式
当浏览器读取一个样式表时，它将根据样式表中的信息对HTML文档进行格式化
CSS中有三种插入样式表的方法
1.内联CSS
2.内部CSS
3.外部CSS
内联CSS：也称之为内联样式，又称为行内样式。它被用来为一个单一的元素应用一个独特的样式。
要使用内联样式需要将样式属性添加到相关的元素中，样式属性可以包含任何css属性。
比如在div上添加一个内联样式需要定义一个style属性
一些文字
另外一些文字
在这段里，标签直接作为选择器使用，最后一个样式声明可以不用添加分号，但是建议大家添上，这样可以避免在添加新的样式时忘记添。
尽量少用内联样式。
行内样式存在的问题：没有使结构和样式相分离，样式代码和CSS代码写到了一起，杂乱。
通过内部样式添加CSS
如果一个单一的HTML页面有一个独特的风格，那可以使用一个内部样式表。
内部样式表一般定义在head元素里，通过style元素来定义。页面的样式声明均需要添加在style元素内部。
CSS选择器：用来寻找或选择你想要定义样式的HTMl元素的。
1.元素选择器：根据元素名称选择html元素
例如这段代码中的body，h1，就是元素选择器，根据这个名称选择了这个html文档里的全部p元素。
margin-left用于定义h1标题元素位于父容器左侧的距离。
内部样式解决了行内样式的代码分离问题。
弊端1：内部样式只能作用与一个页面，如果要实现多个页面共享一个样式，就做不到了。
弊端2：随着样式代码的不断增加，在编辑器中，要不停的上下滚动屏幕，非常不方便。
如何添加CSS外部样式
外部CSS：也叫外部样式，可以通过改变一个文件来改变整个网站的外观，外部样式将css代码放在一个独立的，以.css为后缀名的文件中，使html页面结构文件和css样式文件完全独立开来。
每个html页面都必须在head元素里面添加一个元素
link是链接的意思，在link元素里定义rel属性，rel是relationship的缩写，译为关系、关联。值为stylesheet，表示关联一个样式表，再定义一个href属性，用来设置一个对外部样式表文件的引用，值为css文件的路径。
例如：
CSS样式表的优先级
如果三个样式表修饰同一个元素，哪一个优先起作用？
内联样式作用优先级最高，内部样式和外部样式，浏览器最后读取的优先级高。
当一个html元素有一个以上的样式时，作用优先级如下：
在一个html元素捏，内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式。
在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高。
浏览器默认的样式优先级最低。
CSS选择器
CSS选择器：用来寻找或选择你想要定义样式的html元素的。
选择器类别：
1.简单选择器：根据名称、ID、类别来选择元素。
2.组合选择器：根据元素之间的特定关系来选择元素。
3.伪类选择器：根据某种状态来选择元素。
4.伪元素选择器：为一个元素的指定部分设置样式。
5.属性选择器：根据一个属性或属性值来选择。
CSS简单选择器
元素选择器
：根据元素名称来选择html元素的。
ID选择器
：使用一个html元素的id属性来选择一个特定的元素。
元素的id是唯一的。所以id选择器是用来选择一个唯一元素的。
一段文字
#para2 {
text-align: center;
}#+id
id名称不能以数字开头。
类选择器
：可以选择具有特定class属性的html元素。
.+类别名称
一些文字
另外一些文字
一段文字
.italic {
font-style: initial;
}
p.deco{
text-decoration:underline ;
}font-style：声明字体风格 italic表示斜体
text-decoration：声明文本修饰样式 underline表示下划线
分组选择器
：选择所有具有相同样式的html元素。
实现方法：将多个选择器用逗号分隔。
通用选择器
：选择页面上的所有html元素。
定义方法：使用通配符星号。（*）
*{
background-color:#000080;
}CSS组合选择器
后代选择器
：通过空格连接
匹配作为指定元素后代的所有元素
一号标题
文本1
三号标题
-
哈哈哈哈哈哈哈哈哈1
-
哈哈哈哈哈哈哈哈哈2
-
哈哈哈哈哈哈哈哈哈3
div h3 {
color:blue;
}
div li p {
color:blue;
}子选择器
：通过大于号（>）连接
只能选择作为某元素的子元素，不能选择到孙辈的元素
div>p {
color:red;
}
相邻的兄弟选择器
：通过加号（+）连接
一般兄弟选择器
：通过波浪线（~）连接
CSS伪类选择器
伪类选择器：属于类选择器中的一种，根据特定状态选取元素
基本语法：selector：鼠标行为 {}
selector为其他基础选择器 ：鼠标行为为常见的伪类选择器
常用的伪类选择器
| 鼠标点击前 | ：link | 代表鼠标没有操作时元素的默认样式 |
| 鼠标点击后 | ：visited | 代表鼠标点击并离开元素之后的样式 |
| 鼠标悬停时 | ：hover | 代表鼠标悬停或者划过元素时元素的样式 |
| 鼠标点击时 | ：active | 代表鼠标点击元素瞬间，元素显示的样式 |
注意：1.冒号和后面的鼠标行为，没有任何空格，必须连接在一起；
2.四个伪类选择器必须按照以上介绍的顺序书写（:link,:visited,:hover,:active），否则在浏览器中部分样式不能实现
3.伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会独立使用在其他标签上面。
4.伪类选择器也可以应用在其他元素上，但是只能实现active激活瞬间和hover鼠标悬停效果。
CSS伪元素选择器
通过伪元素选择器，可以设置元素指定部分的样式。主要用来设置元素内文本的首字母，首行的样式、或是在元素内容之前或之后插入其他内容。
基本语法：selector::pseudo-element {}
selector是目标元素
::pseudo-element代表的是向目标元素内添加伪元素并对伪元素的内容进行修饰
| ::first-letter | 用来实现向文本的首个字符添加特殊样式 |
| ::first-line | 用来实现向文本的首行添加特殊样式 |
| ::before | 用来实现在元素内容之前插入内容 |
| ::after | 用来实现在元素内容之后插入内容 |
| ::selection | 用来更改选中文本的样式 |
div::first-letter {
color: blue;
font-size: 30px;
}为第一个字母添加样式
div::first-line {
color: blue;
font-size: 30px;
}为第一行字母添加样式
div::before {
content: "我是向前添加";
font-size: 30px;
}
div::after {
content: "我是向后添加";
}向前或向后添加
注意：在使用伪元素选择器向前向后插入内容时必须配合content才能实现效果，向前向后插入进来的内容都需要符合css样式声明的基本语法
div::selection {
color: red;
background-color: skyblue;
}选中文本的样式
注意：selection伪元素选择器只支持以下几个样式声明：color（文本颜色），background（背景），cursor（鼠标样式），outline（描边效果）
CSS属性选择器
：是根据属性或属性值来查找元素。
基本语法：Element[attribute]
或 Element[attribute="value"]
element译为元素，attribute译为属性
Element[attribute]：查找带有该属性的元素，然后添加样式声明
css选择器的四种属性
1.[attribute]：来查找HTMl结构中，带有attribute属性的所有元素
2.[attribute="value"]：来查找HTMl结构中，带有attribute属性，并且属性值为value的元素
3.[attribute~="value"]：来查找HTMl结构中，带有attribute属性，并且在多个属性值中包含value的元素
4.[attribute|="value"]：来查找HTMl结构中带有attribute属性，并且属性值以value或者是value-开头的元素
该属性的值只能有一个，不能有多个。
简单选择器和组合选择器，可以完成元素的查找。
其他选择器可以更加精准高效的查找元素，从而能提高我们编码速度。
属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多。