CSS样式表格.docVIP

上次课程复习： 1．CSS样式定义：selector{property1 : value1；property2 : value2；…} （1）样式符为HTML标记 （2）样式符为用户自定义类CLASS （3）样式符为用户自定义ID （4）虚类 2． CSS样式应用 （1）在HTML标记中直接插入CSS 标记符 style = “属性1:值1;属性2:值2;……” （2）在HTML文档的头部插入CSS （3）链接外部CSS样式文件 LINK rel=stylesheet type=text/css href= *.CSS 3．CSS的常用属性 （1）CSS单位属性 （2）字体属性 （3）文本属性 （4）颜色和背景属性 （5）边框属性 边界属性 填充属性 本次课程主要内容： 1. 进一步掌握CSS常用属性的用法 2. 使用CSS样式化页面 第3章CSS技术 3.4 CSS的常用属性 1．CSS的单位属性 2. 字体属性 3. 文本属性 4. 颜色和背景属性 5.边框属性 (1)边界属性 例3-14CSS边界属性应用。 margin-left 分别定义页面元素左、右、上、下边界的宽度. margin-left:20px margin-right:20% margin-top:atuo 取值是长度、百分比、 auto（相对于父元素的百分比） margin-right margin-top margin-bottom margin 按上－右－下－左的顺序argin:10px margin:10px 20px margin:10px 20px 30px margin:10px 20px 30px 40px 4个边界相同宽度 第一个用于上－下，第二个用于左－右第一个用于上，第二个用于左－右，第三个用于下 -left 分别定义页面元素左、右、上、下填充区的宽度 padding -left:20px padding -right:20% padding -top:atuo 取值是长度、百分比、 auto（相对于父元素的百分比） padding -right padding -top padding -bottom padding 按上－右－下－左的顺序第一个用于上－下，第二个用于左－右第一个用于上，第二个用于左－右，第三个用于下style span{font-family:楷体_gb2312;font-size:20pt } .ss{clear:left} /style 思考练习2：将ss样式修改为：.ss{clear:none}，页面显示效果如何？ 7.定位属性 例3-18定位属性应用 属性 功能 取值 position 规定元素在Web页上的定位方式 static/relative/absolute top和left 规定元素在页面上的位置，或某个元素与其他元素之间的距离 像素 width和height 规定元素的宽度和高度 像素 z-index 确定元素位于层数 1、2…… 思考练习2：将s1和s2样式的层数调整后的效果？ 8.列表属性(P81属性表) 例3-20 使用html标记符合列表属性分别设计页面，效果如下图所示。 类型 属性 功能 取值 列表类型属性 list-style-type 设置项目符号和编号的样式 P81 表3-3 项目符号图片属性 list-style-image 设置图片为列表项目的符号 none或要指定图片的URL 项目符号位置属性 list-style-position 设置列表元素标记相对于列表中其他文本的位置 Inside：标记出现在所列表元素的内部；outside（默认）：标记出现在所有列表元素的外部。 列表属性 list-style 用于不限顺序的一次性设置list-style-type、list-style-image、list-style-position。 9.鼠标属性(P82属性表) 例3-19 鼠标属性应用 属性 功能 取值 cursor 鼠标属性 P82 表3-4 3.5 CSS滤镜技术 过滤器是CSS的扩充，它能将特定效果应用于文本容器、图片或其他对象。 只作用于HTML控件元素：body,button,div,img,input,marquee,span,table,td,textarea,th 1. 滤镜的定义 格式：filter:过滤器名称(参数) 说明：filter属性用于定义过滤器效果， 例如，要为img标记符定义透明度，应使用img{filter:alpha(Opacity=80)} 2. 滤镜的属性 (1) alpha (2) b