使用 CSS 来精确定义页面的外观,相信大家都不会陌生,但面对众多的CSS属性,对于初学者难免有些害怕,虽然有很多功能强大的网页制作软件可以让你不用键盘就可以定义CSS属性,但了解源代码还是必不可少的!从这一次开始,将系统地介绍 CSS 的各个属性,因为对页面产生影响的最终手段还是使用属性。因此,熟练地掌握 CSS 的每一个属性及各个属性值是十分必要的。
字体属性
每个人在浏览页面时,对页面的第一印象可能就是文档所使用的字体和页面上的各种颜色。可以这样说,一个页面字体使用得好坏可以直接关系到页面的浏览质量。因此,在 CSS 中有关字体的属性都具有非常强大的功能。在定义时务必使用一些能够被 UA 识别的字体,下面我们就来看看有关字体的一些属性。
font-family 属性值:[[<family-name> | <generic-family>],] * [<family-name> | <generic-family>] 初始值:由 UA 默认的值制定 适用于:所有元素 继承:是 百分比值:不适用 这个属性是一个按照优先顺序列出的字体名称,它的表述方法与大多数的 CSS 属性有些不同,它的值是用逗号分隔的,用来指定可替换的字体。 BODY{font-family:gill,helvetica,sans-serif} 上面这行代码执行时,如果浏览器没有寻找到“gill”字体,那么就使用“helvetica”或者用“sans-serif”字体替代。
font-style 属性值:normal | italic | oblique 初始值:normal 适用于:所有元素 继承:是 百分比:不适用 “font-style”属性选择了字体中的普通或斜体字形。在 UA 的字体数据库中被标记“oblique”的字体,有时并不是天生的斜体,而是被系统自动变斜的普通字形。
font-variant 属性值:normal | small-caps 初始值:normal 适用于:所有元素 继承:是 百分比值:不适用 “font-variant” 属性决定了字符是以普通还是以小体大写(small-caps)显示。所谓小体大写,就是字体中的所有小写字母看上去与大写字母一样,只不过尺寸比标准的大写要小一点。如果指定的小体大写不存在,那么就用普通字体,并且用大写字母代替其中所有的小写字母。 <HTML> <head> <title>CSS Demo</title> <style type="text/css"> H3{font-variant:small-caps} EM{font-style:oblique} </style> </head> <body> <h1>This is <em>Slanted</em> headline 1 </h1> <h2>This is <em>Slanted</em> headline 1 </h2> <h3>This is <em>Slanted</em> headline 1 </h3> </body> </HTML>
font-weight 属性值:normal | bold | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始值:normal 适用于:所有元素 继承:是 百分比值:不适用 “font-weight” 定义了字体的粗细值。这些值从“100”排到“900”,每一个数字所表示的字体都要比它前一个粗一些。在这些值当中,“normal”相当于“400”,“bold”相当于“700”。至于其它关键字都是相对于上级元素的粗细来继承的。
font-size 属性值:<absolute-size> | <relative-size> | <length> | <percentage> 初始值:medium 适用于:所有元素 继承:是 百分比值:参照上级元素的字体尺寸 <absolute-size>关键字指的是字体尺寸的绝对值,该值由 UA 决定。 [xx-small | x-small | small | medium | large | x-large | xx-large] <relative-size> 此关键字指的是相对于上级元素字体尺寸的大小值。 <larger | smaller] 其它均可指定一个数字字号。
|