CSS2快速参考之四 |
5、字体(Font)属性: 这里定义了关于字体的各种属性。 font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样: 属性名称: 'font-family' 属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] 初始值: 根据用户定义而定 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 有些计算机系统里如果没有样式单要求的字体,可以再设一个次字体以备万一。例如: BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } family-name是指确定的某字体,如Heisi Mincho W3,generic-family指某一类字体,如serif。 font-style属性描述字体的倾斜程度: 属性名称: 'font-style' 属性值: normal | italic | oblique 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 font-variant属性: 属性名称: 'font-variant' 属性值: normal | small-caps 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。 font-weight属性用来描述字重。 属性名称: 'font-weight' 属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 100到900代表9种不同的字重,400代表normal,700代表bold,900是最重的字体,bolder或lighter表示字体的字重比父元素高或低一级,比如父元素字重为400,则bolder代表字重500,如果父元素本身字重为900,那么bolder后,字重还是900,同样的lighter也一样。有些字体并没有100到900那么全的字重,也许是从300到700,那么字重的最小和最大值也为300到700。例如: P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ font-size属性描述字体的大小: 属性名称: 'font-size' 属性值: <absolute-size> | <relative-size> | <length> | <percentage> 初始值: medium 适合对象: 所有元素 是否继承: yes 百分比备注: relative to parent element's font size 该属性可以使用绝对大小,也可以使用相对大小,其中绝对大小可以使用,如下关键字表示: xx-small | x-small | small | medium | large | x-large | xx-large 分别代表最小、较小、小、中等、大、较大和最大。 相对大小可以使用:larger 或smaller描述。 例如: P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em } Font属性是以上属性的快捷方式,属性如下: 属性名称: 'font' 属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] 适合对象: 所有元素 是否继承: yes 百分比备注: 只在font-size使用 例如: P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } 6、文本(Text)属性: 这里的属性将影响WEB文档中的文本显示情况。 text-indent属性描述文本的缩进程度: 属性名称: 'text-indent' 属性值: <length> | <percentage> 初始值: 0 适合对象: 容器元素 是否继承: yes 百分比备注: 根据父元素的宽度而定 下面的例子表明段落的缩进值为3em: P { text-indent: 3em } Alignment属性表明文本的对齐方式: 属性名称: 'alignment' 属性值: left | right | center | justify 初始值: 依照用户定义 适合对象: block-level elements 是否继承: yes 百分比备注: 被禁止 text-decoration属性描述对文本的修饰方法: 属性名称: 'text-decoration' 属性值: none | [ underline || overline || line-through || blink ] 初始值: none 适合对象: 所有元素 是否继承: no (see clarification below) 百分比备注: 被禁止 属性值含义分别为: underline:下划线。 overline:上划线。 line-through:删除线。 blink:闪烁(如同Navigator中的blink标记的功能) text-shadow属性可以为文本加入阴影的特效: 属性名称: 'text-shadow' 属性值: none | <color> [, <color> ]* 初始值: none 适合对象: all 是否继承: No 百分比备注: 只在描述透明度时有效 例如: P { text-shadow: black } 上例将在文本的右下方显示黑色阴影,另外阴影将增大BOX的面积。 letter-spacing属性表明文本的字间距:属性名称: 'letter-spacing' 属性值: normal | <length> | auto 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 例如: BLOCKQUOTE { letter-spacing: 0.1em } word-spacing属性表明文本中单词间距: 属性名称: 'word-spacing' 属性值: normal | <length> 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 例如: H1 { word-spacing: 1em } text-transform属性可以将BOX内的文本按指定的大写或小写形式显示: 属性名称: 'text-transform' 属性值: capitalize | uppercase | lowercase | none 初始值: none 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 属性值含义为: capitalize:把BOX中的每句句首字母变成大写。 uppercase:把BOX中所有的字母变成大写。 lowercase:把BOX中所有的字母变成小写。 White-space属性描述如何显示文本中的空格,在HTML中,空格是被省略的,也就是说你在一个段落标记的开头无论输入多少个空格都是无效的,要输入空格有两个方法,一是直接输入空格的代码“ ”,或者使用<pre>标记,CSS中也制定了类似于pre的属性: 属性名称: 'white-space' 属性值: normal | pre | nowrap 初始值: normal 适合对象: 容器元素 是否继承: yes 百分比备注: 被禁止 例如: PRE { white-space: pre } P { white-space: normal } |