CSS属性
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 地址内部进行换行。
顶部
收展
底部
[TOC]
目录
CSS 动画属性(animation)
CSS 背景属性(background)
CSS 边框和轮廓属性
CSS 列表属性(List)
CSS 尺寸属性(size)
CSS 字体属性(font)
CSS 定位属性(Positioning)
CSS 盒子模型
CSS 文本属性(Text)
CSS 表格属性(Table)
CSS 过渡属性(Transition)
CSS 2D/3D 转换属性
CSS 内容生成属性
CSS 颜色属性(Color)
CSS 网格属性(Grid)
CSS 超链接属性
CSS 多列属性(Multi-column)
CSS 页面媒体属性
CSS 分页属性
CSS 用户外观属性
相关推荐
CSS教程
CSS进阶