1.对齐文本(text-align)
(:first-child、:nth-child(n)、:last-child的含义:https://www.cnblogs.com/knightdreams6/p/11109755.html)
例子:
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style type=“text/css”>
body{
width: 500px;
height: 300px;
border: 1px solid black;
}
p:first-child{
color:red;
}
p:nth-child(2){
color: blue;
text-align: left;
}
p:nth-child(3){
color:red;
text-align:center;
}
p:last-child{
color: yellow;
text-align: right;
}
< /style>
< /head>
< body>
< p>原型< /p>
< p>leftddx< /p>
< p>centerddx< /p>
< p>rightddx< /p>
< /body>
< /html>
2.text-decoration(给文本添加上、下划线,删除线)
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style type=“text/css”>
body{
width: 500px;
height: 300px;
border: 1px solid black;
}
/给a去掉下划线/
a{
text-decoration: none;
}
p:nth-child(2){
color:red;
text-decoration: overline;
}
p:nth-child(3){
color: blue;
text-decoration: underline;
}
p:last-child{
color:black;
text-decoration: line-through;
}
< /head>
< body>
< a href="#">删除下划线(可以是a标签也可以不是 只要想删除下划线就用这个属性值)< /a>
< p>添加上划线< /p>
< p>添加下划线< /p>
< p>删除线< /p>
< /body>
< /html>
注意: a标签是body的第一个孩子,p不是,所以用nth,若用:first-child则会出错
3.text-indent 文本缩进
- 指定文本的第一行的缩进,通常是段落的首行缩进
- 缩进长度推荐使用em,因为em是一个相对单位,长度为当前一个文字的大小。若当前元素没有设置大小,则会按父元素的1个文字大小。
- 缩进长度也可以是负值
例子
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style type=“text/css”>
body{
width: 500px;
height: 300px;
border: 1px solid black;
margin:auto;
}
p:first-child{
color:red;
}
p:nth-child(2){
color: blue;
text-indent:-2em;
}
p:nth-child(3){
color: yellow;
text-indent:20px;
}
p:last-child{
color:black;
text-indent: 2em;
}
< /style>
< /head>
< body>
< p>原样< /p>
< p>负值< /p>
< p>dcedcec< /p>
< p>dewded< /p>
< /body>
< /html>
4.line-height 行间距
设置行与行之间的距离
上间距=下间距
总结: