目录
为网页添加样式
术语解释
h1{
color: red;
background-color: lightblue;
text-align: center;
}
css规则 = 选择器+声明块
选择器
选择器：选中元素
- ID选择器：选中的是对应id值的元素(太窄了)
- 元素选择器（太广了）
- 类选择器
声明块
出现在大括号中
声明块中包含很多声明（属性），表达了某一方面的样式
css代码书写位置
- 内部样式表
书写在style元素中 - 内联样式表，
直接书写在样式的style中 - 外部样式
将样式书写到店里的css文件中
外部样式可以解决多页面样式重复的问题
有利于浏览器缓存，从而提高页面响应速度
有利于代码分离（HTML和CSS），更容易阅读与维护
常见的样式声明
- color
元素内部的文字颜色
预设值：定义好的单词
三原色，色值：光学三原色（红绿蓝），每个颜色可以用0-255之间的数字来表达，
rgb表示法
rgb(0,255,0)
hex表示法（16进制）
淘宝红#ff4400（个位和十位相同可简写） #f40
黑色#000000
白色#ffffff
-
background-color
背景颜色 -
font-size
元素内部文字尺寸大小
1）px:像素，简单理解为文字的高度占多少个像素
2）em:相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素字体大小，如果没有父元素则使用基准字号（16）
user agent,用户代理（浏览器）
- font-weight
文字粗细程度，可以取值预设值
strong：默认加粗
-
font-family
必须用户计算机中存在字体才会有效
可以使用多个字体，以匹配不同环境
sans-serif:任意选择电脑自带的字体，非衬线字体 -
font-style
字体样式，通常用它设置斜体i元素，em元素：默认样式，是倾斜字体；实际使用中，通常用他表示一个图标（icon）
-
text-decoration
文本修饰，给文本加线a元素
del元素：废弃的内容
s元素：过期的内容 -
text-indent
首行缩进（中文2em） -
line-height
每行文本的高度，该值越大，每行距离越大
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小 -
width
宽度
11. height
高度
12. letter-space
文字间隙
13. text-align
元素内部文字水平排列方式
选择器
选择器：帮助你精准的选中想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配选择器
- ，表示选中所有元素
- 属性选择器
根据属性名和属性值选中元素
6. 伪类选择器
选中某些元素的某种状态（按顺序写否则会有问题）
link：超链接未访问时的状态
visited：超链接访问后的状态
hover:鼠标悬停状态
active：鼠标激活状态，按下状态
- 伪元素选择器
before
after
选择器的组合
-
并且
-
后代元素 —— 空格
-
子元素 —— >
-
相邻兄弟元素 —— +
-
兄弟元素 —— ~
层叠
声明冲突：同一个样式多次应用到同一个元素。
层叠：解决声明冲突的过程，浏览器自动处理
比较重要性
重要性从高到低“
作者样式表：开发者书写的样式
- 作者样式表中的！important样式（样式很高，不推荐）
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
比较特殊性
总体规则：看选择器，选择器选中的范围越窄越特殊
具体规则：通过选择器计算出一个4位数
- 千位:如果是内联样式记作1，否则记作0
- 百位：等于将选择器中所有ID选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器的数量
比较源次序
代码书写靠后的胜出
应用
- 重置样式表（重置浏览器默认样式，再添加自己的样式）
书写一些作者样式表，覆盖浏览器默认的样式
用重置样式表覆盖浏览器默认样式
常见重置样式表：normalize.css reset.css meyer.css
link>visitde>hover>active
继承
子元素会继承父元素的某些CSS属性
通常跟文字相关的内容可以被继承
属性值的计算
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素：从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程 。
确定声明值
参考样式表中没有冲突声明，作为CSS属性值（作者样式，浏览器默认样式）
层叠冲突
对样式表有冲突声明使用层叠规则，确定CSS属性值
使用继承
对仍然没有值的属性、若可以继承、则继承父元素的值
使用默认值
对仍然没有值的属性，使用默认值
背景：transparent 透明
特殊的两个CSS取值
- inherit：手动（强制）继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
