- A+
设置CSS样式的方式
-
内联样式（行内样式）
- 在标签内通过style属性来设置元素的样式
<p style="color:red;font-size:60px"><!--设置字体颜色和大小--> CSS设置样式 </p>问题：使用内联样式，只能对一个标签生效
复用程度不高，维护起来比较麻烦
-
内部样式表
- 将样式编写到head标签中的style标签里，然后通过css选择器选中元素，并为其设置各种样式。
<style> p{ /*标签选择器*/ color:green; font-size:50px; } </style>好处：可同时为多个标签设置样式，更加方便对样式进行复用
问题：内部样式表只能对一个网页起作用，不能跨页面复用
-
外部样式表(最佳实现)
-
可以将css样式编写到外部的css文件中
然后通过link标签来引入到对应的网页中
<head> <!--在head标签中编写--> <link rel="stylesheet" href="./style.css"> </head>好处 ：样式可以在不同页面之间进行复用
可以使用到浏览器的缓存机制，加快网页的加载速度，提高用户体验。
-
CSS基本语法
css中的注释
<style> /* 注释内容 */ </style> 声明块
- 声明块：通过声明块来指定为元素设置的样式，是一个名值对 ---名和值之间以 : 连接，以 ; 结尾
选择器
- 定义：通过选择器可以选中页面中的指定元素
常用选择器
-
元素选择器
- 作用：根据标签名选中指定的元素
- 语法：标签名{ }
- 例：p{ } 、div{ } 、h1{ }
-
id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值{}
- 例 #box{ }、#red{ }
-
类选择器
- 作用：根据元素的class属性值选中一组元素
- 语法： .class属性值{ }
- 例 .box{ } 、.bottom{ }
- 补充：class是一个标签的属性，和id类似，不同的是class可以重复使用,可以为同个元素指定多个class属性
-
适配选择器
- 作用：选中页面中的所有元素
- 语法：*{ }
复合选择器
-
交集选择器
-
作用：选中同时符合多个条件的元素
-
语法：选择器1选择器2选择器3...n { }
选择器之间没有空格
p.box.num{ color: blue; font-size: 50px; } -
注：交集选择器中如果有元素选择器，必须使用元素选择器开头
-
-
并集选择器
- 作用：同时选择多个选择器对应的元素
- 语法：选择器1，选择器2，选择器3...选择器n{ }
- 例 #box,p,h1,div,span{}
关系选择器
-
相关概念
-
父元素：直接包含子元素的元素
-
子元素：直接被父元素包含的元素
-
祖先元素：直接或间接包含后代元素
一个元素的父元素也是他的祖先元素
-
后代元素：直接或间接被祖先元素包含的元素
子元素也是后代元素
-
兄弟元素：拥有相同父元素的元素
-
- 子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法:父元素>子元素
- 后代元素选择器
- 作用：选中选中指定元素内的指定后代元素
- 语法：祖先 后代
- 兄弟选择器
- 作用 ①：选择下一个兄弟
- 语法：前一个+后一个
- 作用 ②：选择下边所有的兄弟
- 语法：兄~弟
属性选择器
-
语法：[属性名] 选择含有指定属性的元素
-
[属性名=属性值] 选择含有指定属性和属性值的元素
-
[属性名^=属性值] 选择属性值以指定值开头的元素
-
[属性名$=属性值] 选择属性值以指定值结尾的元素
-
[属性名*=属性值] 选择属性值中含有某值的元素
伪类选择器
-
伪类（不存在的类，特殊的类）
-
说明：描述一个元素的特殊状态
-
一般使用 ：开头
-
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素
特殊值：n 第n个 n的范围0~正无穷
even/2n选中偶数位的元素
odd/2n+1 选中奇数位的元素
-
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类功能与上面的类似，不同点是他们是在同类型元素中进行排序
-
: not() 否定伪类，将符合条件的元素从选择器中去除
-
a标签特有的伪类
- :link 用来表示没访问过的链接(正常的链接)
- ：visited 表示访问过的链接 （由于隐私原因，visited这个伪类只能修改链接的颜色
- ：hover 表示鼠标移入的状态
- ：active用来表示鼠标点击
伪元素选择器
-
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
-
伪元素使用 ：：开头
-
：：first-letter 表示第一个字母、
-
：：first-line 表示第一行
-
：：selection 表示选中的内容
-
：：before 元素的开始
：：after 元素的最后 必须结合content属性来使用
<style> p::before{ content:"【"; color: saddlebrown; } p::after{ content:"】"; } </style>
选择器的权重及样式继承
样式的继承
我们为一个元素设置样式同时也会应用到它的后代元素上，发生在祖先元素和后代元素之间
注：并不是所有的样式都会被继承，比如 背景相关的布局
选择器的权重
样式冲突：通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配符选择器 0,0,0,0
继承的样式 没有优先级
-
优先级计算相同，此时优先使用靠下的样式
-
比较优先级时，需将所有的选择器的优先级相加，最后优先级越高，则越优先显示
-
分组选择器单独计算
-
选择器的累加不会超过其最大的数量级（类选择器再高也不会超过id选择器）
注：可以在某一个样式后添加！important 则此样式会获得最高的优先级，甚至超过内联样式（一般不会使用）
