第一讲CSS层叠样式表

第一讲CSS层叠样式表1.1CSS概述1.2定义CSS样式表1.3CSS常用属性1.4CSS关联HTML文档的方式1.5在HTML文档中应用CSS1.6CSS的冲突学习目标熟练掌握CSS样式表的定义掌握样式表嵌入HTML文档的方式掌握在HTML文档中应用CSS样式的方式1.1CSS概述CSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。

特点将格式和结构分离以前所末有的能力控制页面布局

制作体积更小、下载更快的网页可以实现许多网页同时更新应用CSS的步骤定义样式表把样式表关联到HTML文档在HTML文档中应用样式表1.2定义CSS样式基本语法:

选择符{属性名1:属性值1;属性名2:属性值2;……}常用选择符类型:HTML标记符自定义的类自定义的ID伪类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.3CSS常用属性1.字体属性及其属性值字体属性示例

<style>.text{font-family:"宋体";font-variant:small-capsfont-size:16pt;font-style:italic;font-weight:bolder;}</style>2.文本属性及其属性值文本属性示例<style>.text{letter-spacing:6px; line-height:28pt; text-decoration:underline; text-align:left; text-indent:44pt;}</style>3.列表属性及其属性值列表属性示例4.颜色和背景属性及其属性值颜色和背景属性示例5.CSS区块属性区块边框区块边距区块定位1)区块边框属性及其属性值属性属性值描述borderColor_value、width_value、style设置边框的颜色、宽度和样式Border-topColor_value、width_value、style设置边框的颜色、宽度和样式Border-leftColor_value、width_value、style设置边框的颜色、宽度和样式Border-rightColor_value、width_value、style设置边框的颜色、宽度和样式Border-bottomColor_value、width_value、style设置边框的颜色、宽度和样式属性值描述none设置无边框Dotted设置边框由点组成Dash设置边框由短线组成Solid设置边框为实线Double设置边框是双实线Groove设置边框带有立体感的沟槽Ridge设置边框成脊形Inset设置边框内嵌一个立体边框outset设置边框外嵌一个立体边框边框style属性值边框属性示例一个属性可以设置多个属性值，不同的属性值之间使用空格间隔2)区块边距属性及其属性值边距属性示例3-1)区块定位之位置与大小属性

CSS区块定位直接决定了网页中各个元素的位置、大小与是否浮动等可视属性。CSS区块定位有两种方法：相对定位和绝对定位区块定位之位置与大小属性示例<style>p{position:absolute;top:30px;left:50px;width:500px;height:100px;}</style>3-2)区块定位之浮动与清除属性

float属性将所属标记的显示空间指定为一个浮动元素，并使其周围对象按一定的方式环绕它排列。

float属性的作用就象图像和表格的align属性一样，但可以用到任何元素上。

clear属性的作用是禁止浮动元素出现在所属对象旁边，如果它被放置为与浮动元素相邻，则它将下沉至浮动元素为止。浮动与清除属性区块定位之浮动与清除属性示例6.CSS层

在使用元素定位时，从可视角度讲，不可避免地会发生两个元素试图同时出现于同一位置的情况。显示其中一个就会覆盖另外一个。如果将网页的二维空间延伸到三维空间，就会解决上述元素覆盖问题。在坐标系中，通过增加z-轴，可使用二维空间的变为三维空间。在网页中，将沿着z-轴的元素使用z-index值来代表通过z-index，可以改变网页元素相互重叠的顺序当CSS区块增加一个z-index属性后，即成为一个层空间层属性及其属性值层属性示例7.鼠标属性及其属性值属性属性值描述cursorhand设置鼠标为手形状crosshair设置鼠标为十字交叉形状text设置鼠标为文本选择形状wait设置鼠标为Windows的沙漏形default设置鼠标为默认的形状help设置鼠标为带问号的形状e-resize设置鼠标为指向东的箭头ne-resize设置鼠标为指向东北的箭头n-resize设置鼠标为指向北的箭头nw-resize设置鼠标为指向西北的箭头w-resize设置鼠标为指向西的箭头sw-resize设置鼠标为指向西南的箭头s-resize设置鼠标为指向南的箭头se-resize设置鼠标为指向东南的箭头可以对任何对象使用cursorCSS属性来改变移动到对象上的鼠标样式鼠标属性示例<style>p{cursor:hand}</style>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（表放射状）、3（表长方形）4）startx和starty：表示渐变效果开始的X和Y坐标5）finishx和finishy：表渐变效果结束的X和Y坐标Alpha滤镜示例img{filter:alpha(opacity=50);}Blur滤镜基本语法：{filter:blur(add=true|false,direction=direction,strength=strength）}

语法解释：

add：用于指定图片是否被改变成印象派的模糊效果，默认取值为true

direction：用于设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位，默认值是向左的270度

strength：表示有多少像素的宽度将受到模糊影响，默认是5像素。注意：其只能取整数Blur滤镜示例img{filter:blur(strength=10);}FlipH、FlipV滤镜基本语法：{Filter:filph}

{Filter:filpv}语法解释：

filph：设置水平翻转

filpv：设置垂直翻转FLIPHFLIPV滤镜示例img{filter:flipv}Gray滤镜基本语法：{filter:gray}语法解释：

Gray滤镜的作用是将对象中的颜色除去，以变成黑白效果gray滤镜示例img{filter:gray}invert滤镜基本语法：{filter:invert}语法解释：

Invert滤镜的作用是把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值，类似底片效果invert滤镜示例<style>img{filter:invert}</style>xray滤镜基本语法：{filter:xray}语法解释：

Xray滤镜的作用是让对象反映出它的轮廓并把这些轮廓加亮，即所谓的X光片xray滤镜示例<style>img{filter:xray}</style>wave滤镜基本语法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength）}语法解释：

wave：用于设置对象产生垂直的波浪效果。它是通过以下参数来实现波浪效果的设置：1）add：表示是否要把对象按照波形样式打乱，默认是按照波形样式打乱，取值除了非0数字及true外，其它值可任意取2）freq：波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹3）lightstrength：可以对波纹增强光影效果。取值范围是从0~100的整数值

4）phase：用来设置正弦波的偏移量，取值范围0~100，参数值为波长的百分比值

5）strength：表示振幅在小，即扭曲的程度wave滤镜示例img{filter:wave(add=add,freq=6,lightstrength=30,phase=0,strength=6)}chroma滤镜基本语法：{filter:chroma(color=color_value}语法解释：color_value为对象上的某种颜色，将其设置为透明效果

chroma滤镜示例img{filter:chroma(color=black)}dropshadow滤镜基本语法：{filter:dropshadow(color=color_value,offx=value,offy=value,positive=value）}语法解释：dropshadow：用于设置对象的阴影效果。它是通过以下参数来实现阴影效果的设置：1）color：设置阴影颜色2）offx：阴影相对于原始对象的水平位置3）offy：阴影相对于原始对象的垂直位置4）positive：设置阴影的透明，0为透明，1为不透明

dropshadow滤镜示例img{filter:dropshadow(color=#ffffcc,offx=10,offy=10,positive=1)}glow滤镜基本语法：{filter:glow(color=color_value,strength=value）}语法解释：glow滤镜设置对象产生边缘光晕的模糊效果Color_value：设置边缘光晕的颜色strength：设置边缘光晕的强度大小，取值为1~255

glow滤镜示例img{filter:glow(color=#33333,strength=135)}mask滤镜基本语法：{filter:mask(color=color_value}语法解释：mask滤镜设置对象的屏蔽效果，就好象印章一样印出模型的模样

color_value指定某种颜色，来设置遮罩效果code1/mask_filter.htm滤镜示例img{filter:mask(color=#336699)}shadow滤镜基本语法：{filter:shadow(color=color_value,direcition=value）}语法解释：shadow滤镜除了具备dropshadow滤镜效果外，还具有渐变阴影的效果Color_value：设置渐变阴影的颜色direction：设置阴影的方向，取值为1~255

shadow滤镜示例img{filter:shadow(color=#336699,direction=135)}

1.4CSS关联HTML文档的方式方式一（即应用内联样式定义）:在主体区域内使用HTML标记符的style属性，例如：<pstyle=“text-align:center”>

优点：可修饰单独的标记符缺点：没有发挥CSS统一设置格式的优势

使用style属性示例<body><pstyle=“font-size:18pt;background-color:#FFCCFF”>在主体内使用HTML标记符的style属性</p></body>方式二:在头部区域内使用style标记符将样式表嵌入到HTML文档中，例如：<style>h1{text-align:center;color:blue}</style>

优点：有利于统一设置单个网页的格式缺点：不便统一设置多个网页的格式

使用style标记嵌入CSS示例<html><head><styletype=text/css><!--body{background-image:url(horse.gif)}-->

</style></head><body></body></html>示例说明：<style>标记用于定义HTML文档内的样式表区域属性type=text/css：定义文件的类型是样式表文本

<!---->：用于对不支持样式的浏览器隐藏样式表内容方式三:在头部区域内的style标记对之间使用@import导入外部样式表文件，例如：<style>@importurl(‘mycss.css’)</style>优点：可设置多个网页的统一格 式，常用于网站

使用@import引入CSS示例<head><styletype=text/css><!--@importurl('mycss.css');-->

</style></head>示例说明：

使用@import来引入CSS外部文件时，需注意：该声明语句必须放在所有样式表的最前面方式四:在头区域内使用link标记符链接外部文件，例如：<linkrel=“stylesheet”type=“text/css”href=“stylesheet.css”>

优点：可设置多个网页的统一格 式，常用于网站

使用link标记符示例<head><linkrel=stylesheethref="mycss.css"type="text/css"></head>示例说明：<link>标记用于链接一个外部样式表文件属性rel=stylesheet：用于定义链接的文件和HTML文档之间的关系属性type=text/css：定义文件的类型是文本类型的属性href：用于指定所链接的CSS文件1.5在HTML文件中应用CSS在HTML文件中应用CSS随样式表定义的选择符不同而不同当选择符是HTML标记或伪类时，HTML文件在使用该选择符标记的同时就直接应用了样式表当选择符是自定义的类或ID时，在HTML文档中应分别在需使用它们的地方的标记中使用属性class=“类名”和id=“ID名”