CSS基础知识梳理-text文本

最新推荐文章于 2024-05-10 16:30:00 发布

dc15822445347

最新推荐文章于 2024-05-10 16:30:00 发布

阅读量505

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/dc15822445347/article/details/25681717

版权

CSS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css中的文本</title>
<style type="text/css">
h1 {
	/*设置文本的颜色*/
	color: green;
	/*设置文本方向,rtl表示从右向左,默认是从左向右*/
	direction: ltr;
	/*设置行高,可能值为normal(设置合理的行间距);数字或百分比,此数字或百分比值会与当前的字体尺寸相乘来设置行间距*/
	/*数字+单位,以固定尺寸设置行间距*/
	/*line-height与font-size的计算值之差分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框*/
	line-height: 100%;
	/*增加或者减少字符间的空白(字符间距),normal相当于0,即不增加也不减少*/
	letter-spacing: 2px;
	/*规定元素中的文本的水平对齐方式,可选left,right,center,justify(两端对齐,最好不要使用,各个浏览器表现不同)*/
	text-align: center;
	/*规定添加到文本的修饰,默认为none(无修饰),可选underline(下划线),overline(上划线),line-through(定义穿过文本的一条线),blink(文本闪烁)很多浏览器不支持*/
	text-decoration: underline line-through overline;
	/*设置文本块中首行文本的缩进*/
	text-indent: 200px;
	/*控制文本的大小写,可选capitalize(文本中每个单词以大写字母开头),uppercase(定义只有大写字母),lowercase(定义只有小写字母)*/
	text-transform: capitalize;
	/*设置如何处理元素内的空白,可选normal(空白会被浏览器忽略),pre(空白会被浏览器保留,行为类似<pre>标签),nowrap(文本不会换行,文本会在同一行上继续,直到遇到br标签),pre-wrap(保留空白符序列,但是正常的进行换行),pre-line(合并空白符,但是保留换行符)*/
	white-space: normal;
	/*增加或减少单词间的空白,可选normal(默认间距)*/
	word-spacing: 100px;
	border: 1px solid black;
}

p {
	color: red;
}

.ex {
	/*类选择器优先级高于标签选择器*/
	color: blue;
}
</style>
</head>
<body>
	<h1>这是最大号标题big head body style</h1>
	<p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
	<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
</body>
</html>

dc15822445347

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识梳理-text文本

css中的文本h1 { /*设置文本的颜色*/ color: green; /*设置文本方向,rtl表示从右向左,默认是从左向右*/ direction: ltr; /*设置行高,可能值为normal(设置合理的行间距);数字或百分比,此数字或百分比值会与当前的字体尺寸相乘来设置行间距*/ /*数字+单位,以固定尺寸设置行间距*/ /*line-height与font-size的
复制链接

扫一扫

专栏目录