什么是CSS
页面中负责页面样式的
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体颜色
- 设置位置和大小
- 添加动画效果
在页面中使用CSS
推荐使用外链方式
不推荐内联（某些场景会用到）
CSS是如何工作的
将解析出来的css附加到dom树形成渲染树 形成最终的效果
CSS组成
选择器 selecter
通配选择器
修改全局样式
标签选择器
用标签设置属性
id选择器
#id{
}
id一般需要是唯一的
类选择器
.classname{
}
可以多次出现
属性选择器
通过元素的属性或者属性值来选中这个元素
[value]{
}
...[属性="属性值"]{
}
通过满足一定条件进行选中
注: ^=表示开头满足条件 $=表示结尾满足条件
伪类(pseudo-classes)
状态伪类
结构伪类
组合方式
举例如下:
article p 表示选中article标签下所有的p标签
article > p 表示article标签的子标签p 故只作用于第一个p标签
h2 + p 表示选中与h2同级且在其后的p标签 故只作用于第二个p标签
选择器组
同时对多个选择器进行定义
颜色
RGB
通过调节rgb三原色每种颜色的数量(0~255)
表示方法(从前往后 红 绿 蓝)
- rgb(x,y,z)
- #abxymn
HSL
- hue 色相 (0~360)
- saturation 饱和度 (0~100%)
- lightness 亮度 (0~100%)
alpha 透明度
字体 (font-family)
定义多个字体防止不同电脑个别字体未安装 浏览器会从前往后测试直到电脑上拥有这个字体
通用字体族
使用web fonts
会在性能上产生一些开销
字体大小 (font-size)
- 关键字
- small medium large
- 长度
- px em
- 百分数
- 相对于父元素字体的大小
其他一些字体属性
斜体
粗细(字重 100~900)
400-normal 700-bold
该字体必须支持字重设定
行高 (line-height)
空格符 (white-space)
一般会将多个空格合并为一个
可以通过white-space控制多个换行
- normal 换行 多个空格合并为一个
- nowrap 不换行 多个空格合并为一个
- pre 保留换行与空格
- pre-wrap 一行显示不下换行 保留换行与空格
- pre-line 合并空格 换行
