文章目录
一、css定义
英文全名：cascading style sheets
web标准中的表现标准语言，简单说就是如何修饰网页信息的显示样式。目前遵循的是W3C发布的css3.0
二、css的语法
选择器（选择符）{属性：属性值；属性：属性值；}
要定义样式的对象 声明
三、css引用方式
(一)、行内样式
style作为属性直接写在标签后面
使用场景：几乎不用
(二)、内部样式
使用场景：适合案例或者短小的页面开发
(三)、外部样式表
-
第一步先创建一个后缀是.css的文件，创建完之后直接在.css的文件里书写标签名称{属性：属性值；属性：属性值；…}
-
用link引用外部的样式
建议写在<head><link href="" rel="stylesheet"/></head>
link–链接
href–路径
rel–关联
stylesheet样式表
type="text/css"可以不写 -
外部样式表除了用link引入之外可以用@import导入外部样式很少用
<style>@import url(CSS的路径)</style>
(四)、解析规则
- 同时使用内部、外部、行内样式表修饰同一个标签的时候优先级最高的是行内样式表。
- 当外部和内部样式表同时使用的时候，解析规则是，就近原则，哪个css样式距离标签近就最终显示哪个样式。
四、CSS语法注意点
- 1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
- 2）属性必须放在花括号中，属性与属性值用冒号连接。
- 3）每条声明用分号结束。
- 4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
- 5）在书写样式过程中，空格、换行等操作不影响属性显示。
五、选择器
为什么要用选择器？
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
选择器整体分为5大类：
基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器
基本选择器
- 类型选择器(标签选择器) 以文档对象html中的标签作为选择符
1. 什么时候用？想改变某个元素的默认样式时或者统一文档某个元素的显示效果时
- 语法？ 标签{属性：属性值；} 例如：
div{width：200px；} - 注意：标签选择器要慎用，因为标签选择器改的标签针对的当前文件的
- 语法？ 标签{属性：属性值；} 例如：
- Class选择器(类选择器)
1. 什么时候用？ 想要区分某个标签的时，比如想要区分2个div。
2. 语法:<标签 class=“box”></div>.Class名字{属性：属性值；} 例如：.box{width：300px；}
3. Class可以给多个属性值，多个属性值之间用空格隔开。例如：<div class=“box a1 a3”></div> - ID选择器
1. 什么时候用？想要区分某个标签的时，比如想要区分2个div。
- 语法:
<div id=“box1”></div>#ID名字{ 属性：属性值；}例如：#box1{width:200px;} - 注意点：ID有唯一性，属性值只能是1个,可以重复使用.
- 语法:
- 通配符
- 什么时候用？
想让所有的标签同时改变样式的时候
- 语法:
*{属性：属性值；}例如:*{margin:0;padding:0;} 清除所有标签自带的间距 - 注意：只要写页面就一定要把样式重置
- 群组选择器
- 什么时候用: ?
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
- 语法:
选择器1，选择器2，选择器3{属性：属性值；}例如：.box,p,#a2{width：300px；} - 好处：需要使用相同样式的地方只需要书写一次，可以减少代码量，改善CSS代码的结构，提高网页的性能
六、层次选择器
- 后代选择器(包含选择器)
- 什么时候用？
想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子…)的时候
- 语法：
选择器1 选择器2 选择器3{属性：属性值;...}例如div p{} .box .a1{}
- 子选择器
- 什么时候用？
想要改变某个父元素下面所有的儿子元素的时候。
- 语法：
选择器1>选择器2>选择器3{属性:属性值;}例如ul>li{} .box>p{}
- 相邻兄弟选择器
- 什么时候用？
想要改变某个元素后面紧挨着的元素的时候。
- 语法：
选择器1+选择器2{属性:属性值;}例如div+p{}
- 通用兄弟选择器
- 什么时候用？
想要改变某个元素后面所有的元素的时候。
- 语法：
选择器1~选择器2{属性:属性值;}例如div~p{}
七、动态伪类选择器
a:link {color: red;}/* 未访问的链接状态,必须给a */a:visited {color: green;}/* 已访问的链接状态,必须给a */a:hover {color: blue;}/* 鼠标滑过链接状态,可以随便给 */a:active {color: yellow;}/* 鼠标按下去时的状态,必须给a */
说明：
- 1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效； - 2）为了简化代码，可以把伪类选择符中相同 的声明提出来放在a选择符中；
例如：a{color:red;}a:hover{color:green;}
表示超链接的三种状态都相同，只有鼠标划过变化颜色
八、CSS的层叠性
CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。
解析规则
- 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
- 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式
九、权重
| 个数 | 种类 | 权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0 |
|---|---|---|
| 1 | 类型(元素)选择器 | 0001 |
| 2 | Class选择器（类选择器） | 0010 |
| 3 | id选择器 | 0100 |
| 4 | 伪类选择符 | 0010 |
| 5 | 包含选择符 | 为包含选择符的权重之和 |
| 6 | 属性选择符 | 0010 |
| 7 | 伪元素选择符 | 0001 |
| 8 | 内联样式 | 1000 |
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
