一. 文本属性
1.1 text-decoration
text-decoration 用于给文本添加装饰线,主要取值有:
- none:无装饰线,主要清除a元素自带的下划线
- underline: 下划线
- overline:上划线
- line-through 中划线,删除线
注意: u,ins这类的标签就是浏览器默认加了text-decoration: underline
1.2 letter-spacing和word-spacing
- letter-spacing,word-spacing分别设置字母,单词之间的间距
- 默认为0,也可以设置负数
1.3 text-transform
- text-transform用于文字的大小写转化
- 可以设置以下值:
- none: 默认值,没有任何影响
- capitalize: 将每个单词的首字母大写
- uppercase:将每个单词都转化为大写
- lowercase: 将每个单词都转化为小写
1.4 text-indent
- text-indent:用于设置文本首行缩进
- text-indent:2em; 正好是首行缩进2个文字
1.5text-align
- text-align用于设置 元素内容 在元素中的水平对齐方式
- 可以设置以下的值:
- left:文本居左对齐
- right: 文本居右对齐
- center: 文本居中对齐
- justify: 两端对齐(但是对最后一行文本无效,若想最后一行文本也生效,需要设置 text-align-last:justify才能生效)
二.字体属性
2.1 font-size
- font-size用于设置文字的字体大小
- 常用的设置:
- 具体的数值+单位
- 比如100px:像素,绝对单位
- 比如2em, 1em相当于父元素的字体大小
- 比如2rem 1rem相当于html元素的字体大小
- 百分比
- 比如 100%,基于父元素的font-size计算
- 具体的数值+单位
2.2 font-family
- 用于设置字体的字体名称
- 可以设置一个或多个字体,中间由逗号隔开,浏览器会从左到右依次加载字体,直到找到可用的字体为止
- 一般来说,英文字体只适用于英文,中文字体通常适用于中文和英文'
- 所以,如果希望中英文使用不同字体,建议英文字体写在前面,中文字体写在后面
2.3 font-weight
- 用于设置文字的粗细
- 可设置如下值:
- 100|200|300|400|500|600|700|800|900 每个数字代表一个重量
- normal 正常 ,默认 400
- bold 700
- bolder
- 常用的就是normal(400),bold(700)和bolder
- strong,h1-h6,b等标签font-weight值默认就是bold
2.4 font-style
- 用于设置文本的常规,斜体显示
- 可以设置的值:
- normal: 常规显示,这是默认值
- italic：用字体的斜体显示(前提, 是font-family这种字体本身是支持斜体)
- oblique：文本倾斜显示(让文字倾斜,不管这种字体支不支持斜体)
- em,i,address,cite标签font-style默认值就是itatic
- 设置font-style的值是italic的span元素等同于em元素
2.5 font-variant
- 可以影响小写字母的显示形式
- 可以设置的值有:
- normal: 常规显示,这是默认值
- small-caps: 将小写字母转化为大写,但是以小写的大小显示
2.6 line-height
- 用于设置文本的最小高度
- 行高可以简单的理解为一行文本所占的高度
- 行高的严格定义是:两行文本的基线之间的距离
- image.png
-
注意区分高度和行高的区别
高度: 元素的整体高度
行高: 元素的每一行文本所占据的高度
总结: 行高 = 文字高度 + 2*上下的行距
-
应用实例: 假设一个有具体高度的div里只有一行文本,如何让文本垂直居中?
- 让行高等于div盒子的高度即可
-
应用实例: 假设一个有具体高度的div里有多行文本,如何让文本垂直居中?
添加以下代码
div { display:table-cell; vertical-align:middle; overflow:hidden; }
2.7 font的缩写属性
font是一个缩写属性: font-style font-variant fong-weight font-size/line-height font-family
div { font:italic small-caps 700 20px/1.5 '微软雅黑'; }-
font缩写时需要注意的点:
- font-style font variant fong-weight,这三个书写顺序可以任意,也可以省略
- /line-height可以省略,但是如果不省略,就一定要放在font-size后面
- font-size font-family 不可省略,而且顺序必须是这样
三. 更多CSS选择器
3.1 属性选择器
- [attr]: 匹配拥有attr属性的元素
- [attr=val]: 匹配拥有attr,且attr的值等于val的元素
- [attr*=val]: 匹配拥有attr属性,且值包含val的元素
- [attr^=val]: 匹配拥有attr属性且值以val开头的元素
- [attr$=val]: 匹配拥有attr属性且值以val结尾的元素
- [attr|=val]: 匹配拥有attr属性并且属性值恰好等于val 或者 以单词val开头且后面紧跟着连字符-的元素
- [attr~=val]: 匹配拥有attr属性并且属性值包含单词one的元素（单词val与其他单词之间必须用空格隔开）
3.2 后代选择器
- 形式是: div p : 匹配div后代所有的p元素(直接子元素和间后代元素)
3.3 子代选择器
- 形式是: div > p : 匹配div的直接子元素的p元素(p元素必须是div的直接子元素才可以)
3.4 兄弟选择器
- 相邻兄弟选择器: div+p : 匹配 div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）
- 全体兄弟选择器 : div~p: 匹配 div元素后面的p元素（且div、p元素必须是兄弟关系）
3.5 选择器组
- 交集选择器: 匹配满足所有规则的元素
- 并集选择器: 匹配满足任一规则的元素
