text
text
文字属性:对文字外观进行设置。主要用来美化和特殊需要。主要有以下这些属性：
| Property | Description |
|---|---|
| color | 设置文字颜色 |
| direction | 指定文字方向/书写方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 文字的水平对齐方式 |
| text-decoration | 指定添加到文本的修饰 |
| text-indent | 首行文字的缩进 |
| text-shadow | 文本的阴影效果 |
| text-transform | 控制文本大写 |
| text-overflow | 指定应如何向用户发送未显示的溢出内容信号 |
| unicode-bidi | 与[direction]属性一起使用，可设置或返回是否应重写文本以支持同一文档中的多种语言 |
| vertical-align | 垂直对齐方式 |
| white-space | 指定如何处理元素内的空白 |
| word-spacing | 设置单词间距 |
color颜色属性：
- 字体颜色 color
- 背景颜色 backgroun-color
- 边框颜色 在border属性中设定：style=”border:1px solid red “
有多种表达方法。列举几种常见的如下：
颜色名称：
- 通用的：
- red
- blue
- green
- yellow
- black
- white
- gray
- Fuchsia 品红
- Aqua 水蓝
- Olive 橄榄色
- Navy 海军蓝
- Purple 紫色
- Teal 水鸭绿
- Silver 银色
- Lime 酸橙色
- 延伸的：
- tomato
- seagreen
- deagreeen-deep
- …..
- 通用的：
16进制颜色值
#00FF00，相当于#rrggbb。前两位表示红 中间两位表示绿 后两位表示蓝
rgb
rgb(255,255,255)
rgba
rgba(255,0,0,0.5)比rgb表示法多1位。
a表示透明度，用小数表示
text-align文本水平对齐属性
text-align文本水平对齐属性：适用于块容器内。
- left 默认居左
- center 居中
- right 居右
- justify 两端对齐
- inherit 继承父元素
举例：
文本水平对齐属性:适用于块容器内,也就是说对于于块元素标签有效.靠左对齐,居中,靠右对齐关键词:水平,对齐,块。 |
文本水平对齐属性:适用于块容器内,也就是说对于于块元素标签有效.靠左对齐,居中,靠右对齐关键词:水平,对齐,块。 |
文本水平对齐属性:适用于块容器内,也就是说对于于块元素标签有效.靠左对齐,居中,靠右对齐关键词:水平,对齐,块。 |
文本水平对齐属性:适用于块容器内,也就是说对于于块元素标签有效.靠左对齐,居中,靠右对齐关键词:水平,对齐,块。 |
本段代码如下：
1 | <table> |
vertical-align元素垂直对齐
vertical-align元素垂直对齐 :设置内容在元素框中的垂直对齐方式
| 属性值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
line-height行高属性
line-height行高属指定了行间距。
| 属性值 | 描述 |
|---|---|
| normal | 默认。一般为字体高度的1.2 |
| 数值 | 缩放比例。该数字与当前字体高度相乘 |
| 长度 | 固定线高，以px，pt，cm等为单位，可为负数。 |
| % | 以当前字体大小的百分比表示 |
| inherit | 继承父级元素 |
举例：
1 | <p style="line-height: normal;background-color:lime">属性值:normal</p> |
属性值:normal
属性值比例:1.5。
属性值:高度1cm。
属性值:80%
letter-spacing/word-spacing 字符/单词间距：
两个属性比较类似，letter-spacing:设定字符间距。word-spacing 设定单词间距。这对于英文来说很好理解，letter-spacing设定的是每个字母之间的间距，word-spacing设置的是单词之间的间距。那么对于汉字？每个汉字之间的间距是用letter-spacing来设定的。如果汉字之间出现了空格，那么就将空格两边当作是两个单词了，word-spacing设定的就是这个空格的大小。
| Value | Description |
|---|---|
| normal | No extra space between characters. This is default |
| length | 指定字符之间多余的空格。允许使用负值。 |
| inherit | 继承父级元素的值 |
1 | <div style="background-color:#f2f4f1"> |
normal:标准字符间距
字符间距length：15px
字符间距length：5px
字符间距length:-1px
this is a word space，这是两个 汉字 之间的 间距15px
text-indent首行缩进
text-indent属性指定文本块中第一行的缩进。 注意：允许使用负值。如果值为负，第一行将向左缩进
1 | <p style="text-indent:2em;background-color:#def7f7;width:40%;margin-right:6%;float:right"> |
text-indent属性指定文本块中第一行的缩进。 注意：允许使用负值。如果值为负，第一行将向左缩进.本段缩进2em。正值的效果是向右缩进。
text-indent属性指定文本块中第一行的缩进。 注意：允许使用负值。如果值为负，第一行将向左缩进.本段缩进-2em,负值的效果是向左缩进了。
direction文字方向属性
将文本方向设置为“从右到左”
| Value | Description |
|---|---|
| ltr | left-to-right. This is default |
| rtl | right-to-left |
| inherit | Inherits this property from its parent element. |
1 | <div style="background-color:#f1f1f1"> |
这个段落是默认的，文字是从左到右的方向。
这个段落设置了direction:rtl，文字是从右到左的。
text-decoration添加文本修饰线
- text-decoration-line (必须的)设置要使用的文字修饰类型
- underline
- overline
- line-through
- text-decoration-color
- text-decoration-style
- solid 实线
- double 双实线
- dotted 点划线
- dashed 虚线
- wavy 波浪线
1 | <h4 style="text-align:center;color:red">text-decoration添加文本修饰线</h4> |
看这个段落的效果，这里设置如：text-decoration-line:underline
看这个段落的效果，这里设置如：text-decoration-line:underline line-through;text-decoration-color:blue;text-decoration-style:wavy
text-shadow添加阴影
| Value | Description |
|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
| blur-radius | Optional. The blur radius. Default value is 0 |
| color | Optional. The color of the shadow. Look at for a complete list of possible color values |
1 | <h1 style="text-shadow:5px 5px 5px #ff0000">Text-shadow with blur effect</h1> |
Text-shadow with blur effect
text-transform改变大写
text-transform属性控制文本的大小写。
| Value | Description |
|---|---|
| none | 没有大写。文本按原样呈现。这是默认值 |
| capitalize | 将每个单词的第一个字符转换为大写 |
| uppercase | 将所有字符转换为大写 |
| lowercase | 将所有字符转换为小写 |
1 | <div style="background-color:#def7f7"> |
看这个段落的效果，这里设置如：text transform is capitalize
看这个段落的效果，这里设置如:text transform is uppercase
white-space空白处理
空白属性指定如何处理元素内部的空白
| Value | Description |
|---|---|
| normal | 空格序列将折叠为单个空格。必要时将自动换行。这是默认值 |
| nowrap | 文本永远不会换行，直到遇到<br/>标记 |
| pre | 空白保留。文本会换行。行为类似于HTML中的<pre>标签 |
| pre-line | 不留白，换行，保留换行符 |
| pre-wrap | 留白，正常换行。 |
1 | <div style="background-color:#b2b2d0;width:200px;margin-left:15%"> |
white-space:normal 不留白，正常换行。不留白，正常换行
white-space:pre 留白，不换行，除非强制换行
white-space:nowrap 不留白不换行，除非使用了一个br强制换行元素才换行
white-space:pre-wrap 留白正常换行。 留白正常换行。
white-space:pre-lineh 不留白，换行但保留换行符