CSS 文本属性（Text）-KeepStudy

CSS 文本属性（Text）

| 属性 | 说明 | CSS |
|-----|-----|-----|
| color | 设置文本的颜色 | 1 |
| letter-spacing | 设置字符间距 | 1 |
| line-height | 设置行高 | 1 |
| text-align | 规定文本的水平对齐方式 | 1 |
| vertical-align | 设置元素的垂直对齐方式 | 1 |
| text-decoration | 规定添加到文本的装饰效果 | 1 |
| text-indent | 规定文本块首行的缩进 | 1 |
| text-transform | 控制文本的大小写 | 1 |
| text-align-last | 当 text-align 设置为 justify 时，最后一行的对齐方式。 | 3 |
| text-justify | 当 text-align 设置为 justify 时指定分散对齐的方式。 | 3 |
| text-outline | 设置文字的轮廓。 | 3 |
| text-overflow | 指定当文本溢出包含的元素，应该发生什么 | 3 |
| text-shadow | 为文本添加阴影 | 3 |
| text-wrap | 指定文本换行规则 | 3 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 1 |
| white-space | 设置怎样给一元素控件留白 | 1 |
| hanging-punctuation | 指定一个标点符号是否可能超出行框 | 3 |
| punctuation-trim | 指定一个标点符号是否要去掉 | 3 |
| word-break | 指定非CJK文字的断行规则 | 3 |
| word-wrap | 设置浏览器是否对过长的单词进行换行。 | 3 |
| word-spacing | 设置单词间距 | 1 |
| direction | 规定文本的方向 / 书写方向 | 2 |

## color属性
```css
color:red;    /* 红色 */
color:black;  /* 黑色 */
color:gray;   /* 灰色 */
color:white;  /* 白色 */
color:purple; /* 紫色 */

rgb(255,0,51)
rgb(255, 0, 51)

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

rgba(255,0,0,0.1)    /* 10% 不透明 */  
rgba(255,0,0,0.4)    /* 40% 不透明 */  
rgba(255,0,0,0.7)    /* 70% 不透明 */  
rgba(255,0,0,  1)    /* 不透明，即红色 */

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
hsla(240,100%,50%,   1)   /* 完全不透明 */ 
```

## direction属性
- 属性值
    - ltr：默认。文本方向从左到右。
    - rtl：文本方向从右到左。
    - inherit：规定应该从父元素继承 direction 属性的值。

## letter-spacing属性
- 属性值
    - normal：默认。规定字符间没有额外的空间。
    - length：定义字符间的固定空间（允许使用负值）。
    - inherit：规定应该从父元素继承 letter-spacing 属性的值

## line-height属性
- 属性值
    - normal：默认。设置合理的行间距。
    - number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
    - length：设置固定的行间距。
    - %：基于当前字体尺寸的百分比行间距。
    - inherit：规定应该从父元素继承 line-height 属性的值。

## text-align属性
- 属性值
    - left：把文本排列到左边。默认值：由浏览器决定。
    - right：把文本排列到右边。
    - center：把文本排列到中间。
    - justify：实现两端对齐文本效果。
    - inherit：规定应该从父元素继承 text-align 属性的值。

## text-decoration属性
- 属性值
    - none：默认。定义标准的文本。
    - underline：定义文本下的一条线。
    - overline：定义文本上的一条线。
    - line-through：定义穿过文本下的一条线。
    - blink：定义闪烁的文本。
    - inherit：规定应该从父元素继承 text-decoration 属性的值。

## text-indent属性
- 属性值
    - length：定义固定的缩进。默认值：0。
    - %：定义基于父元素宽度的百分比的缩进。
    - inherit：规定应该从父元素继承 text-indent 属性的值。

## text-transform属性
- 属性值
    - none：默认。定义带有小写字母和大写字母的标准的文本。
    - capitalize：文本中的每个单词以大写字母开头。
    - uppercase：定义仅有大写字母。
    - lowercase：定义无大写字母，仅有小写字母。
    - inherit：规定应该从父元素继承 text-transform 属性的值。

## text-align-last属性
- 只有 Internet Explorer 支持 text-align-last 属性。
- Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。
- Internet Explorer 不支持 "start" 和 "end" 值。
- 属性值
    - auto：默认值。最后一行被调整，并向左对齐。
    - left：最后一行向左对齐。
    - right：最后一行向右对齐。
    - center：最后一行居中对齐。
    - justify：最后一行被调整为两端对齐。
    - start：最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。
    - end：最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

## text-justify属性
- 属性值
- auto	浏览器决定齐行算法。
    - none：禁用齐行。
    - inter-word：增加/减少单词间的间隔。
    - inter-ideograph：用表意文本来排齐内容。
    - inter-cluster：只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
    - distribute：类似报纸版面，除了在东亚语系中最后一行是不齐行的。
    - kashida：通过拉伸字符来排齐内容。

## text-outline属性
- 任何主流浏览器都不支持text-outline属性。
- 属性值
    - thickness：必需。轮廓的粗细。
    - blur：可选。轮廓的模糊半径。
    - color：必需。轮廓的颜色。

## text-overflow属性
- 属性值
    - clip：修剪文本。
    - ellipsis：显示省略符号来代表被修剪的文本。
    - string：使用给定的字符串来代表被修剪的文本。

## text-shadow属性
- 属性值
    - h-shadow：必需。水平阴影的位置。允许负值。
    - v-shadow：必需。垂直阴影的位置。允许负值。
    - blur：可选。模糊的距离。
    - color：可选。阴影的颜色。

## text-wrap属性
- 目前主流浏览器都不支持 text-wrap 属性。
- 属性值
    - normal：只在允许的换行点进行换行。
    - none：不换行。元素无法容纳的文本会溢出。
    - unrestricted：在任意两个字符间换行。
    - suppress：压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

## vertical-align属性
- 属性值
    - baseline：默认。元素放置在父元素的基线上。
    - sub：垂直对齐文本的下标。
    - super：垂直对齐文本的上标
    - top：把元素的顶端与行中最高元素的顶端对齐
    - text-top：把元素的顶端与父元素字体的顶端对齐
    - middle：把此元素放置在父元素的中部。
    - bottom：把元素的顶端与行中最低的元素的顶端对齐。
    - text-bottom：把元素的底端与父元素字体的底端对齐。
    - length： 
    - %：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    - inherit：规定应该从父元素继承 vertical-align 属性的值。

## hanging-punctuation属性
- 目前主流浏览器都不支持 hanging-punctuation 属性。
- 属性值
    - none：不在文本整行的开头还是结尾的行框之外放置标签符号。
    - first：标点附着在首行开始边缘之外。
    - last：标点附着在首行结尾边缘之外。
    - allow-end：
    - force-end：

## punctuation-trim属性
- 任何主流浏览器都不支持punctuation-trim属性。
- 属性值
    - none：请勿修剪打开或关闭标点符号
    - start：在每一行的开头放置开头标点符号
    - end：在每一行的末尾修剪结束标点符号
    - allow-end：如果另有不适合之前的理由，修剪每行末尾的结束标点符号。
    - adjacent：若以前相邻字符修剪开口punctuation是一个全形开口，中间或结束标点符号，或表意文字空间。修剪结束标点符号，如果下一个相邻的字符是一个全形关闭或中间punctuation，或表意文字空间

## white-space属性
- 属性值
    - normal：默认。空白会被浏览器忽略。
    - pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    - nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    - pre-wrap：保留空白符序列，但是正常地进行换行。
    - pre-line：合并空白符序列，但是保留换行符。
    - inherit：规定应该从父元素继承 white-space 属性的值。

## word-spacing属性
- 属性值
    - normal：默认。空白会被浏览器忽略。
    - pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    - nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    - pre-wrap：保留空白符序列，但是正常地进行换行。
    - pre-line：合并空白符序列，但是保留换行符。
    - inherit：规定应该从父元素继承 white-space 属性的值。

## word-break属性
- 属性值
    - normal：使用浏览器默认的换行规则。
    - break-all：允许在单词内换行。
    - keep-all：只能在半角空格或连字符处换行。

## word-wrap属性
- 属性值
    - normal：只在允许的断字点换行（浏览器保持默认处理）。
    - break-word：在长单词或 URL 地址内部进行换行。

顶部

CSS属性

目录

相关推荐