HTML基础—CSS文本属性

最新推荐文章于 2024-07-18 15:25:55 发布

「已注销」

最新推荐文章于 2024-07-18 15:25:55 发布

阅读量315

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/NCU_tanghulu/article/details/108323560

版权

CSS文本属性

一、文本颜色

color属性用于定义文本的颜色。

div {
color: red;
}

颜色的表示：
预定义的颜色值：red, green, blue。
十六进制：#FF0000，#FF6600, #29D794。
RGB代码：rgb(255,0,0)或rgb(100%,90%,0%)。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        color: red;
    }
    p{
        color: #00ff00;
    }
    span{
        color: rgb(0,0,255);
    }
</style>
<body>
<div>A Story</div>
<p>A Man</p>
<span>A Bok</span>
</body>
</html>

结果：
在这里插入图片描述

二、文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式。

div {
text-align: center;
}

left：左对齐(默认值)
right：右对齐
center：居中对齐
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        text-align: left;
    }
    h4{
        text-align: right;
    }
    p{
        text-align: center;
    }
</style>
<body>
<div>文本对齐(text-align):左对齐(默认值)</div>
<h4>文本对齐(text-align):右对齐</h4>
<p>文本对齐(text-align):居中对齐</p>
</body>
</html>

结果：
在这里插入图片描述

三、文本装饰

text- decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
text -decoration: underline; 
}

none：默认。没有装饰线(最常用)
underline：下划线。链接a自带下划线(常用)
overline：上划线。(几乎不用)
line-through：删除线。(不常用)
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .none{
        text-decoration: none;
    }
    .underline{
        text-decoration: underline;
    }
    .overline{
        text-decoration: overline;
    }
    .line-through{
        text-decoration: line-through;
    }
</style>
<body>
<p class="none">HTML+CSS</p><br>
<p class="underline">HTML+CSS</p>
<p class="overline">HTML+CSS</p>
<p class="line-through">HTML+CSS</p>
</body>
</html>

结果：
在这里插入图片描述

四、文本缩进

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

div {
text- indent: 10px;
}

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度 ,甚至该长度可以是负值。

text- indent: 2em;

em是一个相对单位,就是当前元素( font-size) 1个文字的大小，如果当前元素没有设置大小,则会按照父元素的1个文字大小。
例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
</head>
<style>
    p{
        text-indent: 2em;
    }
</style>
<body>
<p>打开北京、上海 与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套
    城市轨道交通系统。</p>
<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤一对很多人
    而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢? </p>
</body>
</html>

结果：
在这里插入图片描述

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础—CSS文本属性

CSS文本属性一、文本颜色color属性用于定义文本的颜色。div {color: red;}颜色的表示：预定义的颜色值：red, green, blue。十六进制：#FF0000，#FF6600, #29D794。RGB代码：rgb(255,0,0)或rgb(100%,90%,0%)。例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫