CSS|文本样式

最新推荐文章于 2024-07-09 14:41:45 发布

Alan_Lowe

最新推荐文章于 2024-07-09 14:41:45 发布

阅读量108

点赞数 1

分类专栏： # CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_45985728/article/details/119147565

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|文本样式

1.颜色

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

在这里插入图片描述

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

.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>

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

在这里插入图片描述

还可以使用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]，越小越透明：

在这里插入图片描述

上为style4，下为style5

2.对齐方式

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

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

在这里插入图片描述

3.首行缩进

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

p{
    text-indent: 2em;
}

在这里插入图片描述

4.行高

line-height可以设置行高

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

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

在这里插入图片描述

5.上中下划线

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

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

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

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

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

Alan_Lowe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录