css特性

---

CSS的三种书写位置

css的书写位置有时候也叫做css的三种引入方式

内嵌样式（内部引入方式）

将css语句都写在style标签里面

书写位置：

• css写在style标签里面
• style标签写在head标签里面，title标签下面，

作用范围：

• 当前页面

<style>
    div {
    	color: red；
        font-size：100px；
    }
</style>

行内样式（行内引入方式）

将CSS样式直接写在标签本身上，以属性的形式存在

书写位置：

• css写在标签的style属性中

作用范围：

• 当前标签

<div style="color: red; font-size: 100px;">小可爱</div>

外联样式（外部引入方式）

css写在一个单独的.css的文件中，在html文件里面通过link标签引入css文件

书写位置：

• css写在一个单独的.css文件中，需要通过link标签引入
• link标签写在head标签里面，title标签下面

作用范围：

• 多个页面（谁引入，谁生效）

<link rel="stylesheet" href="路径" >

三种样式表总结

样式表	书写位置	作用范围	使用场景
内嵌样式	css写在style标签中	当前页面	小案例
行内样式	css写在标签的style属性中	当前标签	配合js使用
外联样式	css写在单独的css文件中，通过link引入	多个页面	项目中

文本的对齐方式（text-align）

设置文字的水平对齐方式

取值：

• left：设置文字在盒子中 水平靠左
• center：设置文字在盒子中 水平居中
• right：设置文字在盒子中 水平靠右

注意：

• 让文字水平居中，给文字所在标签设置 text-align：center； 即可

CSS的三大特性

解释css的一些特殊现象

继承性

后代元素会继承祖先元素的一些样式（子承父业）

<div class="father">父亲
	<div class="son">儿子</div>
</div>

有哪些样式属性可以继承：

可以通过开发者调试工具中查看是否有 Inherited from 判断样式是否继承

这里列举几个常见的记忆

• color：颜色
• font- 开头的：字体相关属性
• text- 开头的：文本相关属性
• line- 开头的：line-height

如何查看当前元素的属性值：

开发者调试工具中的computed 中可以搜索

---

常见的应用：

去除列表的样式（如：小圆点），可以给li标签设置使用 list-style：none； ，但一般给ul设置，此时也利用了继承性。

------------------

---

继承失效的特殊情况：

• a链接颜色不能通过继承设置，需要单独设置（a标签有本身的样式）
  • a标签有默认的样式，要给a标签设置样式，需要单独选中后设置！
• h系列标签字体大小不能通过继承设置，需要单独设置（有本身的样式）
• div的高度不能继承，宽度默认有继承父元素的效果

总结： 如果标签自己有样式（可以是自己设置的或者浏览器默认设置的），就显示自己的样式（标签很独立）

层叠性

浏览器解决样式冲突的特性

**特点：**后渲染的css样式会覆盖掉先渲染的css样式 （优先级相同的情况下）

例子：

<style>
    .red {
    /* 最终绿色起效果 */
    	color: pink;
    	color: red;
    }
    .green {
    	color:green;
    }
</style>

<div class="green red">西瓜</div>

总结：

• 当层叠的样式相同时→样式会覆盖→写在下面的样式会生效
• 当层叠的样式不同时→样式会叠加→共同作用在标签上

优先级（重要）

只有当优先级相同时，才比较层叠性

如果用的是不同选择器，就不能比较层叠性了，则需要考虑优先级

优先级比较

给页面中的一个标签设置样式，可以通过多种方法~

比较不同方法的优先级大小分别是什么样

<div class="father">
    <p class="son" id="orange">我是一个p标签</p>
</div>

优先级比较公式：

继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 <　!important

注意点：

• !important写在样式属性值的后面，分号的前面
• !important不能提升继承的优先级，只要是继承的优先级是最低的

权重计算

也叫做css的特殊性（specificity）

当面对复合选择器的时候，需要考虑权重的计算

计算公式：

公式算法：（0,0,0,0）

• 第一个数字：行内样式的个数
• 第二个数字：ID选择器的个数
• 第三个数字：类选择器的个数
• 第四个数字：标签选择器的个数

注意：!important 如果能选中对应标签，则权重最高！！天下第一！！！

比较规则：

1. 先比较第一个数字，如果比较出来了，之后的统统不看

2. 如果第一个数字相同，再去比较第二个数字

   …

   如果数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）

做权重计算题的步骤：

1. 判断选择器是否直接选中标签，如果不能直接选中→继承优先级最低→直接pass
2. 通过权重计算公式，判断谁权重最高！！