《网页设计》课程教学资源（PPT课件讲稿）第十一讲 CSS样式

士一讲 我们上网的人都有这样的经验,将浏览器 的显示字体变大或变小网页中的文本也 会随着发生改变。实际上好的网页却不 会发生这种现象,无论我们怎样改变浏 览器的显示字体大小,网页中的文本保 持着原有外观,这就是cSS样式的作用 有了css样式,我们可以快速准确保页 面的布局与外观在各种浏览器中保持 致

我们上网的人都有这样的经验,将浏览器 的显示字体变大或变小,网页中的文本也 会随着发生改变。实际上好的网页却不 会发生这种现象，无论我们怎样改变浏 览器的显示字体大小，网页中的文本保 持着原有外观，这就是CSS样式的作用。 有了CSS样式，我们可以快速准确保页 面的布局与外观在各种浏览器中保持一 致

主要内容: 什么是CSS样式? CsS的语法 放置CSS代码 四、CSS样式面板 五、CSS的属性 使用 Dreamweaver创建CSS实例 七、本节小结

主要内容： 一、什么是CSS样式？ 二、CSS的语法 三、放置CSS代码 四、 CSS样式面板 五、 CSS的属性 六、使用Dreamweaver 创建CSS实例 七、本节小结

什么是CS样式? CSS是“ Cascading Style Sheet的缩写 有些书上把它翻译成“层叠样式表” 或“级联样式表”(简称为样式表 它实质上是对HTML标记制定的 统一的标准、控制文本或文本区外观 的一组属性。换句话说,CSS样式表 是一个格式设置的集合,用来控制网 页中各种元素的显示效果。使用CSS 样式表,用户可以有更大的灵活性来 控制精确的页面显示效果

什么是CSS样式？ CSS是“Cascading Style Sheet”的缩写， 有些书上把它翻译成“层叠样式表” 或“级联样式表”（简称为样式表）， 它实质上是对HTML标记制定的一个 统一的标准、控制文本或文本区外观 的一组属性。换句话说，CSS样式表 是一个格式设置的集合，用来控制网 页中各种元素的显示效果。使用CSS 样式表，用户可以有更大的灵活性来 控制精确的页面显示效果

GSS的语法 样式表有自己独特的书写方法,它们一般被定义成以 下形式的语法: HTML标记{标记属性属性值标记属性:属性值 标记属性:属性值标记属性:属性值 ·· HTML标记(或标签),如P、Body、Di、 Table等。 (特别提示:在这里使用HTML标记时,是不带尖括 号的,所以不能写成:、、等。) 标记属性、属性值 这两个参数是一一对应的,每个属性与属性值之间用 分号“;”分开

样式表有自己独特的书写方法，它们一般被定义成以 下形式的语法： ◼ HTML标记（或标签），如 P、 Body、 Div、 Table等。 （特别提示：在这里使用HTML标记时，是不带尖括 号的，所以不能写成：、、、 等。） ◼ 标记属性、属性值 这两个参数是一一对应的，每个属性与属性值之间用 分号“ ； ”分开。 HTML标记{标记属性:属性值;标记属性:属性值; 标记属性:属性值;标记属性:属性值; ....}。 CSS的语法

注意在CSS中属性名称的写法: 凡属性名由两个或两个以上的单词构成 时,单词之间用“”号隔开,例如,背景 颜色属性应书写为: background color, 字体大小: font size,文字下划线:text decoration,等。(而在脚本语言中的书 写规定是第二个或第二个以上的单词用 连写且第一个字母大写来表示:例如 background Color, font size, text Decoration等。 N□

注意在CSS中属性名称的写法： 凡属性名由两个或两个以上的单词构成 时，单词之间用“-”号隔开，例如，背景 颜色属性应书写为：background-color ， 字体大小：font-size ，文字下划线：text￾decoration ，等。（而在脚本语言中的书 写规定是第二个或第二个以上的单词用 连写且第一个字母大写来表示：例如 backgroundColor，fontSize， textDecoration等。）请注意区别！

下面是一段比较典型的CSS代码 p{ font-family“宋体”; font-size9pt;line height: 12pt; color: #000000 td{ font-family“楷体GB2312”, font-size:20pt font-style: italic, font-weight: 800, text- decoration: blink color: #000000 a: hover(background-color: #ffccff; color: #ff6666 text-decoration: underline, float: left, a: link(color: #ff33ff, text-decoration: none) a: viSited color: #6600ff, text-decoration: none) a: active color green; text-decoration: none background-color: #ffccff, float: right

下面是一段比较典型的CSS代码： p{font-family:“宋体”; font-size:9pt; line￾height:12pt; color:#000000} td{font-family:“楷体＿GB2312”; font-size:20pt; font-style:italic;font-weight:800; text￾decoration:blink;color:#000000} a:hover{background-color:#ffccff;color:#ff6666; text-decoration:underline; float:left} a:link{color:#ff33ff; text-decoration:none} a:visited{color:#6600ff; text-decoration:none} a:active{color:green; text-decoration:none; background-color:#ffccff; float:right}

这段代码共有6段,分别实现两种功能 前两行的格式分别为p{…}和td(……},作 用是对网页中文字的字体、大小、颜色等进行 置 后4行均是a命令词{…}的格式,是对超级 链接文本的控制。 下面分别解释这6段CSS代码: 1)、第一段p(……}中的【 font-family宋 体”】:指定网页文字的字体。【font size:9pt】:指定网页文字的字号的大小,pt是 表示文字大小的单位

这段代码共有6段，分别实现两种功能： ◼ 前两行的格式分别为p{……}和td{……}，作 用是对网页中文字的字体、大小、颜色等进行 设置。 ◼ 后4行均是a:命令词{……}的格式，是对超级 链接文本的控制。 下面分别解释这6段CSS代码： 1）、第一段p{……}中的【font-family:“宋 体” 】:指定网页文字的字体。【font￾size:9pt 】:指定网页文字的字号的大小，pt是 表示文字大小的单位

line-height:12pt】:指定行与行的垂直距离, color:#00000:指定网页的彦 0000表黑色,为十六进制数 第二段td{…}中的设置是对网页表格里的文 字进行控制 2)、链接文本的变化控制(例中的后4行) 第三段: a: hover{ background-color:#cf color: #ff6666: text-decoration: underline float!left}( hover表示鼠标指针指向链接文 字时,链接文字的背景颜色为#c,前景 颜色为#666,链接显示下划线,文字向 左浮动)

【line-height:12pt 】:指定行与行的垂直距离， 即行高。 【color:#000000 】:指定网页的颜 色，#000000代表黑色，为十六进制数。 第二段td{……}中的设置是对网页表格里的文 字进行控制。 2）、链接文本的变化控制（例中的后4行） 第三段：a:hover{background-color: #ffccff; color:#ff6666; text-decoration:underline; float:left}（hover表示鼠标指针指向链接文 字时，链接文字的背景颜色为#ffccff，前景 颜色为#ff6666，链接显示下划线，文字向 左浮动）

第四段:aink{colo:#3 ff text-decoration: none}(link表示链接未被访间时,链接颜色 为#33f,链接无下划线)。 第五段: a: visited{colo:#6600text decoration. none}( visited表示链接被访间后 链接的颜色为#6600,链接无下划线)。 第六段:a: active{ color green;text decoration: none; background-color: #ffccff float: right}( active表示鼠标点击链接时,链 接前景颜色为绿色,背景色为#c99,链接 无下划线,文字向右浮动)

第四段：a:link{color:#ff33ff; text-decoration: none }（link表示链接未被访问时，链接颜色 为#ff33ff，链接无下划线）。 第五段：a:visited{color:#6600ff; text￾decoration:none}（visited表示链接被访问后， 链接的颜色为#6600ff，链接无下划线）。 第六段：a:active{color:green; text￾decoration:none; background-color:#ffccff; float:right}（active表示鼠标点击链接时，链 接前景颜色为绿色，背景色为#ffcc99，链接 无下划线，文字向右浮动）

放置CSS代码 CSS样式代码写好后,它在ML中以stve 标记出现,它将如何放到HTML中呢 将CSS样式放入HTML中有2种方法: 1)、外部文件方式-将CSS代码写成一个 扩展名为“cs”的文件(可以用任何一个 文本编辑器中写,也可以用软件创建) 在HTML文档中加以引用,进行网页整 体风格的控制。 示入使用CSS外部文件的优点,可以在 每个HML文件中引用它,从而使整个 网页的风格能够保持一致

放置CSS代码 CSS样式代码写好后，它在HTML中以style 标记出现，它将如何放到HTML中呢？ 将CSS样式放入HTML中有2种方法： 1）、外部文件方式----将CSS代码写成一个 扩展名为“ .css ”的文件（可以用任何一个 文本编辑器中写，也可以用软件创建）， 在HTML文档中加以引用，进行网页整 体风格的控制。 提示：使用CSS外部文件的优点，可以在 每个HTML文件中引用它，从而使整个 网页的风格能够保持一致