CSS|文本样式-CFANZ编程社区

CSS|文本样式

1.颜色

颜色用RGB（三原色：RED、GREEN、BLUE）表示，可以直接选择某个颜色，也可以使用#加6位16进制数值来表示：

CSS|文本样式_下划线

前两位表示红色的值，中间两位是绿色，最后两位是蓝色。

.style1{
    color: #FF0000;
}
.style2{
    color: #00FF00;
}
.style3{
    color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
  <link rel="stylesheet" href="Style-demo10.css">
</head>
<body>

<h1 class="style1">标题</h1>
<h1 class="style2">标题</h1>
<h1 class="style3">标题</h1>

</body>
</html>

如上，对于颜色，我就用了#加数值和直接选择颜色来进行的操作：

CSS|文本样式_下划线_02

还可以使用rbg（参数）的形式来表示：

.style1{
    color: #FF0000;
}
.style2{
    color: rgb(0,255,0);
}
.style3{
    color: blue;
}

第一个参数是红色的数值，第二个是绿色，第三个是蓝色。

还可以设置透明度，使用rgba（参数）的形式来表示

.style4{
    color: rgba(255,0,0,0.2);
}
.style5{
    color: rgba(255,0,0,0.5);
}

前三个参数和rgb一样，第四个参数表示透明度，数值取值范围为[0,1]，越小越透明：

CSS|文本样式_html_03

上为style4，下为style5

2.对齐方式

使用text-align可以设置水平对齐方式：

.style1{
    color: #FF0000;
    text-align: center;
}

CSS|文本样式_下划线_04

3.首行缩进

text-indent即可设置缩进，单位用em表示缩进多少个字：

p{
    text-indent: 2em;
}

CSS|文本样式_html_05

4.行高

line-height可以设置行高

p{
    text-indent: 2em;
}
#style6{
    line-height: 50px;
}

<p>《两只老虎》是根据一首在法国叫做《雅克兄弟》（另译《雅克教士》，在德国叫做《马克兄弟》，在英国叫做《约翰兄弟》）的歌曲重新填词改编成的儿歌。在中国，将第一二句的“雅克弟兄”改为“两只老虎”，歌词大意也改为这只老虎没有眼睛（或没有耳朵），又或没有尾巴而惊叹其“奇怪”。在九年义务教育音乐课本和磁带中，是由张金利示范演唱</p>
<p id="style6">《两只老虎》是根据一首在法国叫做《雅克兄弟》（另译《雅克教士》，在德国叫做《马克兄弟》，在英国叫做《约翰兄弟》）的歌曲重新填词改编成的儿歌。在中国，将第一二句的“雅克弟兄”改为“两只老虎”，歌词大意也改为这只老虎没有眼睛（或没有耳朵），又或没有尾巴而惊叹其“奇怪”。在九年义务教育音乐课本和磁带中，是由张金利示范演唱</p>

CSS|文本样式_css_06

5.上中下划线

text-decoration可以进行装饰，这里只说一下下划线吧

上划线：overline
中划线：line-through
下划线：underline

一段文字只能由一种线，谁后声明，就会覆盖掉前面声明的

.style7{
    text-decoration: overline;
    text-decoration: line-through;
    text-decoration: underline;
}

人生没有白走的路，每一步都算数！