这是我参与「第四届青训营」笔记创作活动的的第2天

为网页添加样式

术语解释

h1{
    color:aqua;
    background-color: blueviolet;
    text-align: center;
}

CSS规则 = 选择器 + 声明块

选择器

选择器：选中元素

ID选择器：选中的使对应id值的元素
元素选择器
类选择器

声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表示了某一方面的样式

CSS代码书写位置

内部样式表

书写在style元素中

内联样式表，元素样式表

直接书写在元素的style属性中

外部样式表[推荐]

将样式书写到独立的CSS文件中在中用链接css文件

1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3).有利于代码分离(HTML和CSS)，更容易阅读和维护

选择器

选择器：帮助精准的选中想要的元素

简单选择器

ID选择器
元素选择器
类选择器
通配符选择器

*选中所有元素

属性选择器

根据属性名和属性值选中元素

[disabled] { width: 200px; height: 150px; }

div [display = "inline-block"]{ background-color: #fff; margin-top: 10px; }

伪类选择器

选中某些元素的某种状态

写法 :xxxx

顺序：

link:超链未访问状态
visited：超链接访问过的状态
hover:鼠标悬停状态
active：激活状态，鼠标按下状态

伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素

写法 ::xxxx

before/after 特殊属性content

选择器的组合

后代元素空格
子元素 >
相邻兄弟(下一个)元素 +
兄弟元素(后面所有) ~
并且

选择器的并列

多个选择器用逗号分隔

# 层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1.比较重要性

重要性从高到低

1）作者样式表中的!important样式 2）作者样式表普通样式 3）浏览器默认样式

2.比较特殊性

依据选择器

总体规则：选择器选中的范围越窄越特殊

具体规则：通过选择器，计算出一个四位数（x x x x）

千位：如果内联样式，记1，否则0
百位：所有ID选择器的数量
十位：所有类选择器、属性选择器、伪类选择器的数量
个位：所有元素选择器、伪元素选择器的数量

3.比较源次序

代码书写靠后的

应用

重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表 ->浏览器的默认样式

常见的重置样式表：normalize.css reset.css meyer.css

爱恨法则

link > visited > hover > active

# 属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所在属性都没有值，到所有元素都有值，该过程为属性值计算过程

确定声明值（作者样式表和浏览器默认样式表）
层叠冲突
继承
使用默认值

盒模型

box：每个元素在页面中都会生成一个矩形区域

盒子类型：

行盒：display等于inline的元素
块盒：display等于block的元素

行盒在页面中不换行，块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

盒子的组成部分

从内向外分别是：

内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

填充(内边距) padding

盒子边框到盒子内容距离

padding-left、padding-right、padding-top、padding-bottom

padding：简写属性

paading：上右下左

填充区 + 内容区 = 填充盒 padding-box

边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框区 + 填充区 + 内容区 = 边框盒 border-box

外边距 margin

边框到其他盒子的距离

个人总结

CSS需要记忆的部分较多，但难度较小。重点需要理解掌握盒模型、浮动和定位。

CSS(1)|青训营笔记