1.text文本相关属性的汇总
属性 |
描述 |
设置文本颜色 |
|
设置文本方向。 |
|
设置字符间距 |
|
设置行高 |
|
对齐元素中的文本 |
|
向文本添加修饰 |
|
缩进元素中文本的首行 |
|
设置文本阴影 |
|
控制元素中的字母 |
|
设置或返回文本是否被重写 |
|
设置元素的垂直对齐 |
|
设置元素中空白的处理方式 |
|
设置字间距 |
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
· 十六进制值 - 如: ＃FF0000
· 一个RGB值 - 如: RGB(255,0,0)
· 颜色的名称 - 如: red
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body {color: red;} h1 {color: #0000FF;} p.szh {color: rgb(255,0,255);} </style> </head> <body> <p>这是一个普通的段落，其颜色为红色（对应第7行代码）</p> <h1>这是一个一级标题，颜色设置为蓝色</h1> <p class="szh">这是一个类为"szh"的段落，颜色为紫色</p> </body> </html>
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
值 |
描述 |
left |
把文本排列到左边。默认值：由浏览器决定。 |
right |
把文本排列到右边。 |
center |
把文本排列到中间。 |
justify |
实现两端对齐文本效果。 |
inherit |
规定应该从父元素继承 text-align 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> h1 {text-align: center;} p.message {text-align: justify;} p.date {text-align: right;} </style> </head> <body> <h1>CSS text-align 实例</h1> <p class="message"> 经过奋斗，终于拨开了云雾，见到了日出，走上了阳光大道。面对取得的成绩，不要骄傲，再接再励，继续向前行。 原以为“得不到”和“已失去”是最珍贵的，可原来把握眼前才是最重要的。 我很自信，自已的未来将绚丽多彩。我对未来也充满了希望。 </p> <p class="date">2020 年 1 月 21 日</p> </body> </html>
text-decoration属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
值 |
描述 |
none |
默认。定义标准的文本。 |
underline |
定义文本下的一条线。 |
overline |
定义文本上的一条线。 |
line-through |
定义穿过文本下的一条线。 |
blink |
定义闪烁的文本。 |
inherit |
规定应该从父元素继承 text-decoration 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> h1 {text-decoration: overline;} h2 {text-decoration: line-through;} h3 {text-decoration: underline;} h4 {text-decoration: none} </style> </head> <body> <h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <h3>This is heading 3.</h3> <h4>This is heading 4.</h4> </body> </html>
1.4 text-transform、direction属性
text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
值 |
描述 |
none |
默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize |
文本中的每个单词以大写字母开头。 |
uppercase |
定义仅有大写字母。 |
lowercase |
定义无大写字母，仅有小写字母。 |
inherit |
规定应该从父元素继承 text-transform 属性的值。 |
direction属性是用来设置文本的方向或书写的方向。
值 |
描述 |
ltr |
默认。文本方向从左到右。 |
rtl |
文本方向从右到左。 |
inherit |
规定应该从父元素继承 direction 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> p.first {text-transform: uppercase;} p.second {text-transform: lowercase;} p.third {text-transform: capitalize;} p.fourth {direction: ltr;} p.fifth {direction: rtl} </style> </head> <body> <p class="first">This is a dog.</p> <p class="second">This is a dog.</p> <p class="third">This is a dog.</p> <p class="fourth">This is a dog.</p> <p class="fifth">This is a dog.</p> </body> </html>
1.5 text-indent、text-shadow属性
text-indent文本缩进属性是用来指定文本的第一行的缩进。
值 |
描述 |
length |
定义固定的缩进。默认值：0。 |
% |
定义基于父元素宽度的百分比的缩进。 |
inherit |
规定应该从父元素继承 text-indent 属性的值。 |
text-shadow文本阴影属性应用于阴影文本。
值 |
描述 |
h-shadow |
必需。水平阴影的位置。允许负值。 |
v-shadow |
必需。垂直阴影的位置。允许负值。 |
blur |
可选。模糊的距离。 |
color |
可选。阴影的颜色。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> h1 {text-shadow: 5px 5px #00FFFF} p {text-indent: 35px;} </style> </head> <body> <h1>这是一个设置了文本阴影的标题</h1> <p> 经过奋斗，终于拨开了云雾，见到了日出，走上了阳光大道。面对取得的成绩，不要骄傲，再接再励，继续向前行。 原以为“得不到”和“已失去”是最珍贵的，可原来把握眼前才是最重要的。 我很自信，自已的未来将绚丽多彩。我对未来也充满了希望。 </p> </body> </html>
1.6 letter-spacing、word-spacing属性
letter-spacing属性增加或减少字符间的空白（字符间距）
对于英语来说，letter-spacing设置的是每个字母之间的间距；而对于汉语来说，letter-spacing设置的是每个汉字之间的间距。
值 |
描述 |
normal |
默认。规定字符间没有额外的空间。 |
length |
定义字符间的固定空间（允许使用负值）。 |
inherit |
规定应该从父元素继承 letter-spacing 属性的值。 |
word-spacing属性增加或减少字与字之间的空白。设置的是每个英语单词之间的间距！！！
值 |
描述 |
normal |
默认。定义单词间的标准空间。 |
length |
定义单词间的固定空间。 |
inherit |
规定应该从父元素继承 word-spacing 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> h1 {letter-spacing: 3px;} h2 {letter-spacing: -2px;} p.one {letter-spacing: 10px;} p.two {word-spacing: 50px;} </style> </head> <body> <h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <p class="one">这段文本中设置的字符间距为10px</p> <p class="two">This is a cat.</p> </body> </html>
设置以百分比计的行高。注意： 负值是不允许的
值 |
描述 |
normal |
默认。设置合理的行间距。 |
number |
设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
length |
设置固定的行间距。 |
% |
基于当前字体尺寸的百分比行间距。 |
inherit |
规定应该从父元素继承 line-height 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p.small {line-height: 70%;} p.big {line-height: 200%;} </style> </head> <body> <p> 这是一个标准行高的段落。<br /> 这是一个标准行高的段落。<br /> 大多数浏览器的默认行高约为110%至120%。<br /> </p> <p class="small"> 这是一个更小行高的段落。<br /> 这是一个更小行高的段落。<br /> 这是一个更小行高的段落。<br /> 这是一个更小行高的段落。<br /> </p> <p class="big"> 这是一个更大行高的段落。<br /> 这是一个更大行高的段落。<br /> 这是一个更大行高的段落。<br /> 这是一个更大行高的段落。<br /> </p> </body> </html>
1.8 white-space、vertical-align属性（不再举例了。。。）
white-space属性指定元素内的空白怎样处理。
值 |
描述 |
normal |
默认。空白会被浏览器忽略。 |
pre |
空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap |
文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
pre-wrap |
保留空白符序列，但是正常地进行换行。 |
pre-line |
合并空白符序列，但是保留换行符。 |
inherit |
规定应该从父元素继承 white-space 属性的值。 |
vertical-align属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
值 |
描述 |
baseline |
默认。元素放置在父元素的基线上。 |
sub |
垂直对齐文本的下标。 |
super |
垂直对齐文本的上标 |
top |
把元素的顶端与行中最高元素的顶端对齐 |
text-top |
把元素的顶端与父元素字体的顶端对齐 |
middle |
把此元素放置在父元素的中部。 |
bottom |
使元素及其后代元素的底部与整行的底部对齐。 |
text-bottom |
把元素的底端与父元素字体的底端对齐。 |
length |
将元素升高或降低指定的高度，可以是负数。 |
% |
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit |
规定应该从父元素继承 vertical-align 属性的值。 |
