CSS层叠样式表.ppt

第一讲 CSS层叠样式表,1.1 CSS概述1.2 定义CSS样式表1.3 CSS常用属性1.4 CSS关联HTML文档的方式1.5 在HTML文档中应用CSS1.6 CSS的冲突,学习目标,熟练掌握CSS样式表的定义掌握样式表嵌入HTML文档的方式掌握在HTML文档中应用CSS样式的方式,1.1 CSS概述,CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。,特 点,将格式和结构分离以前所末有的能力控制页面布局 制作体积更小、下载更快的网页可以实现许多网页同时更新,应用CSS的步骤,定义样式表把样式表关联到HTML文档在HTML文档中应用样式表,1.2 定义CSS样式,基本语法:选择符 属性名1:属性值1;属性名2:属性值2;,1.HTML标记符,HTML标记符重新定义了HTML标记符的显示效果，定义示例代码如下：h1text-align:center;font-size:30pt;color:blue,HTML选择符示例,2.自定义的类与ID,使用自定义类或ID，可以定义一个通用的样式，以便应用到任何需要的地方。它们的应用需要分别使用到class和id属性，定义示例代码如下：.classnameproperty:value#idnameproperty:value,用户定义的类与ID示例,3.伪类选择符,伪类是一种特殊的类选择符，它最大的用处是可以对链接在不同状态下定义不同的样式效果，写书形式如下：a:link 设置未访问过的超链接格式a:visited 设置已访问过的超链接格式a:active 设置活动超链接格式a:hover 设置悬停状态的超链接格式,伪类选择符示例代码如下：a:linkcolor:green;text-decoration:nonea:activecolor:blue;text-decoration:nonea:visitedcolor:red;text-decoration:underlinea:hovercolor:pink;font-style:italic,伪类选择符示例,1.3 CSS常用属性,1.字体属性及其属性值,字体属性示例,.text font-family:宋体;font-variant:small-caps font-size:16pt;font-style:italic;font-weight:bolder;,2.文本属性及其属性值,文本属性示例,.text letter-spacing:6px;line-height:28pt;text-decoration:underline;text-align:left;text-indent:44pt;,3.列表属性及其属性值,列表属性示例,4.颜色和背景属性及其属性值,颜色和背景属性示例,5.CSS区块属性 区块边框 区块边距 区块定位,1)区块边框属性及其属性值,边框属性示例,一个属性可以设置多个属性值，不同的属性值之间使用空格间隔,2)区块边距属性及其属性值,边距属性示例,3-1)区块定位之位置与大小属性,区块定位之位置与大小属性示例,pposition:absolute;top:30px;left:50px;width:500px;height:100px;,3-2)区块定位之浮动与清除属性,区块定位之浮动与清除属性示例,6.CSS层,层属性及其属性值,层属性示例,7.鼠标属性及其属性值,鼠标属性示例,pcursor:hand,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：设置透明度的程度。取值范围为0100，0代表完全透明，100代表完全不透明 2）finishopacity：用于设置渐变结束时的透明度 3）style：用于指定透明区域的形状特征，取值为0（表统一形状）、1（表线形）、2（表放射状）、3（表长方形）4）startx和starty：表示渐变效果开始的X和Y坐标 5）finishx和finishy：表渐变效果结束的X和Y坐标,Alpha滤镜示例,imgfilter:alpha(opacity=50);,Blur滤镜,基本语法：filter:blur(add=true|false,direction=direction,strength=strength）,语法解释：add：用于指定图片是否被改变成印象派的模糊效果，默认取值为true direction：用于设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位，默认值是向左的270度 strength：表示有多少像素的宽度将受到模糊影响，默认是5像素。注意：其只能取整数,Blur滤镜示例,imgfilter:blur(strength=10);,FlipH、FlipV滤镜,基本语法：Filter:filph Filter:filpv语法解释：filph：设置水平翻转 filpv：设置垂直翻转,FLIPH FLIPV滤镜示例,imgfilter:flipv,Gray滤镜,基本语法：filter:gray语法解释：Gray滤镜的作用是将对象中的颜色除去，以变成黑白效果,gray滤镜示例,imgfilter:gray,invert滤镜,基本语法：filter:invert语法解释：Invert滤镜的作用是把对象的可 视化属性全部翻转，包括色彩、饱和度和亮度值，类似底片效果,invert滤镜示例,imgfilter:invert,xray滤镜,基本语法：filter:xray语法解释：Xray滤镜的作用是让对象反映出它的轮廓并把这些轮廓加亮，即所谓的X光片,xray 滤镜示例,imgfilter:xray,wave滤镜,基本语法：filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength）,语法解释：wave：用于设置对象产生垂直的波浪效果。它是通过以下参数来实现波浪效果的设置：1）add：表示是否要把对象按照波形样式打乱，默认是按照波形样式打乱，取值除了非0数字及true外，其它值可任意取 2）freq：波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹 3）lightstrength：可以对波纹增强光影效果。取值范围是从0100的整数值 4）phase：用来设置正弦波的偏移量，取值范围0100，参数值为波长的百分比值 5）strength：表示振幅在小，即扭曲的程度,wave滤镜示例,imgfilter:wave(add=add,freq=6,lightstrength=30,phase=0,strength=6),chroma滤镜,基本语法：filter:chroma(color=color_value语法解释：color_value为对象上的某种颜色，将其设置为透明效果,chroma滤镜示例,imgfilter: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滤镜示例,imgfilter:dropshadow(color=#ffffcc,offx=10,offy=10,positive=1),glow滤镜,基本语法：filter:glow(color=color_value,strength=value）语法解释：glow滤镜设置对象产生边缘光晕的模糊效果Color_value：设置边缘光晕的颜色strength：设置边缘光晕的强度大小，取值为1255,glow滤镜示例,imgfilter:glow(color=#33333,strength=135),mask滤镜,基本语法：filter:mask(color=color_value语法解释：mask滤镜设置对象的屏蔽效果，就好象印章一样印出模型的模样 color_value指定某种颜色，来设置遮罩效果,code1/mask_filter.htm滤镜示例,imgfilter:mask(color=#336699),shadow滤镜,基本语法：filter:shadow(color=color_value,direcition=value）语法解释：shadow滤镜除了具备dropshadow滤镜效果外，还具有渐变阴影的效果Color_value：设置渐变阴影的颜色direction：设置阴影的方向，取值为1255,shadow滤镜示例,imgfilter:shadow(color=#336699,direction=135),1.4 CSS关联HTML文档的方式,方式一（即应用内联样式定义）:在主体区域内使用HTML 标记符的 style 属性，例如：优点：可修饰单独的标记符 缺点：没有发挥CSS统一设置格式的优势,使用style属性示例,在主体内使用HTML 标记符的 style 属性,方式二:在头部区域内使用style标记符将样式表嵌入到HTML文档中，例如：h1text-align:center;color:blue 优点：有利于统一设置单个网页的格式 缺点：不便统一设置多个网页的格式,使用style标记嵌入CSS示例,示例说明：,标记用于定义HTML文档内的样式表区域属性type=text/css：定义文件的类型是样式表文本：用于对不支持样式的浏览器隐藏样式表内容,方式三:在头部区域内的style标记对之间使用import导入外部样式表文件，例如：import url(mycss.css)优点：可设置多个网页的统一格 式，常用于网站,使用import引入CSS示例,示例说明：,使用import 来引入CSS外部文件时，需注意：该声明语句必须放在所有样式表的最前面,方式四:在头区域内使用link标记符链接外部文件，例如：优点：可设置多个网页的统一格 式，常用于网站,使用link标记符示例,示例说明：,标记用于链接一个外部样式表文件属性rel=stylesheet：用于定义链接的文件和HTML文档之间的关系属性type=text/css：定义文件的类型是文本类型的属性href：用于指定所链接的CSS文件,1.5 在HTML文件中应用CSS,在HTML文件中应用CSS随样式表定义的选择符不同而不同当选择符是HTML标记或伪类时，HTML文件在使用该选择符标记的同时就直接应用了样式表当选择符是自定义的类或ID时，在HTML文档中应分别在需使用它们的地方的标记中使用属性class=“类名”和id=“ID名”来应用自定义的类和ID,在HTML文件中应用CSS示例,1.6 CSS的冲突,当对同一段文本应用多个CSS样式时，由于这些样式之间可能存在一定的矛盾（即冲突），所以在显示时会出现无法预期的效果为解决CSS冲突问题，浏览器在显示CSS样式时，一般遵循下页所列出的几个冲突解决规则,冲突解决规则,当两个不同样式应用于同一段文本时，浏览器将显示这段文本所具有的所有属性，除非定义的两个样式之间有显示上的冲突当来自不同样式的文本属性在应用到同一段文本产生冲突时，浏览器将按照与文本关系的远近来决定显示哪一个属性，近者优先如果HTML样式与CSS样式存在矛盾时，CSS样式具有较高的优先级。,CSS冲突示例,这里面的文字将被显示成红色这里面的文字却是绿色这里面的文字也是红色,小 结,CSS是一种分离格式和结构的格式化网页的标准方式，它扩展了 HTML 的功能，对网页布局的控制能力前所未有，可实现多网页同时更新CSS的定义样式是：选择符 属性名1:属性值1;属性名2:属性值2;常用选择符有：HTML标记符、用户定义的类、用户定义的ID和伪类,在网页中使用CSS的方式有四种：一是在主体内使用HTML 标记符的 style 属性；二是在头区域内使用style标记嵌入和使用import 引入CSS；三是在头区域内使用link标记符链接外部文件当样式表定义的选择符使用类或ID时，在HTML文档应用CSS时，必须使用标记的属性class或id,思考题,CSS是什么？CSS有哪些特点？如何来定义CSS？定义CSS的选择符类型有哪些？在网页中关联CSS的方式有哪些?如何在HTML文档中应用CSS？,