CSS —— 文本样式

文本缩进

属性名：text-indent

取值：

• 数字+px
• 数字+em（ 推荐 1em = 到前标签的font-size的大小 ）

文字水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：

如果需要文本水平对齐，text-align 属性给 文本所在标签（文本的父元素）设置

 

水平居中方法总结 text-align : center;

text-align : center; 能让那些元素居中对齐?

1. 文本
2. span标签、a标签
3. input标签、img标签

注意点：

如果需要让以上元素水平居中，text-align:center；需要给以上元素的 父元素 设置

文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

注意点：

开发中会使用 text-decoration ：none；清除a标签默认的下划线。

行高

作用：控制一行的上下间距

属性名：line-height；

取值：

数字+px

倍数（当前标签 font-size 的倍数）

应用：

1. 让单行文本垂直居中可以设置 line-height ：文字父元素高度
2. 网页精准布局时，会设置 line-height = 1；可以取消上下间距

行高与 font 连写的注意点

• 如果同时设置了行高与font连写，注意覆盖问题
• font：size weight size/line-height family；

谷歌调试工具

打开调试工具

1.鼠标操作

打开网页 单击右键 点击检查

2.键盘操作

fn + f12

左侧是HTML标签 右侧是CSS

代码错误 ：出现 带感叹号的黄色三角形

代码未生效 出现 下划线