颜色
1.color
设置文本颜色。无默认值。
- transparent:用来指定全透明色彩。
- currentColor: currentColor是 color 属性的值,具体意思是指:currentColor关键字的使用值是color属性值的计算值。
2.opacity
定义元素的不透明度。
取值:number:使用浮点数指定对象的不透明度。值被约束在0.0~1.0范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。
- 当一个元素定义了opacity属性,并且值小于1时,那么它的子元素也会同样拥有相同的透明度。
- 当一个元素定义了opacity属性,并且值小于1时,将会创建一个新的堆叠上下文;如果其它的元素为非定位元素,那么该元素的堆叠级别将会高于其它元素。
- 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果
字体
1.font
-
font-style:指定文本字体样式,指定元素的文本是否为斜体。
取值:
normal:指定文本字体样式为正常的字体
italic:指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字 -
font-variant:定义元素的文本是否为小型的大写字母。
取值:
normal:正常的字体
small-caps:小型的大写字母字体
font-variant.jpg -
font-weight:定义元素文本字体的粗细。
取值:
normal:正常的字体。相当于数字值400
bold:粗体。相当于数字值700。
bolder:定义比继承值更重的值
lighter:定义比继承值更轻的值
<integer>:用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - font-size:定义元素的字体大小。
- font-family:定义元素文本的字体名称序列。
- font-stretch:定义元素的文字是否横向拉伸变形。
取值:
normal:正常文字宽度
ultra-condensed:比正常文字宽度窄4个基数。
extra-condensed:比正常文字宽度窄3个基数。
condensed:比正常文字宽度窄2个基数。
semi-condensed:比正常文字宽度窄1个基数。
semi-expanded:比正常文字宽度宽1个基数。
expanded:比正常文字宽度宽2个基数。
extra-expanded:比正常文字宽度宽3个基数。
ultra-expanded:比正常文字宽度宽4个基数。
- font-size-adjust:定义元素的 aspect 值,用以保持首选字体的 x-height。
文本
1.text-transform:定义元素的文本如何转换大小写。
取值:
none:无转换
capitalize:将每个单词的第一个字母转换成大写
uppercase:将每个单词转换成大写
lowercase:将每个单词转换成小写
full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)
2.white-space:指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。
取值:
normal:默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。
pre:原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果
nowrap:与normal值一致,不同的是会强制所有文本在同一行内显示。
pre-wrap:与pre值一致,不同的是文字超出边界时将自动换行。
pre-line:与normal值一致,但是会保留文本输入时的换行。
3.tab-size:定义元素内容中制表符的长度。
- 该属性决定了制表符(U+0009)的宽度,
number
代表空格(U+0020)的倍数(如:tab-size:4; 表示制表符宽度是4个空格的宽度) - 只有当white-space的属性值为:
pre | pre-wrap
时,该属性的定义才有效
通俗说就是在pre预格式下或者white-space属性为pre-wrap下可以设置空格的宽度。
4.word-break:定义元素内容文本的字间与字符间的换行行为。
normal:默认的换行规则。依据各自语言的规则,允许在字间发生换行。
keep-all:对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal。
break-all
:对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。
break-word
:与break-all
相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与word-wrap的break-word
值效果相同
-
break-all
会在文本内容遇见边界时,强制将文本打断换行,而不考虑单词是否是完整的一个单位 -
break-word
同样也会在文本内容遇见边界时,强制将文本打断换行,不同的在于它会考虑单词是否完整,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示
5.word-wrap/overflow-wrap:设置或检索当内容超过指定容器的边界时是否断行。
取值:
normal:允许内容顶开或溢出指定的容器边界。
break-word:内容将在边界内换行,如果需要,单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示。这与word-break的break-word
值效果相同
6.text-align:定义元素内容的水平对齐方式。
取值left:内容左对齐。
center:内容居中对齐。
right:内容右对齐。
justify:内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。(CSS3)
start:内容对齐开始边界。(CSS3)
end:内容对齐结束边界。(CSS3)
match-parent:这个值和inherit
表现一致,只是该值继承的start
或end
关键字是针对父母的direction值并计算的,计算值可以是 left 和 right 。(CSS3)
justify-all:效果等同于justify
,不同的是最后一行也会两端对齐。(CSS3)
7.word-spacing:指定单词之间的额外间隙。
- 该属性可以将指定的额外间隙添加到每个单词之后,最后一个单词不添加,这意外着可以通过该属性控制单词间的间隙大小。
- 判断是否为单词的依据是单词间是否有单词分割符,比如:空格。
<p>howare you!</p>
p{word-spacing:20px;}
8.letter-spacing:指定字符之间的额外间隙。
- 该属性可以将指定的额外间隙添加到每个字符之后,最后一个单词也会被添加。
9.text-indent:定义块内文本内容的缩进。
text-indent: 30px;
//如果是想要首行空两个字大小可以用em
text-indent:2em;
9.vertical-align:定义行内元素在行框内的垂直对齐方式。
取值:
baseline:把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐(默认)
sub:把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)
super:把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)
text-top:把当前盒的top和父级的内容区的top对齐
text-bottom:把当前盒的bottom和父级的内容区的bottom对齐
middle:把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top:把当前盒的top与行盒的top对齐
bottom:把当前盒的bottom与行盒的bottom对齐
10.line-height:定义元素中行框的最小高度。
- 取值:长度,白分比,长度因子
11.text-size-adjust:定义移动端页面中元素文本的大小如何调整。
文本装饰属性
1.text-decoration:简写属性。定义元素文本装饰。
- text-decoration-line:定义元素文本装饰线条位于文本的哪个位置。
取值:
none:指定文字无装饰
underline:指定文字的装饰是下划线
overline:指定文字的装饰是上划线
line-through:指定文字的装饰是贯穿线
blink:指定文字的装饰是闪烁。
- text-decoration-color:指定元素文本装饰线条的颜色。
- text-decoration-style:定义元素文本装饰线条的形状。
取值:
solid:实线
double:双线
dotted:点状线条
dashed:虚线
wavy:波浪线
- text-shadow:定义文字是否有阴影及模糊效果。
取值:
none:无阴影
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>:设置对象的阴影的颜色。
书写模式
1.direction:检索或设置文本流的方向。
取值:
ltr:文本流从左到右。
rtl:文本流从右到左。
2.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。
取值:
normal:对象不打开附加的嵌入层,对于内联元素,隐式重排序跨对象边界进行工作。
embed:属性的值指定嵌入层,在对象内部进行隐式重排序。
bidi-override:属性的值重排序。忽略隐式双向运算规则。
3.writing-mode:设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式,但是亚洲语言 lr-tb | tb-rl 的书写方式都有。
取值:
horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)
vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)
vertical-lr:垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb:左-右,上-下。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)
tb-rl:上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的(IE)
此属性效果不能被累加使用。例如,父对象的此属性值设为 tb-rl ,子对象再设置该属性将不起作用,仍应用父对象的设置。
列表
1.list-style:复合属性。设置列表项目相关内容
-
list-style-image:设置或检索作为对象的列表项标记的图像。
none:不指定图像,默认内容标记将被 <' list-style-type '> 代替。
<url>:使用绝对或相对地址指定列表项标记图像。如果图像地址无效,默认内容标记将被 <' list-style-type '> 代替。 - list-style-position:设置或检索作为对象的列表项标记如何根据文本排列。
取值:
outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
list-sytle-position.jpg
- list-style-type:设置或检索对象的列表项所使用的预设标记。
取值:
disc:实心圆(CSS1)
circle:空心圆(CSS1)
square:实心方块(CSS1)
decimal:阿拉伯数字(CSS1)
lower-roman:小写罗马数字(CSS1)
upper-roman:大写罗马数字(CSS1)
lower-alpha:小写英文字母(CSS1)
upper-alpha:大写英文字母(CSS1)
none:不使用项目符号(CSS1)
armenian:传统的亚美尼亚数字(CSS2)
cjk-ideographic:浅白的表意数字(CSS2)
georgian:传统的乔治数字(CSS2)
lower-greek:基本的希腊小写字母(CSS2)
hebrew:传统的希伯莱数字(CSS2)
hiragana:日文平假名字符(CSS2)
hiragana-iroha:日文平假名序号(CSS2)
katakana:日文片假名字符(CSS2)
katakana-iroha:日文片假名序号(CSS2)
lower-latin:小写拉丁字母(CSS2)
upper-latin:大写拉丁字母(CSS2)