当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 第二章 CSS的应用方式

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 第二章 CSS的应用方式


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 23 ::
收藏到网摘: n/a

 
C S S 的 声 明 方 式

  这章节将开始为您介绍CSS的应用。当然一开始要介绍的是如何去建立个样式表 (Style Sheets),包括了声明的方式和应用在网页上的方法,最後还会为您概述一下CSS的一些特性。概略来说,CSS的声明有三种方式:

一、基本声明:最典型的CSS声明方式。
element {property: value} 用中文来表示的话,也就是
元件(标签) {性质(属性)名称: 设定值}
例如:
H3 {COLOR: BLUE} 即为一组声明。

二、集体声明:同时声明某个或数个元件(标签)(各元件(标 签)间以逗号分隔)的一组或数组样式规则(性质)(各组规则间以分号分隔)。
元件(标签) {
性质(属性)名称1: 设定值1;
性质(属性)名称2: 设定值2;
... }
或是
元件A(标签A), 元件B(标签B), 元件C(标签C), ... {
性质(属性)名 称1: 设定值1;
性质(属性)名称2: 设定值2;
...}
例如:
TD {
COLOR: BLUE;
font-size: 9pt;
}
或是
TD,P,DIV {
COLOR: BLUE;
font-size: 9pt;
}

三、分项声明:将许多样式规则分组再分别声明。
元件A(标签A) {性质(属性)名称1: 设定值1; 性质(属性)名称2: 设定值2; }
元件A(标签A) {性质(属性)名称3: 设定值3; 性质(属性)名称4: 设定值4; }
例如:
TD { COLOR: BLUE; font-size: 9pt}
TD { font-family: "标楷体"; line-height: 150%}
这样子的声明方式并不会互相抵触,因为所声明的性质是不同的。如果不小心对同样一个性质作了重复的声明,则只有後来声明的设定值才会发生作用。

  要附带提一下的是,在您的声明中,只要您的格式正确就会被接受,而不论是大小写、空白或换行都不会对显示的结果 有影响的,您可依自己习惯来编写。
C S S 的 应 用 方 法

  接下来要为您介绍的是将所建立的样式表应用在网页上的四种基本方法。

一、使用STYLE属性:STYLE属性直接加在个别的元件标签里。
<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如:
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>

例如:
<STYLE TYPE="text/css">
<!--
BODY {
  color: BLUE;
  background: #FFFFCC;
  font-size: 9pt}
TD, P {
  COLOR: GREEN;
  font-size: 9pt}
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入: 跟LIN