CSS样式表专题.pptVIP

CSS样式专题 主讲教师：肖建芳 回想…… 每次有大的灾难或悲哀日子的时候，国家都出文指定某个日子作为“哀吊日”，在那一天，所有的媒体，包括网站，瞬间变成灰蒙蒙的一片，彩色消失了…… 比如：5.12汶川地震…… 这种瞬间改变是怎样实现的呢？ ……………………………………………… 为什么要使用样式表？？ 再回忆word软件里面的样式…… 最重要的：CSS样式真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格。 目录 基本特点和在DW中的使用 补充一些高级操作 CSS样式的HTML专题 CSS鼠标光标专题 CSS滤镜专题 实例 样式的特点 CSS（Cascading Style Sheet，层叠样式表） CSS样式是一种比较先进的网页控制技术，可以对网页的布局、字体、颜色、背景以及其他一些图文元素的效果实现更加精确的控制。 实现了内容和格式的真正分离。 当CSS样式发生变化或更新时，所有使用该样式的文档都将随之自动更新。 可以制作体积更小、下载更快的网页。 浏览器将成为更友好的界面。 样式表分类 按运用范围分类： 内部样式表： 范围局限当前网页内部，只对当前文档起作用。 2.外部样式表： 范围可到其他网页中。保存为一个单独的.CSS为扩展名的文件，可以链接或导入到需要使用的网页文档中。 提问：样式表可以相互转换吗？ 样式表分类 根据运用样式表的对象分类： 自定义样式表——类（可应用于任何标签） 定义HTML标记样式表——标签（重新定 义特定标签的外观） 有关链接的样式表——高级（ID、上下文选择器等） 使用内部样式表的步骤： 新建样式 使用样式（标签和高级除外）。 定义内部样式 使用样式 在【属性】面板选择样式 利用【标签选择器】选择样式 使用右键快捷菜单 清除样式 右键菜单，【CSS样式】?【无】 删除样式后，所有使用了该样式的对象将自动清除该样式。 外部样式表的使用 新建和保存样式表文件 定义样式（与内部样式同） （导入或链接外部样式表文件） 使用样式（与内部样式同） 内部样式表和外部样式表文件的相互转换 外部样式表：导入和链接 内部样式导出为外部样式表文件 【高级（ID伪类选择器）】的一些其他操作 一、定义指定范围内的标签规则 如要达到这个效果：单元格内的水平线颜色为红色，其他地方的水平线颜色不变。 【高级（ID伪类选择器）】的一些其他操作 一、同时定义多个标签 如要达到这个效果：希望正文的文字、单元格里的文字、表单文本区域里的文字都为隶书、14像素颜色为蓝色，其他地方文字不变？？ 制作图像边框效果 CSS样式HTML代码专题 CSS功能强大，在网页中，定义CSS样式表的标签为style和/style。为了避免浏览器不兼容等问题出现，通常将CSS样式表放在HTML的注释里，通过“!--” 和“--”进行引用。 内部CSS样式表 分为两种 行内样式表 内嵌式样式表 内部CSS样式表 行内样式表 严格来说，这种样式表称不上“表”，仅仅是一种HTML标记。它直接插入所应用的HTML标记中，作为标记的属性参数，因此，其作用仅限于所应用的HTML元素。语法如下： 标记名称 style=“样式属性：属性值;样式属性：属性值；” h1 style=“color:blue;font-family:”隶书”；” 内部CSS样式表 内嵌式样式表 此种样式表的申明一般位于HTML文件的头部，即在head与/head标签内，并且是置于标签style和/style之中，如： style type=“text/css” !-- h1{font-size:large;color:red} .zdycss{ font-family: 宋体; color: #FF0000;} -- /style 内部CSS样式表 内嵌式样式表 此种样式表的引用 标签样式:凡是网页中标签会自动使用该样式； 自定义样式：通过class属性引用 body class=“zdycss“ bgcolor=#FFCCFF 这是正文部分，使用了样式zdycss /body 外部样式表 必须保存为.css的单独文件，如本例保存为waibucss.css。一个样式表文件中可以申明多种样式 申明 跟内部样式表中内嵌式样式表差不多，只要其主体部分就可以了。如： .waibucss { font-family: 华文行楷; color: #00FF00;} 外部样式表 链接样式 link href=css2.css rel=stylesheet type=text