一、单位和值
颜色
1、使用有限的颜色名。
2、使用十六进制的颜色值。
颜色名、RGB颜色(百分百颜色、数字颜色、十六进制颜色、短十六进制颜色)
长度单位
英寸(in)、里面(cm)、毫米(mm)、磅(pt)、pica(pc)印刷术语
使用绝对长度、相对长度单位(em、ex和px)
em和ex
css中,一个"em"就是给给定字体的font-size的值,如果某个元素的字体尺寸为14个磅,那么这个元素的一个em就同14个磅一样。
em设置的字体尺寸是相对于父元素的。
像素px
百分比值——百分号%
语音浏览器
角度值:定义发错声音的位置。
时间值:用于指明语音元素间的延迟,可以用毫秒或秒。
频率值:用于指定语音浏览器能够产生的频率。
二、文本属性
文本缩进
段落首行的缩进(indent)。
text-indent
允许值 <长度> | <百分比>
初始值 0
可否继承 否
适用于 块级元素
注意:百分比是相对于父元素的宽度。
P {text-indent:0.25in;} 任何段落首行缩进四分之一英寸。
文本对齐
text-align
允许值 left | center | right | justify
初始值 与用户代理有关
可否继承 是
适用于 块级元素
默认西方语言,是从左到右,即文本从左边空白处一次排序。希伯来语或阿拉伯语缺省是right。justify:两端文本对齐格式。
CSS中无连字符。
处理空白
white-space
允许值 pre | nowrap | normal
初始值 normal
可否继承 否
适用于 块级元素
影响浏览器对单词和文本行间空白的处理方式。HTML将任何空白压缩成单个空白符。
p {white-space:normal;}
浏览器忽略多余的空白,任何额外的空白符及回车符会被浏览器完全忽略。
pre:元素内的空白不被忽略。
nowrap:阻止文本呗包裹在块级元素里。
行高
行高(line-height)指的是文本行的基线间的距离。
line-height
允许值 <长度>| <百分比> | <数字> | normal
初始值 normal
可否继承 是
适用于 所有元素
注意:百分比是值相对元素的字体尺寸。
纵向对齐
vertical-align
允许值 baseline | sub | super | bottom | text-bottom | middle | top | text-top | 百分比
初始值 baseline
可否继承 否
适用于 内联元素
注意:百分比是值相对元素的行高。
基线对齐 baseline 元素的基线同父元素的基线对齐(即文本底部与父元素的底部对齐)。
下标 sub 元素的基线(底端)相对于父元素的基线降低了。
上标 super 元素的基线(底端)相对于父元素的基线升高了。
底端对齐 bottom 元素的内联框的底端同行框的底端对齐。
text-bottom 文本行底端。替换元素或根本没有文本的任何元素都会被忽略。
顶端对齐 top 与bottom的效果刚好相反
text-top 同text-bottoom相反
中间对齐 middle 适合于图像,使元素的纵向的中点对齐本行的中间
百分比 使元素的基线(元素底端)根据给定值升高或降低,所指定的百分比作为行高的值的百分比数来计算
文本间隔和字母间隔
文本间隔
文字和字母间隔就是插入或删除文字或字母间的间隔的方式。
word-spacing
允许值 <长度>| normal
初始值 normal
可否继承 是
适用于 所有元素
缺省值normal为0。字母间隔
letter-spacing
允许值 <长度>| normal
初始值 normal
可否继承 是
适用于 所有元素
间隔、对齐和字体尺寸文字间隔和字母间隔收到文本对齐的值的影响
如果某元素被设置成两端间隔对齐,那么字母和文字间隔可以被改变,以允许两端完全对齐,反过来,它也可以改变制作者对文本间隔和字母间隔的声明值。
文本转换
处理文本大小写的方法。
text-transform
允许值 uppercase | lowercase | capitalize | none
初始值 none
可否继承 是
适用于 所有元素
uppercase和lowercase是将整个文本改为大写或小写capitalize是使每个文字的第一个字母大写
文本修饰
text-decoration
允许值 none | [ underline || overline || line-through || blink ]
初始值 none
可否继承 否
适用于 所有元素
underline 下划线overline 上划线
line-through 删除线
blink 文本闪烁
三、字体属性
使用一般的字体系列
font-famliy
允许值 [[<系列名> | <一般系列> ],] * [<l系列名>|<一般系列>]
初始值 与用户代理有关
可否继承 是
适用于 所有元素
如果用户没有某一种字体,则通过将具体的字体名同一般字体系列组合,文档将尽量以接近制作者意图的方式显示。H1 {font-family : Garamond,serif;}
如果读者没有安装Garamond字体,而安装了Times字体,则用户代理就可用Times来显示H1元素。
使用引号
只有当字体名中有一个或多个空白时,引号才能在font-famlity的声明中使用,或字体名中包含了如“%”或“$“等等的符号时。
H2 { Wedgie,‘Karrank%’,klingon,fantasy;}
至于使用哪种引号,单引号和双引号都可以,如果再style属性中设置一条font-famlity规则,那么规则内就必须使用单引号。
字体加粗
font-weight
允许值 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值 normal
可否继承 是
适用于 所有元素
更粗的字体通常都会有更显著的视觉效果bold/bolder字体加粗
lighter 字体变细
字体尺寸
font-size
允许值 xx-small | x-small | smal | medium | large | x-large | xx-large | smaller | larger | <长度> | <百分比>
初始值 medium
可否继承 是
适用于 所有元素
注意:百分比是指对于父元素的字体尺寸的百分比。绝对字体尺寸 xx-small | x-small | smal | medium | large | x-large | xx-large | 都没有精确定义
相对尺寸 smaller | larger使元素的尺寸相对于其父元素的绝对尺寸变大或变小,而且使用和计算绝对尺寸时所用的一样的缩放因子
百分比尺寸 从与父元素那里继承的尺寸相关
字体尺寸和继承:可被继承,但继承的是计算值,而不是百分比
使用长度单位
样式和变形
字体样式
font-style
允许值 italic | oblique | normal
初始值 normal
可否继承 是
适用于 所有元素
italic 斜体oblique 倾斜
字体变形
font-variant
允许值 small-caps | normal
初始值 normal
可否继承 是
适用于 所有元素
small-caps 请求使用小型大写字母文本使用缩略方式
字体属性
font
允许值 [<字体风格> || <字体变形> || <字体加粗> ]?<字体尺寸>[/<行高>]?<字体系列>
初始值 参见哥哥独立的属性
可否继承 是
适用于 所有元素
字体匹配
三、颜色和背景
元素的前景:元素的文本和元素的边框
使用颜色属性和使用边框属性中的一种来设置边框颜色。
边框颜色(border-color)属性以及其他的一些属性,如border-top,border-right,border-bottom,border-left和border
元素的背景:所有前景色后面的空间,直到边框的边缘,内容框和填充都是元素背景的一部分。
设置背景色:background-color 和 background
前景色
最简便的办法是color属性
color
允许值 <颜色>
初始值 与用户代理有关
是否继承 是
适用于 所有元素
背景颜色
background-color
允许值 <颜色> | transparent
初始值 transparent
是否继承 否
适用于 所有元素
默认 transparent 透明背景图像
background-image
允许值 <url> | none
初始值 none
是否继承 否
适用于 所有元素
按方向重复图像 background-repeat
允许值 repeat | repeat-x | repeat-y | no-repeat
初始值 no-repeat
是否继承 否
适用于 所有元素
背景位置 background-position
允许值 [<百分比> | <长度> ] {1,2} | [ top | center| bottom] || [ left | center | right ]
初始值 0% 0%
是否继承 否
适用于 块级元素和替换元素
注意:百分比是指相对于元素的初始图像的一个点的值
长度值 相对于元素的左上角的偏移量,背景图像上的偏移点也是左上角的那个点
背景附件
background-attachment
允许值 scroll | fixed
初始值 scroll
是否继承 否
适用于 所有元素
使背景图像固定在视野范围内,以避免出现滚动而消失的效果综合
background
允许值 <背景颜色> | <背景图像> | <背景重复> | <背景附件> | <背景位置
初始值 参见各属性
是否继承 否
适用于 所有元素
注意:背景位置中可以出现百分比