【教学课件】第8章使用样式表制作高级页面.ppt

第第8章章 使用样式表制作高级页面使用样式表制作高级页面n本章内容本章内容n练习思考练习思考n实验操作实验操作本章内容本章内容n样式表的概念样式表的概念n样式表的分类样式表的分类n各种样式的使用各种样式的使用n为网页设置整体和局部链接效果为网页设置整体和局部链接效果n将样式表应用在整个网站将样式表应用在整个网站 样式表的概念样式表的概念 样式表（样式表（Cascading Style Sheets）是）是一系列格式规则，简称一系列格式规则，简称CSS，它们控制，它们控制网页内容的外观。网页内容的外观。样式表的概念样式表的概念 层叠样式表层叠样式表CSS可以使用可以使用Html标签或命标签或命名的方式定义，可控制名的方式定义，可控制n传统的文本属性，例如字体、字号、颜传统的文本属性，例如字体、字号、颜色等，色等，n可以控制一些比较特别的可以控制一些比较特别的Html属性，如属性，如对象位置、图片效果、鼠标指针等。对象位置、图片效果、鼠标指针等。样式表的特点样式表的特点 层叠样式表层叠样式表CSS的特点的特点n将格式和结构分离将格式和结构分离n控制页面布局控制页面布局n制作体积更小下载更快的网页制作体积更小下载更快的网页n将许多网页同时更新将许多网页同时更新n浏览器成为更友好的界面浏览器成为更友好的界面 样式表的类型样式表的类型样式表样式表CSS包含以下三种类型：包含以下三种类型：n类样式类样式n标签样式标签样式n高级样式高级样式 样式表的类型样式表的类型高级样式包含四种类型：高级样式包含四种类型：na:link：设定正常状态下链接文字的：设定正常状态下链接文字的样式。样式。na:active：设定鼠标单击时链接的外：设定鼠标单击时链接的外观。观。na:visited：设定访问过的链接外观。：设定访问过的链接外观。na:hover：设定鼠标放置在链接文字：设定鼠标放置在链接文字之上时，文字的外观。之上时，文字的外观。在页面中使用样式表在页面中使用样式表n设置文本样式设置文本样式n设置背景样式设置背景样式n设置区块样式设置区块样式n设置边框样式设置边框样式n设置鼠标光标样式设置鼠标光标样式下图是应用样式表的实例下图是应用样式表的实例在页面中使用样式表在页面中使用样式表设置链接样式设置链接样式n分别设置高级样式中的分别设置高级样式中的a:active;a:hover;a:link;a:visitedn可做页面的局部链接效果可做页面的局部链接效果将样式表应用于整个网站将样式表应用于整个网站n导出样式导出样式n导入样式导入样式练习思考练习思考 层叠样式表将定义（结构）的部分层叠样式表将定义（结构）的部分与定义（格式）的部分分离。与定义（格式）的部分分离。练习思考练习思考 关于样式表的描述正确的是关于样式表的描述正确的是（ABC）。）。A 不需要图像不需要图像B 不需要插件不需要插件C 不需要执行程序不需要执行程序D 不需要代码不需要代码练习思考练习思考 如果将类样式应用于一段文字，会如果将类样式应用于一段文字，会出现（出现（B）标签。）标签。A FontB ClassC tableD tr练习思考练习思考 自定义类样式时，样式命名应以自定义类样式时，样式命名应以 （.）开始。）开始。练习思考练习思考 使用样式表，可以设置页面中的使用样式表，可以设置页面中的（ABD）。）。A 文本样式文本样式B 背景样式背景样式C 鼠标样式鼠标样式D 区块样式区块样式实训操作一实训操作一 按照教材中的操作，给某个页面按照教材中的操作，给某个页面设置如下样式：设置如下样式：n文本样式文本样式n背景样式背景样式n鼠标光标样式鼠标光标样式n链接样式链接样式实训操作二实训操作二 将设置了样式的页面中的样式以将设置了样式的页面中的样式以某个文件的形式导出，再将其导某个文件的形式导出，再将其导入某个未设置样式的页面。入某个未设置样式的页面。