【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )

最新推荐文章于 2024-08-21 16:13:13 发布

韩曙亮

最新推荐文章于 2024-08-21 16:13:13 发布

阅读量2.7k

点赞数 4

分类专栏： CSS 文章标签： css html 文本样式 color text-align

本文链接： https://blog.csdn.net/shulianghan/article/details/129260980

版权

CSS 专栏收录该内容

142 篇文章 41 订阅

订阅专栏

本文介绍了HTML和CSS中设置文本样式的几个关键属性，包括color用于定义文本颜色，text-align控制文本对齐方式，line-height设置行间距，text-indent设置首行缩进，以及text-decoration用于文本装饰，如下划线。这些属性是网页设计中调整文本视觉效果的基础方法。

摘要由CSDN通过智能技术生成

一、color 文本颜色

color 属性可以定义文本颜色 , 其颜色值有三种表示方式 :

预定义颜色 : 直接使用颜色的英文名称 , blue , red , green ;
十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;
RGB 代码颜色 :
- 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
- 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

代码示例 :

<style>
	body {
		font-size:16px;
		color:black;
	}
	.tittle {
		font-size:30px;
		font-weight:400;
		color:#FF0000;
	}
	em {
		font-style:normal;
		color:rgb(0, 0, 255);
	}
</style>

二、text-align 文本对齐方式

text-align 属性 , 可以设置文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ;

text-align 属性取值 :

left : 左对齐 , 该值是默认值 ;
right : 右对齐 ;
center : 居中对齐 ;

text-align 属性 是让标签中的文本内容对齐 , 标签的位置大小区域不变 ;

在 head 标签设置

.tac {
	text-align:center;
}

居中对齐文本样式 , 将该样式定义在 .tac 类选择器中 ; 将 tac 类设置到 h1 标签中 , 让该标签中的内容居中对齐 ;

<h1 class="tittle tac">狂人日记</h1>

显示效果如下 :

为一个 div 设置上述居中对齐的 tac 样式 , 整个 div 中的内容 , 包括字标签中的内容 , 也一并居中对齐 ;

<div class="tac">1918年5月15日 <strong>鲁迅</strong> 收藏本文</div>

展示效果如下 :

三、line-height 行间距设置

line-height 属性 , 用于设置行间距 , 又称为行高 ;

line-height 属性取值 :

像素 px : 最常用的单位 , 一般情况设置行高比字号大 7.8 px ; 文字默认 16 px , 行高为 24 px 即可 ;
相对值 em ;
百分比 ;

]

默认情况下行间距显示效果如下 :

设置了行间距后 :

        <style>
			p {
				line-height: 24px;
			}
        </style>

运行效果 :

四、text-indent 首行缩进设置

text-indent 属性 , 用于设置首行缩进 ;

text-indent 属性值 :

em 值 : 字符宽度倍数 , 如果在汉子段落设置 2em , 就是首行缩进 2 个汉字 ; 推荐使用 ;
px 值 : 指定缩进像素值 , 不常用 ;
百分比值 : 指定相对于浏览器窗口的百分比值 , 不常用 ;

笨一点的方式可以使用   进行缩进 , 如果段落过多 , 操作及其繁琐 ;

代码示例 :

p {
	line-height: 24px;
	text-indent: 2em;  
}

首行缩进前的效果 :

首行缩进后的效果 :

五、text-decoration 文本装饰设置

text-decoration 属性 , 用于设置文本装饰 ;

text-decoration 属性常用于为链接修改装饰效果 ;

text-decoration 属性值 :

none : 默认属性 , 没有装饰 , 取消链接的下划线 ; ( 常用 )
underline : 保留链接的下划线 ; ( 常用 )
overline : 在文本上面划一条线 ; ( 基本不用 )
line-through : 穿过文本一条线 ; ( 不常用 )

代码示例 : em 标签下设置下划线 ;

em {
	font-style: normal;
	color: rgb(0, 0, 255);
	text-decoration: underline;
}

六、完整代码示例

代码

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>Google</title>
		<base target="_blank"/>
        <style>
			body {
				font-size: 16px;
				color: black;
			}
			.tittle {
				font-size: 30px;
				font-weight: 400;
				color: #FF0000;
			}
			em {
				font-style: normal;
				color: rgb(0, 0, 255);
				text-decoration: underline;
			}
			.tac {
				text-align: center;
			}
			p {
				line-height: 24px;
				text-indent: 2em;  
			}
        </style>
    </head>
    <body>
		<h1 class="tittle tac">狂人日记</h1>
		<div class="tac">1918年5月15日 <strong>鲁迅</strong> 收藏本文</div>
		<hr/>
<p>
<em>某君昆仲，今隐其名</em>，皆余昔日在中学时良友；分隔多年，消息渐阙。日前偶闻其一大病；适归故乡，迂道往访，则仅晤一人，言病者其弟也。劳君远道来视，然已早愈，赴某地候补⑵矣。因大笑，出示日记二册，谓可见当日病状，不妨献诸旧友。持归阅一过，知所患盖“迫害狂”之类。语颇错杂无伦次，又多荒唐之言；亦不著月日，惟墨色字体不一，知非一时所书。间亦有略具联络者，今撮录一篇，以供医家研究。记中语误，一字不易；惟人名虽皆村人，不为世间所知，无关大体，然亦悉易去。至于书名，则本人愈后所题，不复改也。七年四月二日识。
</p>

<p>
一
</p>

<p>
今天晚上，很好的月光。
</p>

<p>
我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？
</p>

<p>
我怕得有理。
</p>

<p>
二
</p>

<p>
今天全没月光，我知道不妙。早上小心出门，赵贵翁的眼色便怪：似乎怕我，似乎想害我。还有七八个人，交头接耳的议论我，张着嘴，对我笑了一笑；我便从头直冷到脚根，晓得他们布置，都已妥当了。
</p>

<p>
我可不怕，仍旧走我的路。前面一伙小孩子，也在那里议论我；眼色也同赵贵翁一样，脸色也铁青。我想我同小孩子有什么仇，他也这样。忍不住大声说，“你告诉我！”他们可就跑了。
</p>

<p>
我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子⑶，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。
</p>

<p>
我明白了。这是他们娘老子教的！
</p>

    </body>
</html>