css样式表基础

层叠样式表（CSS）

“层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的、、、

、

、_{、^{等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。}}

CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。

一、如何链接HTML文件与层叠样式表

它有4种方法：

●在HTML文件的区块嵌入层叠样式表的定义。

●将层叠样式表定义在单独的文本文件，然后将之导入或链接至

HTML文件。

●在HTML文件的标签属性style中加入样式定义

●在HTML文件中套用样式类别。

1．在HTML文件的区块嵌入层叠样式表的定义

2．将层叠样式表导入或链接至HTML文件

只有IE浏览器支持。先看下面导入样式表：

将样式表定义在独立的文本文件body.css中，然后嵌入HTML文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。

其BODY.CSS文件内容：

BODY {

font-family: "宋体";

font-size=30;

color:blue

}

再看链接样式表：

将样式表定义在独立的文本文件body.css中，然后链接至HTML 文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。

3．在HTML文件中套用样式类别

您也可以在样式表文件中定义不同的样式类别（Style Class），然后在HTML文件中套用不同的样式类别。

蝶恋花

庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。

雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。

宋  欧阳修

注释1：章台路意指歌妓聚居之所。

注释2：“冶游生春露”,冶游、游冶即春游。

4．在HTML文件中加入样式定义

在HTML文件中加入样式定义，必须用到Style属性。举例如下：

蝶恋花

庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。

雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。

宋  欧阳修

注释1：章台路意指歌妓聚居之所。

注释2：“冶游生春露”，冶游、游冶即春游。

二、如何定义层叠样式表：

我们先来简单的说说层叠样式表的结构：

样式区块：指的是标记和注释标记所成的区块。加上注释标记的原因是考虑到万一碰到不支持样式表的浏览器，那么样式表定义会被当成注释，而不会产生错误。

选择器（Selector）：指的是html组件，也可以理解为html里的标记，例如：P就是一个选择器，所代表的意义为段落。

声明（Declaration）：指的是HTML组件的样式，例如颜色、字体、对体方式等。例如P{color:”blue”}的意义是声名段落文字为蓝色（Blue）。请注意：若设置由英文字母、数字（0~9）、减号（-）或小数点（.）所组成，那双引号可以省略。

类别（Class）：指的是对HTML文件中某些组件所特别设计的样式定义，例如，

P.green{color:”blue”}的意义声名一个Class样式类别，这个样式类别会将段落的文字颜色设置为绿色（green）。

技巧1：

如果您所定义的选择器拥有一个以上的声明，那么这些声明放在{}之间，而且声明之间用分号“;”隔开，例如P{text-indent:50;line-height:150%}是声明一个选择器P，使段落的首行缩排50像素、行距1.5行。

技巧2：

如果您定义的选择器不止一个，那么建议您将每个选择器的定义放在不同的行中，以便阅读，例如：

P{text-indent:50;line-height:150%}

H1{color:blue;background:yellow}

Address{color:green }

在前面的例子中，我们都使用颜色名称来设置颜色，事实上，您也可以使用#RRGGBB、rgb(RR,GG,BB)等方式来制定颜色。举例如下：

H1{color:green}

H1{color:#00ff00 }

H1{color:rgb(0,255,0)}

H1{color: rgb(0%,100%,0%)}

此外，我们使用了如像素点等度量单位，事实上，除了像素点之外，样式表还提供如表所示的度量单位。

层叠样式表所提供的样式可以分成下列7种：

字体样式（Font Property）、文字文本样式（Text Property）、背景样式（Background Property）、区块样式（Box Property）、分类样式（Classification Property）、滚动条样式（Scrollbar Property）、鼠标样式（Cursor Property）。

1．设置字体样式（属性）：

用来设置字体、大小、行距、粗体、斜体等样式。其中字体样式可分为：

（1）文字字体Font-Family

body{font-family:宋体,黑体,仿宋体}

（2）文字样式Font-Style

这个样式的属性值有：normal（正常）、oblique（粗体）、italic（斜体）等（3）小型大写字样式Font-V ariant

这个样式的属性值有：normal（正常）、small-caps（小型大写字）等两种设置，例如：

H1{font-variant: small-caps }

这个语句意义是令HTML文件的标题1文字显示为小型大写字（注：小型大写字就是以较小的字体但大写的方式来显示小写的英文字母）。

（4）文字大小样式Font-Size

Font-Size样式指定文字大小

（5）文字粗细样式Font-Weight

（6）文字行距样式Line-Height

（7）Font样式

Font样式是Font-Family、Font-Style、Font-V ariant、Font-Size、Font-Weight等样式的综合表示法。看下面的实例：

临江仙

夜饮东坡复醉，归来仿佛三更。家童鼻息已雷鸣，敲门都不应，倚杖听江声。长恨此身非我有，何时忘却营营。夜兰风静纹平，小舟从此逝，江海寄余生。

卜算子

缺月挂疏桐，漏断人初静。眼见幽人独往来，飘渺孤鸿影。惊起却回头，有恨无人醒。捡尽寒枝不肯栖，寂寞沙洲冷。

蝶恋花

庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。

2．设置文本样式（属性）：

文本属性设置文本的一些显示特性，例如文本对齐、文本缩进、行间距、字间距等。

（1）文本对齐text-align

属性值：left（左）, right（右）, center（居中）, justify（两端对齐）。

例：h1 {text-align: center}

（2）文本缩进text-indent

该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。例：

p {text-indent: 1.0 in}

（3）行高line-height

该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。例：

body {line-height: 120%}

（4）字间距letter-spacing

字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字符大小为基础。例：

body {letter-spacing: 0.5em}

顺便提一下，文本属性中还有一个单词间距（word-spacing），设置每个单词之间的距离，对于中文页面来讲，可能很少用到。

（5）文本装饰text-decoration

属性值：underline（下划线）, overline（底线）, line-through（线穿过）, blink（闪烁）。例：

h3 {text-decoration: underline}

（6）垂直对齐vertical-align

属性值：baseline（基准线）, super（上标）, sub（下标）, top（顶部）, text-top（文本顶部）, middle（中）, bottom（底部）, text-bottom（文本底部）和百分比。

通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标成为可能。例：

< p>平方值：3< font style="vertical-align:super">2< /font>< /p>

（7）文本变换text-transform

属性值：capitalize（首字母大写）, uppercase（大写）, lowercase（小写）和none （无）。缺省值为none。例：

p {text-transform: capitalize}

3．设置颜色和背景样式（属性）：

在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。

（1）颜色属性：color

属性值：16种颜色名、数值（#RRGGBB或是r%,g%,b%）。

在< font>、< p>、< body>、< table>及其单元元素、标题等对象都可以用到color 属性。下例指定超链接的初始颜色和被激活时的颜色：

< style type="text/css">

a { color: green}

a:hover { color: red}

< /style>

（2）背景属性

·background-color

定义页面或指定对象的背景颜色，属性值和颜色属性相同。

·background-image

属性值：none, url（address），包括相对路径和绝对路径，指定对象的背景图像。

·background-repeat

属性值：no-repeat（无重复）, repeat（重复）, repeat-x（x方向重复）, repeat-y（y 方向重复），缺省值为repeat，指定背景图像的显示方式。该属性需与background-image 和background-position组合使用。

·background-attachment

属性值：scroll（随对象一起滚动）, fixed（固定），缺省值为scroll。该属性指定对象的背景图像是否与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。

·background-position

属性值：垂直位置vertical，指定top, center, bottom和具体数值、百分比；水平位置horizontal，指定left, center, right和具体数值、百分比。定义背景图像的绝对或相对位置显示。

·background

这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。这里是一个较完整的例子：

body { background-image: url(yueju/images/002.gif);

background-repeat: no-repeat;

background-position: 20px 50px;

background-attachment: fixed}

用background属性简写为：

body { background: url(yueju/images/002.gif) no-repeat 20px 50px fixed}

4．设置区块样式（属性）：

每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。

（1）边距属性：

·左边距（margin-left）

·右边距（margin-right）

·上边距（margin-top）

·下边距（margin-bottom）

·边距（margin）

边距属性定义HTML页面中方框四边和其他元素之间的空白距离，每一margin-side 属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。

（2）填充属性：

·左填充（padding-left）

·右填充（padding-right）

·上填充（padding-top）

·下填充（padding-bottom）

·填充（padding）

填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个padding-side 定义一个边框距离，padding则同时定义四个距离。

（3）边界属性

·上边界宽（border-top-width）

·右边界宽（border-right-width）

·下边界宽（border-bottom-width）

·左边界宽（border-left-width）

·边界宽（border-width）

这几个属性定义边界宽度，用thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边界的宽度。

·边界颜色（border-color）

这个属性定义边界的颜色，可以用16种颜色名或RGB值来设置。如果指定一种颜色，则表示四个边框是一种颜色，指定两种颜色，则定义顺序为上下、左右；指定三种颜色，顺序为上、左右、下；指定四种颜色，顺序则为上、右、下、左。16种颜色名分别为：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。

·边界样式（border-style）

该属性用以定义边框的风格呈现式样。共有九种。

·上边界（border-top）

·右边界（border-right）

·下边界（border-bottom）

·左边界（border-left）

·边界（border）

这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定

义宽度、式样和颜色。各属性值之间用空格隔开。

（4）尺寸属性

定义方框的宽度width和高度height。

例：DIV.sample {width: 300px; height: 200px }

（5）浮动和清除属性

浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。

例：

.float1 { float: left; clear: right }

假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。

这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式：

这是一个关于边框属性的完整实例

看看它的显示风格

5．设置分类样式（属性）：

分类属性控制了浏览器的显示方式，我们知道在HTML语言中，对于空格和换行的处理是缺陷所在，分类属性的到来使这些特性的控制成为可能。

分类属性包括显示属性、空白属性和列表属性。下面一一的介绍。

（1）显示属性display

通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法。这个属性有四个值：

·块（block）――在该对象前后自动增加分行符,看下例：

texttext

图像前后的文字将与图像分行显示。

·内联（inline）――这个对象前后的元素与之在一行显示

这个属性值正好相反，当需要对象与前一元素强制性在同一行时使用该值。

·列表项（list-item）――加一个列表项标记，其余同块

该属性值与< LI>、< DD>、< OL>、< UL>等列表标记一起使用。

·无（none）－－对象不显示

该属性值在某种情况下很有用，比如事先隐藏正确答案，直到经过某种操作以后才显示。

（2）空白属性white space

制表符、空格和换行泛称空白，HTML页面显示时，通常根据浏览器窗口的大小自动折行，多余的空白符忽略成一个空格。< PRE>标记可以控制文本在浏览器中的显示，但该标记的限制性很大，只对一些非比例字体才有效，并且每次用到这个命令框起所有文本也相当麻烦，空白属性提供了这种方便。

空白属性有三个值：

·普通（normal）――该属性值保持浏览器自动换行的特性。

·保持原样（pre）――这个值与使用< PRE>标记一样，告诉浏览器按照文本输入原样显示，并不自动折行。

·不折行（nowrap）――这个值把文本中的回车、换行和多个空格都显示成一个空格，换行只由< BR>标记来控制。

（3）列表属性

①列表－样式－类型（list-style-type）

该属性用以改变HTML中列表项的外形显示。它有下列值：

②列表－样式－图像（list-style-image）

这个属性用来指定图像作为列表标记，缺省值为无，当它被设置时，list-style-type属性不显示，可使用绝对或相对位置指定图像。

例：< ul style=list-style-image:url(/abc.gif)">

③列表－样式－位置（list-style-position）

该属性决定了列表项标记放在列表项的什么位置，它的值有inside（内部）和outside

（外部）。缺省值为外部，列表下一行缩进显示；值为内部，列表下一行则不缩进显示。显示效果如下：

·内部：内部显示

·外部：外部显示

④列表－样式list-style

该属性提供了上述列表属性的快捷方法，其书写格式为：

元素{list-style:[type] [position] [url] }

括号表示任选一种。例如：

（图片项目符号f1.gif、对齐左边界）

看下面的真实例子：

• 射雕英雄传


男主角郭靖，女主角黄蓉

• 神雕侠侣


男主角过过，女主角小龙女

• 倚天屠龙记


男主角张无忌，女主角赵敏

6．设置滚动条

从dhtml出现以来，微软对dhtml功能的加强就没有停止过，在微软最新的游览器internet explorer 5.5的的ie5.5增加了许多新的样式表内容，对滚动条的样式进行修改也是其中之一，下面我们简单地介绍一下涉及浏览器滚动条的样式表内容：

（1）设置滚动条显示与否：

overflow内容溢出时的设置

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

（2）设置滚动条显示样式：

scrollbar-3d-light-color立体滚动条亮边框的颜色

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-darkshadow-color立体滚动条暗边框的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条亮边的颜色

scrollbar-shadow-color立体滚动条阴影的颜色

以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。

使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的，第二组的样式属性只有ie5.5版本才能支持，所以请大家在调试的时候注意。

我们通过几个实例来讲解上述的样式属性：

（1）让浏览器窗口永远都不出现滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条

或

（2）设定多行文本框的滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条

或

style="overflow:hidden">

（3）设定窗口滚动条的颜色

看下面的例子（style.css）：

body {

scrollbar-face-color: #330033;

scrollbar-highlight-color: #FFFFFF;

scrollbar-shadow-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-arrow-color:

#FFFFFF;

scrollbar-track-color:

#FFFFFF;

scrollbar-darkshadow-color:

#FFFFFF;

}

7．设置鼠标样式

我们知道，当把鼠标移动到不同的

地方时，当鼠标需要执行不同的功能时，

当系统处于不同的状态时，都会使鼠标

的形状发生改变。

用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。

在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表：

我们来看一个例子吧，请看下面这段代码：

鼠标效果

请把鼠标移到相应的位置观看效果。

手的形状


移动


反方向


等待


求助

8．CSS滤镜

CSS的滤镜属性的标识符是filter。

为了使您对它有个整体的印象，我们先

来看一下它的书写格式：

filter：filtername（parameters）

怎么样？是不是很简单，看上去与

前面讲的属性定义没什么太大的差别。

Filter是滤镜属性选择符。

也就是说，只要您进行滤镜操作，

就必须先定义filter；filtername是滤镜属

性名，这里包括alpha、blur、chroma等

等多种属性，详细内容请看表：

上面filter表达式中括号内的

parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。

我们用一张图片做例子，学习各种滤镜特效。

(1) Alpha滤镜

语法：Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

参数和功能：使对象产生透明度。

从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：



(2)Blur滤镜

语法：Blur(Add=?, Direction=?, Strength=?)

参数和功能：使对象产生模糊效果。

.lujing {

filter: Blur(Add=false, Direction=135, Strength=10);

}

(3)Chroma滤镜

语法：Chroma(Color=?)

参数和功能：某个颜色变透明。这个功能对图片的支持不是很好。

(4)Dropshadow滤镜

语法：DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

参数和功能：阴影效果。这个功能对图片的支持不是很好，普遍用于文字。

(5)FlipH、FlipV滤镜

无任何参数。FlipH使对象产生水平翻转效果；FlipV使对象产生垂直翻转效果。

.lujing {

filter: Flipv;

}

(6)Glow滤镜

语法：Glow(Color=?, Strength=?)

无任何参数。使图片由彩色变为灰白色调。

(8)Invert滤镜

无任何参数。使图片产生照片底片的效果。

(9)Light滤镜

语法：Light(?)

参数和功能：模拟光源的投射效果。不过要通过调用方法来实现，这就需要用到javascript 动态滤镜编程。在这里就不细说了。

(10)Mask滤镜

语法：Mask(Color=?)

参数和功能：在对象上建立一个覆盖于表面的膜。对图像的支持不好，普遍用于文字。(11)Shawdow滤镜

语法：Shadow(Color=?, Direction=?)

参数和功能：与dropshadow非常相似，也是一种阴影效果。dropshadow没有渐进感，shadow 有渐进的阴影感。

(12)Wave滤镜

语法：Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

参数和功能：使对象在垂直方向上产生波浪的变形效果。

(13)X-ray滤镜

无任何参数。使图片只显示其轮廓。

以上我们学习了css的静态滤镜。除了这些之外，css还包含两种动态滤镜，BlendTrans 混合转换滤镜和Revealtrans显示转换滤镜。这两类滤镜不能单独在htnl中调用，必须要结合在scripts程序中，由spripts程序对其进行控制。所以要使用动态滤镜，必须要会spripts编程。不过，我们可以在网上找到很多现成的javascripts来使用，在这里就不多说了。