第一讲CSS层叠样式表.pptVIP

第一讲 CSS层叠样式表 1.1 CSS概述 1.2 定义CSS样式表 1.3 CSS常用属性 1.4 CSS关联HTML文档的方式 1.5 在HTML文档中应用CSS 1.6 CSS的冲突 学习目标 熟练掌握CSS样式表的定义 掌握样式表嵌入HTML文档的方式 掌握在HTML文档中应用CSS样式的方式 1.1 CSS概述 特 点 将格式和结构分离 以前所末有的能力控制页面布局 制作体积更小、下载更快的网页 可以实现许多网页同时更新 应用CSS的步骤 定义样式表 把样式表关联到HTML文档 在HTML文档中应用样式表 1.2 定义CSS样式 基本语法: 选择符 {属性名1:属性值1; 属性名2:属性值2; ……} 1. HTML标记符 HTML标记符重新定义了HTML标记符的显示效果，定义示例代码如下： h1{text-align:center;font-size:30pt;color:blue} HTML选择符示例 2.自定义的类与ID 使用自定义类或ID，可以定义一个通用的样式，以便应用到任何需要的地方。它们的应用需要分别使用到class和id属性，定义示例代码如下： .classname{property:value…} #idname{property:value…} 用户定义的类与ID示例 3.伪类选择符 伪类是一种特殊的类选择符，它最大的用处是可以对链接在不同状态下定义不同的样式效果，写书形式如下： a:link 设置未访问过的超链接格式 a:visited 设置已访问过的超链接格式 a:active 设置活动超链接格式 a:hover 设置悬停状态的超链接格式 伪类选择符示例代码如下： a:link{color:green;text- decoration:none} a:active{color:blue;text- decoration:none} a:visited{color:red;text- decoration:underline} a:hover{color:pink; font-style:italic} 伪类选择符示例 1.3 CSS常用属性 1.字体属性及其属性值 字体属性示例 2.文本属性及其属性值 文本属性示例 3.列表属性及其属性值 列表属性示例 4.颜色和背景属性及其属性值 颜色和背景属性示例 5.CSS区块属性 区块边框 区块边距 区块定位 1)区块边框属性及其属性值 边框属性示例 2) 区块边距属性及其属性值 边距属性示例 3-1)区块定位之位置与大小属性 区块定位之位置与大小属性示例 style p{ position:absolute; top:30px; left:50px; width:500px; height:100px; } /style 3-2)区块定位之浮动与清除属性 区块定位之浮动与清除属性示例 6. CSS层 层属性及其属性值 层属性示例 7.鼠标属性及其属性值 鼠标属性示例 8.滤镜属性 使用滤镜属性可以把可视化的滤镜和转换效果添加到一个标准的HTML元素中，如图片、文本等对象中。对于滤镜和渐变效果，前者是基础，后者是滤镜效果的不断变化和演示更替。 常用滤镜 alpha滤镜：设置透明层次 blur滤镜：设置模糊效果 flipH、flipV滤镜：设置水平垂直翻转 gray滤镜：设置灰度 invert滤镜：将颜色的饱和度及亮度完全反转 xray滤镜：设置X射线效果 wave滤镜：设置变形效果 chroma滤镜：设置特定颜色的透明效果 glow滤镜：设置边缘光晕效果 dropshadow滤镜：设置阴影效果 shadow滤镜：设置渐变阴影效果 mask滤镜：设置遮罩效果 Alpha滤镜 基本语法： {filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy）} 语法解释： alpha：用于把一个目标元素与背景混合，即设置元素的透明度。它是通过以下参数来实现透明度的设置： 1）opacity：设置透明度的程度。取值范围为 0~100，0代表完全透明，100代表完全不透明 2）finishopacity：用于设置渐变结束时的透明度 3）style：用于指定透明区域的形状特征，取值为0（表统一形状）、1（表线形）、2（表放射状）