1. 文本对齐
text-align:用于设置文本内容的水平对齐方式,相当于 html 标签属性中的 align
准备代码:
<style> .d1{ width: 200px; height: 100px; background-color: lightblue; } </style> <body> <div class="d1">今天天气好晴朗</div> </body>
常见属性值:(在以上代码基础上进行修改)
注意:
仅 块级元素 才可以完整展示对齐效果。
行级元素无法完整展示对齐效果(行级可以通过 display:block;转块级元素后,使用对齐效果)
2. 文本缩进
text-indent:用于某段文本的首行进行缩进。
例如:text-indent: 10px;
在开发中,不建议在首行缩进处使用 px 单位,这样需要美工人员根据字体大小计算需要缩进的像素,费时费力。
所以在开发中,建议使用 em 单位进行缩进。
例如:text-indent: 2em;
总结:
em 会根据当前字体大小 font-size 自动调整。
用以保证 1em 就是 1 个汉字
3. 文本装饰
text-decoration:文本的装饰效果。(通常用于给超链接修改装饰效果)
常见属性值:
超链接默认是 underline:
通过设置:text-decoration: none;
总结:文本装饰,通常用于设置超链接去除下划线。
4. 行高
line-height:用于设置元素内,每行之间的间距。(行高越大,行间距越大)
注意:行高的设置单位可以为 px,em,百分比。
小技巧:若元素中仅有一行内容,需要将内容在元素中垂直居中,仅需要 行高=元素高度 即可
5. 字体样式
在网页样式中,我们可以对字体进行样式调节。
调节字体字号、字体类型、字体粗细、字体样式等
注意:
1、font-family 可以设置的字体,都是本机存在的字体。
2、font-weight 也可以设置数字 100~900(除非精细化调整,否则不用数字)
400 是 normal,700 是 bold。