css教案

3.1 CSS概述

CSS（Cascading Style Sheet，可译为“层叠样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS可以用任何写文本的工具进行开发,如文本工具,dreamweaver等。

3.1.1 CSS的语法结构

CSS定义是由三个部分构成:

选择符 {属性:值;}。

例如：

body { background:#000000;} /*设置页面背景为黑色*/

3.1.1 选择符

1．选择符的书写格式和使用方法

（1）如果需要对一个选择符指定多个属性时，可使用分号将所有的属性和值分开，例如：

p {text-align: center; color: red} /*段落居中排列;并且段落中的文字为红色*/

（2）可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义，例如：

h1, h2, h3, h4, h5, h6 { color: green } /*六种标签的文字均为绿色*/

（3）用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。

假如想要两个不同的段落，一个段落向右对齐，一个段落居中，则可先定义两个类:

{text-align: right}

{text-align: center}

然后用不在不同的段落的XHTML标签里加入class参数:

这个段落向右对齐的

这个段落是居中排列的

（4）类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式。

例如有CSS规则如下

.center {text-align: center} /*定义.center的类选择符为文字居中排列*/

使h1元素(标题1)和p元素(段落)都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符:

这个标题是居中排列的

这个段落也是居中排列的

（5）先在XHTML页面中为某个元素指定id参数，然后采用id选择符对这个元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。ID只能在一个页面中出现一次,而class可以多次运用。

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。

下面这个例子，ID属性将匹配id="intro"的元素:

#intro { font-size:110%;font-weight:bold; } /*字体尺寸为默认尺寸的110%;粗体*/

下面这个例子，ID属性只匹配id="intro"的段落元素:

p#intro{ font-size:110%;font-weight:bold; }

（6）可以单独对某种元素定义包含选择符，例如要改变表格内的链接样式，而表格外的链接样式不变:

table a { font-size: 12px }

2．选择符的优先级别

相比之下，ID选择符-------类选择符--------HTML标记选择符。

3．样式表的层叠性

层叠性就是继承性。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。

3.1.1 应用CSS样式到网页中

CSS样式表可以以多种方式灵活的应用到所设计的页面中，选择方式根据设计的不同要求来制定

1．内嵌样式表

内嵌样式表将CSS样式所定义的内容写在XHTML代码行内，如

页面背景色为红色

2．内部样式表

将CSS样式统一放置在... 区段中。

3．外部样式表

外部样式表是相对于内部样式表而言的，它实际上是一个后缀名为.css的文件，独立于HTML页面，放置于网站文件夹内某个位置。

外部样式表通过在某个HTML页面中添加链接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用，这就是它最大的优点。

【操作实例16】CSS外部样式表的建立和使用

目标：建立一个CSS外部样式表，使之应用到网页中。

操作过程：

（1）在Dreamweaver中依次单击“文件”|“新建”菜单命令，在弹出的

“新建文档”对话框中选择空白页，页面类型为CSS，单击“创建”按钮，创建CSS新文件，输入以下内容后保存为。

body{background-color:#F00}

（2）在Dreamweaver中新建一个XHTML网页，单击“CSS”面板下方的

按钮，选择上述文件，如图所示。

链接成功后网页的背景色变为红色，切换到代码视图，看到在标签中出现一行链接代码：

3．三种样式表的优先级别

内嵌样式表--------内部样式表--------外部样式表

3.3 CSS样式定义

在Dreamweaver中，即使不懂CSS语言代码，也可以轻松地创建与使用CSS样式表。

3.3.1 “CSS样式”面板

“CSS 样式”面板右下角的五个按钮

对应含义分别是：附加样式表、新建CSS规则、编辑样式、禁用/启用CSS属性、删除CSS属性。

3.3.1 新建CSS样式

新建的空白文档是不包含任何CSS样式的，“CSS 样式”面板的列表框中显示“未定义”。要想新建CSS样式，有以下三种方法：

● 单击属性面板中的

按钮。

● 单击“CSS 样式”面板的

按钮。

● 依次单击“格式” |“CSS 样式”|“新建”菜单命令。

CSS选择器分为3种类型: 类、ID、标签。

● 类选择器：通常说的class选择器，定义的时候要在名称前加“.”，如：.one{ color:red; font-size:25pt;}

● ID选择器：定义的时候要在前面加#，如：#box

{ color:red; font-size:25pt;}

● 标签选择器：是利用HTML的标记直接定义标记内容的样式，如：h1{ color:red; font-size:25pt;}

3.3.1 编辑CSS样式

在“CSS规则对话框”中，可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的配置，来美化页面。编辑的方法有三种：

1．通过“CSS 样式”面板

在面板上方窗格中选择要编辑的样式，在下方的属性窗格中，单击右边的属性值直接进行编辑。

2．通过“CSS 样式”面板的

按钮

在面板上方窗格中选择要编辑的样式，单击

按钮，打开“CSS规则定义”对话框进行修改，修改完毕，单击“确定”按钮退出编辑。

3．在代码视图直接编辑

切换到代码视图，直接修改CSS 样式，如果要增加样式，只需在代码行后回车即可开启代码提示窗口，如图所示。

3.3.1 设置CSS样式的类型

Font-family：字体。

Font-size：字的大小。

Font-weight：字的粗细，包括nomal（正常值）、bold（粗体）、lighter（比默认字还细）、100—900（100到900九个级别）。

Font-style：字的样式，包括normal（普通）、italic（斜体）、oblique（倾斜）。

Font-variant：英文大小写转换，包括normal（正常值）、small-caps(将小写英文字母转换成大写英文字母)。

Line-height：行高设置，选择“normal”，表示让电脑自动调整行高，也能够使用数值和单位结合的形式自行配置。需要注意的是，单位应该和文字的单位一致。例如，文字配置为12pt，假如要创建一倍行距，则行高应该为24pt。

Text-transform：控制英文文字大小写，包括capitalize（将每个英文单字的首字大写）、uppercase（全部转换成大写）、lowercase（全部转换成小写）、none（默认值）

Text-decoration：文本修饰，包括underline（加下划线）、overline（加上划线）、line-through（加删除线）、blink（闪烁文字，只有netscape浏览器支持）、none（默认值）

Color：定义文本颜色

3.3.1 设置CSS样式的背景

Background-color：背景颜色，包括background-color：color-value（颜色值）

Background-image：背景图像，直接填写背景图像的路径。

Background-repeat：背景图像平铺属性，包括repeat（背景图像平铺）、repeat-x（背景图像以x轴方向平铺）、repeat-y（背景图像以y轴方向平铺）、no-repeat（背景图像不平铺）。

Background-attachment：背景图像是否跟随网页一同滚动，包括fixed（固定）、scroll（滚动）。

Background-position（x）：背景图像水平方向的位置，包括left（水平居左）、right（水平居右）、center（水平居中）,以及数值形式表示的相对页面窗口的x轴位置。

Background-position（y）：背景图像垂直方向的位置，包括top（垂直居顶）、center（垂直居中）、bottom（垂直居底）,以及数值形式表示的相对页面窗口的y轴位置。

3.3.1 设置CSS样式的区块

Word-spacing：英文单词之间的间距，包括normal（正常值）、（标明具体长度，例如6px）。

Letter-spacing： 汉字字符之间的间距，包括normal（正常值）、（标明具体长度，例如3px）。

Vertical-align：元素相对于其父级元素在垂直方向的对齐方式，如表所示

表3-6 Vertical-align的属性值

值

baseline

sub

super

top

text-top

middle

bottom

含 义

默认。元素放置在父元素的基线上

垂直对齐文本的下标

垂直对齐文本的上标

把元素的顶端与行中最高元素的顶端对齐

把元素的顶端与父元素字体的顶端对齐

把此元素放置在父元素的中部

把元素的顶端与行中最低的元素的顶端对齐

text-bottom 把元素的底端与父元素字体的底端对齐

值

Text-align：文本对齐方式，包括left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）

Text-indent：首行缩进，可以用负值创建凸出，但显示效果取决于浏览器。

White-space：声明建立布局过程中如何处理元素中的空白符，包括normal（默认值，空白会被忽略）、pre（空白会被保留）、nowwrap（文本不换行，直到遇到
标签为止）

Display：定义建立布局时元素生成的显示框类型。

提示：对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

使用 "line-height" 属性的百分比值来排列此元素，允许使用负值

inherit 规定应该从父元素继承 vertical-align 属性的值。

3.3.1 设置CSS样式的方框

Width：设定元素的宽度

Height：设定元素的高度

Float：设置元素的浮动位置，包括left（左对齐）、right（右对齐）、none（无）

Clear：规定元素的一侧不许有层，包括left（左侧）、right（右侧）、both（两侧）、none（不限制）。

Padding：内容与边框的距离，简称补白或填充，包括top、bottom、left、right四个方向的距离。

Margin：与窗口边界或上一级元素的边界的距离，包括top、bottom、left、right四个方向的边界距离。

3.3.1 设置CSS样式的边框

Style：定义边框的样式，包括top、right、bottom、left四个方向的边框样式，如表所示。

表3-6 Style的属性值

值

none

含 义

定义无边框

dotted 定义点状边框。在大多数浏览器中呈现为实线

dashed 定义虚线。在大多数浏览器中呈现为实线

solid 定义实线

double 定义双线。双线的宽度等于 border-width 的值

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值

ridge

inset

定义 3D 垄状边框。其效果取决于 border-color 的值

定义 3D inset 边框。其效果取决于 border-color 的值

outset 定义 3D outset 边框。其效果取决于 border-color 的值

width：配置4个方向边框的宽度。包括thin（细）、medium（中）、thick（粗），也能够配置边框的宽度值和单位。

color：配置4个方向边框对应的颜色。

3.3.1 设置CSS样式的列表

List-style-type：引导列表项目的符号类型，包括9种选项，如表所示

表3-6 List-style-type的属性值

值

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

none

List-style-position：决定列表项目所缩进的程度，包括outside（列表贴近左侧边框）、inside（列表缩进）

含 义

实心圆

空心圆

实心方块

普通阿拉伯数字

小写罗马数字

大写罗马数字

小写英文字母

大写英文字母

不显示任何项目编号或符号

List-style-image：选择图像作为项目的引导符号，输入图像路径。

3.3.1 设置CSS样式的定位

position ：元素定位方式，包括static（静态的）、relative（相对的）、absolute（绝对的）、或fixed（固定的位置）。

表3-6 position的属性值

值

static

含 义

静态的（默认值）。元素始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）

相对的。可将元素移至相对于其正常位置的地方，元素仍保持其未定位前relative

的形状，它原本所占的空间仍保留。

绝对的。可将元素定位在相对于包含它的元素的指定坐标。此元素的位置absolute

可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

固定的。可将元素定位在相对于浏览器窗口的指定坐标。此元素的位置可fixed

通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）

Visibility：用来确定元素是显示还是隐藏，包括inherit（继承）、visible（显示），hidden（隐藏）。

提示：当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

Width：设定元素的宽度，与方框设置相同。

Height：设定元素的高度，与方框设置相同。

z-index 设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

Overflow：设置当元素的内容溢出其区域时发生的事情。包括visible （默认值，内容不会被修剪，将呈现在元素之外）、hidden （内容会被修剪，并且其余内容是不可见的）、scroll （内容会被修剪，显示滚动条）、auto（如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容）

Placement：定义元素的外边距边界与其包含块边界之间的偏移，包括top、

right、bottom、left四个方向。

clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来，包括top、 right、bottom、left四个方向。

3.3.1 设置CSS样式的扩展

Page-break-before：打印时在样式所控制的对象之前强行分页。包括auto

（假如需要，则插入页分割符）、always （始终插入页分割符）、left （插入页分割符，直到它到达一个空白的左页边）、right （插入页分割符，直到它到达一个空白的右页边）。

Page-break-after：打印时在样式所控制的对象之后强行分页，选项设置同Page-break-before。

Cursor：定义了鼠标指针放在一个元素边界范围内时所用的光标形状,如表所示。

表3-6 Cursor的属性值

值

URL

含 义

需自行输入自定义光标的 URL

crosshair 光标呈现为十字线

text

wait

default

help

e-resize

此光标指示文本

此光标指示程序正忙（通常是一只表或沙漏）

默认光标（通常是一个箭头）

此光标指示可用的帮助（通常是一个问号或一个气球）

此光标指示矩形框的边缘可被向右（东）移动

ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）

n-resize 此光标指示矩形框的边缘可被向上（北）移动

nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）

w-resize 此光标指示矩形框的边缘可被向左移动（西）

sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）

s-resize 此光标指示矩形框的边缘可被向下移动（北/西）

se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）

auto

默认值，浏览器设置的光标

Filter：又称 CSS滤镜，对样式所控制的元素应用特殊效果。书写语法如下：

filter:filtername(fparameter1, )

说明：Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数。

表3-6 Filter的属性值

值

Alpha

blur

Chroma

DropShadow

FlipH

FlipV

glow

gray

invert

light

mask

shadow

wave

Xray

含 义

设置透明层次

创建高速度移动效果，即模糊效果

制作专用颜色透明

创建对象的固定影子

创建水平镜像图片

创建垂直镜像图片

加光辉在附近对象的边外

把图片灰度化

反色

创建光源在对象上

创建透明掩膜在对象上

创建偏移固定影子

波纹效果

使对象变得像被x光照射一样

【操作实例16】使用CSS创建个性化鼠标

目标：利用Cursor样式创建多种鼠标效果，使之移动到指定位置显示出不同的鼠标形态。

操作过程：

（1）在Dreamweaver中新建空白文档，输入如下代码。

（2）保存网页后，在浏览器中观看鼠标效果。

3.2 CSS+div布局技术

CSS布局的基本构造块是