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

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 50 ::
收藏到网摘: 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