应用CSS完全手册！

■ FONT-FAMILY属性：

　　每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。

■ FONT-FAMILY语法实例：

h2 {font-family:times,impact,sans-serif}

说明如下:

　　helvetica是浏览器首先寻找的字体名称，如果有就使用它。在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。

■ 其它相关内容：

通用字体有以下几类，其中cursive和fantasy不被NC支持：
- "serif"(比如Times);
- "sans-serif"(比如Helvetica);
- "cursive"(比如Comic Sans);
- "fantasy"(比如Western);
- "monospace"(比如Courier)
其他使用事项：
- 如果一种字体的名称中有空格，如"Times New Roman"，在CSS语句中要用引号包含该字体。
- 例：Body {font-family:"Times New Roman",serif}
- 如果该语句已在双引号里，则字体名降级为单引号。
- 例：
- 如果该语句包括其它CSS规则，字体说明应放在最后。
- 例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}
■ 继承：
　　继承：就是在子元素没有定义样式的情况下，它将采用上一级元素的样式定义。
　　优先级：根据继承来理解优先级也就容易。最近的样式优先级最高。比如:
　　CSS在<heda>声明 I{font-family:impact}；
　　但在HTML语句中又如下定义： 要显示的文字在这里 在此例中样式表要求用IMPACT字体，而FONT标记要求用TIMES字体，最终浏览器使用的会是TIMES。作为CSS标准制定者，要求将CSS优先，他们认为像以上的例子中应该用IMPACT字体。可以浏览器产商照顾使用者的旧习惯，使用了FONT标记中的字体，尽管FONT已不被提倡。

　　■ 更好的方法--关联：

　　我并讲不出抛弃FONT标记的理由，只知道这是潮流。显然CSS提供更好的方法避免你在像上面的例子一样使用FONT标记，那就是：关联。可以在HEAD部分的CSS定义中加入如下行： P I {font-family:times} /*P和I之间的空格不能少*/
　　在HTML中： 要显示的文字在这里
　　虽然你没有使用FONT FACE，但根据HEAD部分的CSS定义，P标记里的I标记使用的字体一定是TIMES。要提起注意的是那行CSS样式只作用于P标记里的I标记。

■ 大小控制方法：
　　以下是控制文字大小的三种方法：
- 使用大小单位，pt(点),px(像素),em,及其他单位；
- 使用关键字(xx-small,x-small,small,medium,large,x-large,xx-large)；
- 使用比例参数(150%等)。
- p {font-size:12pt};
- p {font-size:large};
- p {font-size:200%};
■ 字体风格：
- 斜体 p {font-style:italic};
- 粗体 p {font-weight:bold};
　　在字重的设定方面，还有lighter(更轻)和bolder(更重)，还可以使用数字100,200到900最重。

　　字体风格和字重都有一个共同的参数normal，一旦设为normal也就取消了字重和风格设置。
■ FONT-VARIANT：
　　FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写：
- h2 {font-variant:small-caps}
■ TEXT-TRANSFORM：
　　完全控制字母大小写：
- 全部大写：h2 {text-transform:uppercase};
- 全部小写：h2 {text-transform:lowercase};
- 单词第一个字母大写：h2 {text-transform:capitalize};
- 取消所有设定：h2 {text-transform:none};
■ TEXT-DECORATION：
　　哪天你突发奇想，希望链接没有下划线，现在你可以做到：
- 文字下划线：A:link{text-decoration:underline};
- 文字上划线：A:link{text-decoration:overline};
- 文字删除线：A:link{text-decoration:line-through};
- 文字闪烁：A:link{text-decoration:blink};
- 不要任何效果：A:link{text-decoration:none}
 ■ 字间距：
 　　利用字间距属性word-spacing，可以调整单词间的距离。
 - h2 {word-spacing:5pt}
 ■ 字母间距：
 　　利用字母间距属性letter-spacing，可以调整单词中每个字母间的距离。
 - h2 {letter-spacing:10pt};
 ■ 行高：
 　　与字距不同的是行距line-height，它调整的是行与行间垂直方向的距离，有三种方法设置：
 - 数值：h3 {font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */
 - 长度单位：h3 {font-size:12pt; line-height:24pt};
 - 比例：h3 {font-size:12pt; line-height:200%};
 　　无论是字距或字母间距或行距都有一个共同的参数：normal，一旦设为normal就是要浏览器使用默认值。
 
 ■ 水平对齐：
 　　利用文字对齐属性text-align，可以控制段落的水平对齐：
 - h2 {text-align:center}
 - h2 {text-align:left}
 - h2 {text-align:right}
 　　这项属性可作用于,<h1>-<h6>,<blockquote>和<ul>标记。
 
 ■ 垂直对齐：
 　　利用垂直对齐属性vwrtical-align，可以控制对象（包括文字或图形）相对于母体的垂直位置：
 - h2 {vertical-align:top}
 - h2 {vertical-align:text-top}
 - h2 {vertical-align:bottom}
 - h2 {vertical-align:text-bottom}
 - h2 {vertical-align:baseline}
 - h2 {vertical-align:middle}
 - h2 {vertical-align:sub}/*上标*/
 - h2 {vertical-align:super}/*下标*/
 　　这些属性具体对齐效果如何，希望大家自已去试验。
 
 ■ 首行缩进：
 　　首行缩进text-indent，在文档排版中经常用到：
 - h3 {text-indent:24pt}; ■ 容器的概念：
 　　根据CSS对网页样式的定义，页面上的所有元素都放在一个容器里，这个容器叫BOX。BOX也就包括：
 - 元素本身；
 - 围绕元素的空格；(padding)
 - 围绕元素空格外的边框；(border)
 - 边框外的边距。(margin)
 ■ 四个边距：
 　　margin用于设定上，右，下，左，边距：
 - body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
 - body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/
 　　以上参数值同样可以是其他长度单位（如：pt,em等）或比例。
 
 ■ 顶，底，左，右空格填充：
 　　padding用于设置空格填充范围，用法与边距属性相同：
 - h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
 left:40px};
 - h3 {margin:10px 20px 30px 40px}
 ■ 边框：
 　　border可设定的属性很多，包括颜色和宽度，关键是可以指定每个边的宽度和每个边的颜色。
 - 边框宽度border-width可以是thin,medium,thick或长度值：
 
 h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
 h3 {border-width:2px 4px 6px 8px}/*与上面相同*/
 
 p {border-top-width:thin;border-right-width:medium;border-bottom-
 width:thick;border-left-width:none};
 p {border-width:thin medium thick none}/*与上面相同，左边框将不显示*/
 - 边框颜色border-color定义方法与宽度定义相似，颜色值也可以用RGB值（如#ff00ff）：
 
 h3 {border-color:red blue yellow green}/*上:红；右：蓝；下：黄；左：绿*/
 h3 {border-color:red blue }/*上，下:红；右，左：蓝；*/
 h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/
 - 边框线的线条式样border-style，有九个关键字来描述：
 
 none /*不画边框，不论边框厚度是多少*/
 dotted /*由点组成的虚线*/
 dash /*由短线组成的虚线*/
 solid /*实线 */
 double /*双实线*/
 groove /*3D沟状*/
 ridge /*3D脊状*/
 inset /*3D内嵌*/
 outset /*3D外嵌*/
 其使用方法与厚度、颜色相似，不再多讲。
 - 一条边框的颜色，厚度，线条式样可以在一条语句中定义。例：
 
 h1 {border-top:5px solid red}
 　　这么多的参数，这么多的组合，要想得心应手，不下一番功夫去练习是不可能达到的。

上一篇：用CSS打造韩式风格网站下一篇：CSS菜鸟学习小结