样式表(CSS)学习教程 >> 幽幽天空设计欣赏网页设计原创作品

什么是 CSS 以及它的功能

关于CSS(（Cascading StyleSheets)有多种译法，我们暂且把CSS叫串接样式表吧,以下简称样式表,它能对网页的样式诸如整体布局、字体、颜色、背景和其它文图效果实现更加精确的控制，使其达到统一的显示效果. 具体说它的优点主要有以下几点：

实现了格式和结构分离。
你将拥有对页面布局的超强控制能力。
在所有浏览器和平台之间的兼容性。
只通过修改一个文件就改变大量页面样式，大大方便网页的更新及维护。
加快页面的访问速度。
web页面更加友好

CSS 所能改变的页面性质如下:

字体
文字间距
列表
颜色
背景
Margin
位置

CSS 的定义

CSS 的每一条定义都有如下的形式

  selector {property:value; property:value; ...}

selector: 第一种是 HTML 的 tag, 比如 P, BODY, A 等等,第二种叫 class, 第三种叫 ID.
property: 就是那些将要被修改的性质, 比如 color,font-size...
value: 给 property 的值, 比如给 color 的可以是red

请看下面的一个典型定义

  A {color: red}

用这条定义所有的联接都变成红色的了. 一般来说我们把所有的定义全包括在 STYLE 元素里面放到 HEAD 里面. 请试验下面的网页:

<HTML><HEAD>   <STYLE>     A {color: red}     P {background-color:blue; color:white}   </STYLE></HEAD><body>海脉信息咨询 </A>   看一下这一段文字的颜色和背景颜色效果.</BODY></HTML>HTML selector

HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你的定义来显示了. HTML selector 的语法如下

tag {property:value}

比如我们想叫 H1 的颜色是红的

H1 {color: red}

CSS 的一个特点是, 它可定义好几个 selector在一个 rOLe 里.如:

H1, H2, TD {color: red}

这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.

Class selector

Class selector 有两种, 一种叫相关 class selector, 它跟一个 HTML 的 tag 有关系. 它的语法是

tag.Classname {property:value}

比如我们想叫一些而不是全部 H1 的颜色是红的

H1.redone {color: red} <H1>红色</H1><H1>不是红色</H1>

第二种是独立 class selector . 它可被任何 HTML tag 所应用.它的语法如下

.Classname {property:value}

假如我们有下面这个定义

.blueone {color: blue}

那么我们可以把他应用到不同的 Tag 当中去. 比如

<H1>蓝色的题目</H1>蓝色的段落

ID selector

ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 javascript 操纵 HTML元素有帮助. 如果你用 CSS-P 来定位, 有 ID 的 HTML 元素可以被 CSS-P和javascript 来操纵.它的语法如下

#IDname {property:value}

假如我们有下面的定义

#yelowone {color: yellow}

我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如

text here 字形与大小

CSS 用来控制字形的性质是 font-family,控制字体大小的性质是 font-size. 比如

H1, H2, P {font-family: 楷体;font-size: 9pt}

CSS 允许你给 font-family 多于一个以上的字形,使得用户浏览器按顺序检测和使用字体,每个字形之间要用逗号隔开. 比如

H1, H2, P {font-family: 楷体, 黑体, 宋体} 斜体

如果想让字体成为斜体, 要用 font-style 性质, 比如

P {font-style: italic} 加重

用 font-weight 来调节文字的粗细, 比如

P {font-weight: bold}

font-style 的可能的值是 lighter, normal, bold, bolder

如何用 CSS 来控制网页中文字定位?

line-height: 行距
text-align: 向那个方向看齐
vertical-align: 向上还是向下看齐
text-indent: 段落第一行空格
text-transform: 字母的大小写
text-decoration: 给文字加装饰, 比如下滑线

行距

我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS中的 line-height 可以调节.

P.double {line-height: 2}

请看下面的比较.

这一段的行距是正常的. 这一段的行距是正常的. 这一段的行距是正常的. 这一段的行距是正常的.

这一段的行距是双倍的. 这一段的行距是双倍的. 这一段的行距是双倍的. 这一段的行距是双倍的.
看齐

一般来说我们都是向左边看齐. 但有的时候也有其他的选择,如向右边看齐.

P.right {text-align: right}

请看下面的比较.

这一行左边看齐

这一行右边看齐

这一行在中间

text-align 可以有 left, right, center, 和 justify
段落的首行空格

如果我们想让第一行的开头空几格, 可以用 text-indent, 比如

P {text-indent: 1cm}

请看下面的例子.

这一段开头空了 1 厘米. 这一段开头空了 1 厘米. 这一段开头空了 1 厘米. 这一段开头空了 1 厘米.
字母的大小写

这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以用 text-transform 来改变英文的大小写. 比如, 让每个字的第一个字母大写

P {text-transform: capitalize}

请看下面的比较.

All the words' first letter have been capitalized in this line

All the letters are uppercase in this line

All the letters are lowercase in this line
文字的装饰

就是在文字上加下滑线, 或中间加条线的. 比如

P.underline {text-decoration: underline}     P.line-through {text-decoration: line-through}

请看下面的比较.

Underline line

line-through line

其实最常用的是我们想去掉联接下面的下滑线.

A {text-decoration: none}

文字的颜色

我们用 color 可以来决定文字，周边，以及横线的颜色

P.greentext {color: green}

请看下面的例子

这一行文字的颜色是绿色的
背景的颜色

背景的颜色可以由 background-color 来控制，比如我们想叫一些文字段落的背景颜色为浅绿色的，

P.greenbg {background-color: #CCEFCC}

请看下面的例子

这一行的背景颜色是浅绿色的

背景的图象

我们不但可以给整个网页加个背景图象，我们还可以给其中一个元素加个背景图象，比如说我们给 P 的背景加上天空的背景

P.sky {background-image: url(../images/sky.jpg)}

请看下面的例子

这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.

我们不但可以决定是否给背景加图象，还可以确定是否让这个图象重复以及在哪个方向重复。比如我们只让图象在整个网页的竖直方向重复我们就可以产生左边有个图象条的效果。

body {background-image: url(sky.jpg); background-repeat: repeat-y top right}

background-repeat可以有这些可能值：no-repeat, repeat-x, repeat-y

我们还可以用 background-attachment 来决定当别人浏览你的网页的是否让背景图象随着内容一起滚动。比如我们如果不让背景图象动，

body {background-image: url(sky.jpg); background-attachment: fixed} 元素周边的空格 margin

性质 margin 可被用来决定周边的空格，假如我们想让整个网页在左边有 5em 但让标题没有任何空格

BODY {margin: 5em}   H3 {margin: -5em}

我们还可以分别用 margin-left, margin-right, margin-top, 和 margin-bottom 来设定左，右，上，下的空格

元素内部周边的空格 padding

初看起来这个性质跟 margin 好象一样。其实它们之间有很大的区别。margin 的空格是相对于其他的元素所空的，而 padding 是在元素的周边和内部的内容所空的空格。在下面的例子，我们用有背景颜色的 TABLE 来让你注意这个性质

TABLE.pad {padding: 5mm; background-color: #CCEFCC}

padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.

我们同样可以用 padding-left, padding-right, padding-top, 和padding-bottom 来分别控制左，右，上，下的元素内部的周边空格。

元素边框的宽度

我们可以用 border-width 性质来调节边框的宽度。比如

P.width5 {border-width: 1px}

这个 P 元素的边框宽度是 1 px

你可以用 border-left-width, border-right-width, border-top-width,和 border-bottom-width 来分别决定左，右，上，下边的宽度

元素边框的颜色

我们可以用 border-color 性质来调节边框的颜色。比如

P.inset {border-width: 5px; border-color: red; border-style: inset}的效果:

这个 P 元素的边框的形态是 inset

P.outset {border-width: 5px; border-color: red; border-style: outset}的效果:

这个 P 元素的边框的形态是 outset

P.double {border-width: 5px; border-color: red; border-style: double}的效果:

这个 P 元素的边框的形态是 double

P.groove {border-width: 5px; border-color: red; border-style: groove}的效果:

这个 P 元素的边框的形态是 groove

P.ridge {border-width: 5px; border-color: red; border-style: ridge}的效果:

这个 P 元素的边框的形态是 ridge

<-- 添加内容结束 //-->

CSS实际应用

　　样式表应用的精华在于我们可以在多个html文件中引入同一个样式表文件，这样一来我们只需修改一个样式表文件，就可以同时改变多个页面的显示外观，给网页的更新维护带来了极大方便。它的使用方法：产生一个普通的网页，但不使用<STYLE>规则，而是在<HEAD>内使用<LINK>标签：
main.htm<HTML><HEAD><TITLE>My First Stylesheet </TITLE><LINK REL=stylesheet HREF ="main.css" TYPE="text/css"></HEAD><body></HTML>　　其中main.css文件中放置设计好的样式表文档，如： <STYLE TYPE="text/css"><-- BODY{FONT-FAMILY: 宋体;FONT-SIZE: 9pt; COLOR:#000000;margin-left: 2em} .pt9 {FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; COLOR:#000000} P,H9,TD,SELECT {FONT-FAMILY: "宋体"; FONT-SIZE: 9pt} A:link {font-family: "宋体"; font-size: 9pt; color: #003388; text-decoration: none} A:visited {font-family: "宋体"; font-size: 9pt; color: #003388; text-decoration: none; font-color=blue} A:hover {font-family: "宋体"; font-size: 9PT;color:red;  text-decoration: underline} --></style>　　这样当我们打开main.htm时，浏览器会首先调入样式表main.css的规则，使页面按此规则显示。
　　另外，我们还可以采用输入样式表，它不同于上述链接法之处在于链接法不能同其它方法结合使用，但输入法则可以。其使用方法：（例） <HTML><STYLE TYPE="text/css"><-- @import url(main.css);　//输入样式表 H1 { color: orange; font-family: impact } --></STYLE><HEAD><TITLE> import css</TITLE></HEAD><body></HTML> 冲突解决
　　以上介绍了几种使用样式表的方法，那么如果我在同一文件中同时使用多种方法应用样式表，浏览器会如何操作呢？
　　好在支持样式表的浏览器自身配有样式表的串接顺序来解决这个问题。根据正式的规定，以下为样式表的串接顺序：（css称为串接样式表，意义正在于此）
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）
浏览器将按照上述顺序执行样式表的指令。
　　但是如果同一种类的多个规则相互冲突怎么办？这里有一个极其简单的解决顺序：
　　1.使用特别说明的样式表规则，例：
BODY { color: green } P { color: red } 　　有一项规则特别说明 中的文字一红色显示，但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以之内的文字以红色显示。
　　2.应用继承的样式表规则
　　如果不存在第1步中所列的特别说明的规则，则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。
　　3.按照样式表规则在HTML中的显示顺序执行。P { color: green } P { color: red } 　　当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。上例中，之内的文字以红色显示，因为它是最后给出的规则。

　　好了，关于样式表就说这么多，请多加实践，你会发现在你学习Dhtml的内容时，样式表在其中扮演了重要角色。