devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：很楠不爱3 | 2024-03-20 01:19:34

赞

踩

text-align属性

文章目录





一、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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15




二、text-align 文本对齐方式


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


text-align 属性 取值 :

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

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


在 head 标签设置

.tac {
	text-align:center;
}

  • 1
  • 2
  • 3

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

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

  • 1

显示效果如下 :

在这里插入图片描述
为一个 div 设置 上述 居中对齐的 tac 样式 , 整个 div 中的内容 , 包括字标签中的内容 , 也一并居中对齐 ;

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

  • 1

展示效果如下 :
在这里插入图片描述





三、line-height 行间距设置


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

line-height 属性 取值 :

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


]

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

在这里插入图片描述
设置了行间距后 :

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

  • 1
  • 2
  • 3
  • 4
  • 5

运行效果 :

在这里插入图片描述





四、text-indent 首行缩进设置


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


text-indent 属性值 :

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

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


代码示例 :

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

  • 1
  • 2
  • 3
  • 4

首行缩进前的效果 :

在这里插入图片描述

首行缩进后的效果 :

在这里插入图片描述





五、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;
}

  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述





六、完整代码示例


代码

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

效果

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/269627
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号