CSS样式表专题.ppt

1、CSS样式专题,主讲教师：肖建芳,回想,每次有大的灾难或悲哀日子的时候，国家都出文指定某个日子作为“哀吊日”，在那一天，所有的媒体，包括网站，瞬间变成灰蒙蒙的一片，彩色消失了 比如：5.12汶川地震,这种瞬间改变是怎样实现的呢？ ,使用样式！,为什么要使用样式表？,再回忆word软件里面的样式 最重要的：CSS样式真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格。,目录,基本特点和在DW中的使用 补充一些高级操作 CSS样式的HTML专题 CSS鼠标光标专题 CSS滤镜专题 实例,样式的特点,CSS（Cascading Style Sheet，层叠样式表

2、） CSS样式是一种比较先进的网页控制技术，可以对网页的布局、字体、颜色、背景以及其他一些图文元素的效果实现更加精确的控制。 实现了内容和格式的真正分离。 当CSS样式发生变化或更新时，所有使用该样式的文档都将随之自动更新。 可以制作体积更小、下载更快的网页。 浏览器将成为更友好的界面。,样式表分类,按运用范围分类： 内部样式表： 范围局限当前网页内部，只对当前文档起作用。 2.外部样式表： 范围可到其他网页中。保存为一个单独的.CSS为扩展名的文件，可以链接或导入到需要使用的网页文档中。 提问：样式表可以相互转换吗？,样式表分类,根据运用样式表的对象分类： 自定义样式表类（可应用于任何标签）

3、 定义HTML标记样式表标签（重新定 义特定标签的外观） 有关链接的样式表高级（ID、上下文选择器等）,使用内部样式表的步骤：,新建样式 使用样式（标签和高级除外）。,思考： 为什么选择器类型中“标签”和“高级”选项制作出来的不需要第二步骤？,定义内部样式,使用样式,在【属性】面板选择样式 利用【标签选择器】选择样式 使用右键快捷菜单,清除样式,右键菜单，【CSS样式】【无】 删除样式后，所有使用了该样式的对象将自动清除该样式。,外部样式表的使用,新建和保存样式表文件 定义样式（与内部样式同） （导入或链接外部样式表文件） 使用样式（与内部样式同）,内部样式表和外部样式表文件的相互转换,外部样

4、式表：导入和链接 内部样式导出为外部样式表文件,返回目录,【高级（ID伪类选择器）】的一些其他操作,一、定义指定范围内的标签规则 如要达到这个效果：单元格内的水平线颜色为红色，其他地方的水平线颜色不变。,【高级（ID伪类选择器）】的一些其他操作,一、同时定义多个标签 如要达到这个效果：希望正文的文字、单元格里的文字、表单文本区域里的文字都为隶书、14像素颜色为蓝色，其他地方文字不变？,制作图像边框效果,返回目录,CSS样式HTML代码专题,CSS功能强大，在网页中，定义CSS样式表的标签为和。为了避免浏览器不兼容等问题出现，通常将CSS样式表放在HTML的注释里，通过“”进行引用。,内部CSS

5、样式表,分为两种 行内样式表 内嵌式样式表,内部CSS样式表,行内样式表 严格来说，这种样式表称不上“表”，仅仅是一种HTML标记。它直接插入所应用的HTML标记中，作为标记的属性参数，因此，其作用仅限于所应用的HTML元素。语法如下： ,内部CSS样式表,内嵌式样式表 此种样式表的申明一般位于HTML文件的头部，即在与标签内，并且是置于标签和之中，如： ,直接修改标签样式,自定义样式,内部CSS样式表,内嵌式样式表 此种样式表的引用 标签样式:凡是网页中标签会自动使用该样式； 自定义样式：通过class属性引用 这是正文部分，使用了样式zdycss ,外部样式表,必须保存为.css的单独文件

6、，如本例保存为waibucss.css。一个样式表文件中可以申明多种样式 申明 跟内部样式表中内嵌式样式表差不多，只要其主体部分就可以了。如： .waibucss font-family: 华文行楷; color: #00FF00;,外部样式表,链接样式 Href：提供css地址 Rel：定义了当前页面和href属性所链接的文件之间的关系（取值为stylesheet指引用的文件为样式表文件） Type：指定了样式表的类型。（text/css表示层叠样式表,text/jss表示Javascript样式表）,外部样式表,导入样式表 就是浏览器在读取HTML时，将外部的样式表文件以导入的方式添加到页

7、面中，相当于复制一份样式表。加入到标记中。 ,此语句导入外部样式表,设置文本的样式,字体：font-family 字号：font-size 文字颜色：color 字体加粗：font-weight(常用值normal,bold) 文本对齐方式:text-align(center,left,right) 文字首行缩进：text-indent 行高：line-height 字体风格：font-style（normal，italic，oblique（倾斜的文字，在中文文字的使用上与Italic并无明显区别）,设置文本的样式,文字修饰：text-decoration 取值： underline over

8、line line-through none,设置文本的样式,Letter-spacing:字母间距 Word-spacing:单词间距 Text-transform:capitalize|uppercase|lowercase|none 自动转换大小写字母,设置边距样式：文本，图像等,CSS区块边距：指定元素周围要保留多少空白，单位可以是像素 外边距：margin 例如：imgmargin:24px;表示设定图像边距为20像素。 左外边距： margin-left 右外边距：margin-right 顶外边距：margin-top 底外边距：margin-bottom,CSS区块边框,边框宽

9、度：值为一个整数值，单位一般像素 边框宽度：border-width 上边框宽度:border-top-width 下边框宽度:border-bottom-width 左边框宽度:border-left-width 右边框宽度:border-right-width,CSS区块边框,边框样式：为边框提供很多修饰效果 边框样式：border-style 上边框样式:border-top-style 下边框样式:border-bottom-style 左边框样式:border-left-style 右边框样式:border-right-style,CSS区块边框,边框样式属性值 无边框：none 点

10、组成边框:dotted 短线组成边框:dash 实线边框:solid 双实线边框:double 立体感的沟槽：groove 脊状边框：ridge 内嵌一个立体边框：inset 外嵌一个立体边框：outset,CSS区块边框,边框颜色 边框颜色：border-color 上边框颜色:border-top-color 下边框颜色:border-bottom-color 左边框颜色:border-left-color 右边框颜色:border-right-color,设置列表样式,列表项目符号的类型： List-style-type 取值：,设置列表样式,图像做列表项目符号： List-style-

11、image 用法： List-style-image:url(dot.jpg) 决定列表项目缩进的位置： List-style-position 取值：outside | inside,背景样式,背景颜色 Background-color 如： Background-color:blue 背景图片 Background-image 如： Background-image:url(“bg.jpg”) 背景图像重复 Background-repeat:repeat|repeat-x（横向重复）|repeat-y|no-repeat,CSS区块定位,CSS区块定位直接决定了网页中各个元素的位置、大小

12、与是否浮动等可视属性 Position: relative(绝对定位) | absolute（相对定位） Top:层距离顶点纵坐标的距离 Left:层距离顶点横坐标的距离 Width:层的宽度 Height:层的高度,CSS区块定位-浮动与清除,Float属性将标签的显示空间指定为一个浮动元素，并使文本按一定方式环绕它排列。它与图像和表格的align属性类似，但可以用到任何元素。 Float: left(居左对齐)|right(居右对齐)|none（禁用float属性） 用clear属性可以让元素边上不出现其它浮动元素。 Clear：left(不允许左边右浮动元素)|right(居右清除)|b

13、oth(两端清除)|none(禁用clear属性),返回目录,CSS鼠标光标,CSS鼠标光标,返回目录,CSS滤镜,CSS滤镜,Alpha滤镜-产生颜色透明及渐变效果,Blur模糊效果,Wave产生垂直波浪效果,Dropshadow-设置对象阴影效果,Glow-产生边缘光晕的模糊效果,Shadow-渐变阴影效果,返回目录,实例,.biaoti font-family: 黑体; font-size: 36px; font-weight: bold; color: #996600; text-align: center; background-position: center; word-spacing: normal; text-dec