1.对齐文本(text-align)
(:first-child、:nth-child(n)、:last-child的含义https://www.cnblogs.com/knightdreams6/p/11109755.html
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height

例子:
< !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>
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
2.text-decoration(给文本添加上、下划线,删除线)

css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
< !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>
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
注意: 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>
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
4.line-height 行间距
设置行与行之间的距离
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
上间距=下间距

总结:
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height

相关文章:

  • 2022-12-23
  • 2021-11-24
  • 2021-12-28
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-09-29
  • 2022-12-23
  • 2021-11-26
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-02
相关资源
相似解决方案