搜索
第一讲CSS层叠样式表•1.1CSS概述•1.2定义CSS样式表•1.3CSS常用属性•1.4CSS关联HTML文档的方式•1.5在HTML文档中应用CSS•1.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区块定位有两种方法：相对定位和绝对定位区块定位之位置与大小属性示例stylep{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属性来改变移动到对象上的鼠标样式•鼠标属性示例stylep{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：用于指定图片是否被改变成印象派的模糊效果，默认取值为truedirection：用于设置模糊的方向。其中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滤镜示例styleimg{filter:invert}/stylexray滤镜•基本语法：{filter:xray}•语法解释：Xray滤镜的作用是让对象反映出它的轮廓并把这些轮廓加亮，即所谓的X光片•xray滤镜示例styleimg{filter:xray}/stylewave滤镜•基本语法：{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(