您的位置：首页 > Web前端 > CSS

CSS基础知识梳理-text文本

2014-05-13 09:08 399 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航