缩进文本
CSS 文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,
装饰文本,对文本进行缩进,等等。 by_w3school
<div style="color:red;">
<ol class="olStyle">
<li class="liBlack">i am todd.</li>
<li class="liBlue">i am todd.</li>
</ol>
</div>
.olStyle
{
text-indent: 5em;
}
.olStyle .liBlack
{
background-color:black;
text-indent: 10em;
}
.olStyle .liBlue
{
background-color:blue;
text-indent:20em;
}
同时在这里指定的缩进单位,可以为负值。
不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}by_w3school
同时缩进单位可以试用百分比,情况同定位position。
text-indent 属性可以继承。
水平对齐
text-align:center / <center>
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。by_w3school
text-align: left(左) center(中间) right(右) justify(水平对齐)
justify 元素的左右两边都放在父元素的内边界上,调整单词、字母之间的间隔。
字间隔
word-spacing 改变字/单词之间的间隔,通常默认为normal 与设置为0效果一样。
可以输入正负值 正值则间隔增加 负值则间隔减小 (-_-貌似有点废话)
<html>
<head>
<style type="text/css">
.spread {word-spacing: 100px;}
.tight {word-spacing: -0.5em;}
</style>
</head>
<body>
<p class="spread">i am todd.</p>
<p class="tight">i am todd.</p>
</body>
</html>
字母间隔
letter-spacing 改变字符、字母之间的间隔
<html>
<head>
<style type="text/css">
.h1Letter {letter-spacing: -0.5em}
.h4Letter {letter-spacing: 20px}
</style>
</head>
<body>
<h1 class="h1Letter">i am todd.</h1>
<h4 class="h4Letter">i am todd.</h4>
</body>
</html>
字符转换
text-transform 处理文本的大小写
text-transform: none (对文本不作任何改动) uppercase (大写) lowercase (小写)
capitalize (每个单词的首字母大写)
文本装饰
text-decoration
text-decoration: none (关闭一个元素上的所有装饰) underline (下划线) overline (上划线)
line-through (中间的贯穿线) blink (文本闪烁)
处理空白符
white-space
white-space:normal;(丢掉多余的空白符 回车或者连续的空白符都会被替换为一个空格)
white-space:pre;(浏览器不会合并空白符,也不会忽略换行符)
white-space:nowrap;(不能换行)
white-space:pre-wrap;(保留空白符、 换行符, 还允许自动换行)
white-space:pre-line;(保留换行符, 允许自动换行,但是合并空白符)
文本方向
direction 设置是从左到右的文本还是从右到左的文本
direction:ltr; (从左到右)
direction:rtl; (从右到左)
CSS 文本属性属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。by_w3school
CSS 文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,
装饰文本,对文本进行缩进,等等。 by_w3school
<div style="color:red;">
<ol class="olStyle">
<li class="liBlack">i am todd.</li>
<li class="liBlue">i am todd.</li>
</ol>
</div>
.olStyle
{
text-indent: 5em;
}
.olStyle .liBlack
{
background-color:black;
text-indent: 10em;
}
.olStyle .liBlue
{
background-color:blue;
text-indent:20em;
}
同时在这里指定的缩进单位,可以为负值。
不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}by_w3school
同时缩进单位可以试用百分比,情况同定位position。
text-indent 属性可以继承。
水平对齐
text-align:center / <center>
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。by_w3school
text-align: left(左) center(中间) right(右) justify(水平对齐)
justify 元素的左右两边都放在父元素的内边界上,调整单词、字母之间的间隔。
字间隔
word-spacing 改变字/单词之间的间隔,通常默认为normal 与设置为0效果一样。
可以输入正负值 正值则间隔增加 负值则间隔减小 (-_-貌似有点废话)
<html>
<head>
<style type="text/css">
.spread {word-spacing: 100px;}
.tight {word-spacing: -0.5em;}
</style>
</head>
<body>
<p class="spread">i am todd.</p>
<p class="tight">i am todd.</p>
</body>
</html>
字母间隔
letter-spacing 改变字符、字母之间的间隔
<html>
<head>
<style type="text/css">
.h1Letter {letter-spacing: -0.5em}
.h4Letter {letter-spacing: 20px}
</style>
</head>
<body>
<h1 class="h1Letter">i am todd.</h1>
<h4 class="h4Letter">i am todd.</h4>
</body>
</html>
字符转换
text-transform 处理文本的大小写
text-transform: none (对文本不作任何改动) uppercase (大写) lowercase (小写)
capitalize (每个单词的首字母大写)
文本装饰
text-decoration
text-decoration: none (关闭一个元素上的所有装饰) underline (下划线) overline (上划线)
line-through (中间的贯穿线) blink (文本闪烁)
处理空白符
white-space
white-space:normal;(丢掉多余的空白符 回车或者连续的空白符都会被替换为一个空格)
white-space:pre;(浏览器不会合并空白符,也不会忽略换行符)
white-space:nowrap;(不能换行)
white-space:pre-wrap;(保留空白符、 换行符, 还允许自动换行)
white-space:pre-line;(保留换行符, 允许自动换行,但是合并空白符)
文本方向
direction 设置是从左到右的文本还是从右到左的文本
direction:ltr; (从左到右)
direction:rtl; (从右到左)
CSS 文本属性属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。by_w3school