《电子商务实用基础 教学课件 ppt 作者 闵敏 第2章 CSS样式表》由会员分享，可在线阅读，更多相关《电子商务实用基础 教学课件 ppt 作者 闵敏 第2章 CSS样式表（36页珍藏版）》请在金锄头文库上搜索。
1、第2章 CSS级联样式表,电子商务设计实务 第二版,主要内容,什么是级联样式表,1,CSS的创建,2,CSS的引用方式,3,样式设计中的计量单位,4,在脚本语言中使用样式,5,CSS滤镜特效,6,一、什么是级联样式表,CSS与HTML,CSS(Cascading Style Sheet)译作“级联样式表”，是用于增强网页显示风格的特殊标记，级联样式表允许将样式控制与网页内容分离，实现更灵活的样式，CSS是HTML的扩展。 CSS的基本格式：,一、什么是级联样式表,2. 浏览器对CSS的支持,在CSS1.0的标准尚未制定前，IE3.0就已经支持CSS1.0的部分草案规格，Netscape Nav
2、igator 则是从4.0才开始支持CSS1.0的，Maxilla 5.0被认为对CSS1.0和大多数CSS 2.0提供最完全支持的浏览器。Netscape Navigator 4.0和IE 4.0及IE 5.0支持CSS1.0的各部分。总之，在使用CSS时，要了解浏览器对CSS的支持情况。,一、什么是级联样式表,3. CSS的优点,D,减少图形文件的使用次数,共享样式设置,利用样式表可以实现样式的集中控制,可以将样式分类使用,二、CSS的创建,样式的基本格式和用法 样式定义的基本格式,HTML标记属性:属性值;, 样式的组成 样式主要包括样式选择器和样式规则两部分。, 一个标记中使用多个样式
3、,在样式定义中可以同时对多个不同的样式属性进行设置，不同的属性之间用分号分隔。,二、CSS的创建,样式的基本格式和用法 分行定义样式,BODY Background: Blue； BODY Color: Yellow；, 样式中使用注释, 多个标记使用相同样式,注释是对样式的说明，不影响样式设置。注释放在/* */之间。,不仅一个标记可以使用多个样式属性，多个标记也可以使用相同的样式定，多个标记之间要用逗号分隔。,二、CSS的创建,2.类选择器 类选择器的格式为：,.类名 样式规则表；,一个具体的例子,二、CSS的创建,3. ID选择器 ID选择器的定义格式为：,#ID名称样式规则表；,一个具
4、体的例子。（例2-2-1 ）,二、CSS的创建,4.上下文选择器 上下文选择器主要是为某个HTML标记内部的标记设置样式的。,一个具体的例子 （例2-2-2 ）,二、CSS的创建,5.建立样式文件,一个具体的例子。（y1.css ）,样式文件是将样式设置保存在文件中构成的样式集合。样式文件的扩展名为CSS。,三、CSS的引用方式,1.整页套用样式,如果要使样式对整个页面的显示效果都起作用，就需要把定义的样式通过标记.放在标记之间。,看一个具体的例子。（例2-3-1 ）,三、CSS的引用方式,2.样式定义中引用样式文件,样式定义中可以引用已经定义好的样式文件。要在样式定义中引用样式文件，可以使用
5、CSS的import声明符，这个声明用于一个CSS文件或内部的STYLE元素。,Import声明符的语法格式为：,import URL(样式文件的URL);,三、CSS的引用方式,3.样式文件的引入,当我们建立好样式文件之后，就可以引入样式文件到网页中。方法是在 之间加上如下的代码：,REL在链接样式文件(*.css)时，REL永远是“stylesheet”。 YEP属性指定了链接文件的MIMI类型，这里它的值只能是“text/css”。 HREF属性引用已经创建的样式文件的名字。,下面是一个引用样式文件的实例。（例2-3-2 ）,三、CSS的引用方式,4.使用局部样式,三种方式：,用标记的S
6、TYLE属性。如：,局部样式的使用,引入类选择器。（如例2-3-3）,引入ID选择器。（如例2-3-4）,三、CSS的引用方式,5.样式的混合使用,样式的使用不只是上面讲的几种，还可以将几种样式混合使用，以达到更加复杂的样式设计要求。,一个具体的例子。（如例2-3-5）,三、CSS的引用方式,6. CSS的继承性,样式的继承性是指外部标记的样式设置对被包含在标记内部的标记的作用。很明显，内部的标记将继承外部标记的样式设置。（如例2-3-6）,样式的继承方式除了前面说的子标记对父标记样式的继承外，还有一种以百分比继承的形式。这种方式主要是后面的样式设置对前面样式设置的继承。（如例2-3-7）,三
7、、CSS的引用方式,7. CSS的优先顺序, 不同引用方式的优先顺序：HTML标记中通过STYLE属性直接引入的样式的优先级最高，也就是局部样式的优先级高与全局样式。（如例2-3-8）除了局部样式，其它的样式以其定义的顺序决定了它的优先权。越放在后面的它的优先权就越高，它所设定的样式将被优先使用。 （如例2-3-9）, 不同选择器的优先顺序：上下文选择器类选择器ID选择器。,四、样式设计中的计量单位,1.长度单位, 绝对单位。所谓绝对单位就是用实际单位。如：,相对单位。相对单位是相对于已经设定的对象的样式，即相对于浏览器默认设置的该属性的设置值。有Ex和em两种表示方法。,BodyFont-s
8、ize:20pt; Line-height:15pt; Text-indent:25pt;,Body Font-size: 20pt; Line-height: 15px; Text-indent: 25em ;,百分比单位。百分比单位是以当前的大小与百分比相乘的到的结果。,BodyFont-size:20pt; B Font-size:200%; /*这里字体的大小为40pt*/,四、样式设计中的计量单位,2.颜色单位,直接使用颜色名。 RRGGBB格式。 RGB格式。 RGB（RRR，GGG，BBB）格式。 RGB（RRR，GGG，BBB%）格式。,五、在脚本语言中使用样式,在网页设计中，
9、我们经常要在脚本语句中对标记的格式进行设置。在脚本中要设置一个标记的样式，首先要给标记起一个ID名称，即定义一个DOM对象，通过对象名就可以设置它的样式了。 （如例2-5-1 ）,六、CSS滤镜特效,1.滤镜的创建,要使用滤镜效果，必须使用HTML标记的Style属性，对CSS样式的Filter属性进行设置。滤镜设置的一般格式为：,filter:滤镜名称(参数设置),Filter样式允许在HTML标记上一次使用多个滤镜效果，多个滤镜之间用空格隔开，同一个滤镜的不同参数之间用逗号隔开，Filter和其它样式之间用分号隔开。,六、CSS滤镜特效,2.外观滤镜,FILTER:ALPHA(opacit
10、y=opacity,finishopacity=finishopacity, STYLE=STYLE,startx=startx,starty=starty, finishx=finish,finishy=finishy), Alpha滤镜 语法格式为：,如例2-6-1,六、CSS滤镜特效,2.外观滤镜,对于HTML标记，格式为： Filter:blur(add=add,direction=direction,strength=strength) 对于Script语言，格式为： oblurfilter=object.filters.blur, Blur滤镜 语法格式为：,效果为：,六、CSS滤
11、镜特效,2.外观滤镜, FlipH和FlipV滤镜 filter:filph、filter:filpv分别是水平反转和垂直反转。,效果为：,六、CSS滤镜特效,2.外观滤镜, Chroma滤镜 使用Chroma属性可以设置一个对象中指定的颜色为透明色。语法格式：,filter:chroma(color=color),六、CSS滤镜特效,2.外观滤镜, DropShadow滤镜 DropShaow是添加对象的阴影效果，其工作原理是建立一个偏移量。语法格式：,filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive),效果
12、为：,六、CSS滤镜特效,2.外观滤镜, Glow滤镜 当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。语法格式：,filter:glow(color=color,strength),效果为：,六、CSS滤镜特效,2.外观滤镜, Gray、Invert、Xray滤镜 Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的X光片。语法格式：,filter:gray ,filter:invert,filter:xray,效果为：,六、CSS滤镜特效,2.外观
13、滤镜, Mask滤镜 使用“MASK“属性可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样。语法格式：,filter:mask(color=color),六、CSS滤镜特效,2.外观滤镜, Shadow滤镜 利用Shadow属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。语法格式：,filter:shadow(color=color,direction=direction),六、CSS滤镜特效,2.外观滤镜, Wave滤镜 Wave滤镜实现波浪效果。语法格式：
14、,filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength),效果为：,六、CSS滤镜特效,2.外观滤镜, Light滤镜 这个滤镜模拟光源的投射效果。语法格式：,Filterlight,效果为（如例2-6-2 ）,六、CSS滤镜特效,3.过渡效果滤镜, Blend Transition(混合过渡滤镜) 对图像的出现消失进行淡入淡出效果处理。语法格式：,filter:blendtransition(duration=过渡秒数),（如例2-6-3）,六、CSS滤镜特效,3.过渡效果滤镜, Reveal Transition(显示过渡)滤镜 显示转换滤镜提供的只是一种简单的淡入淡出的过渡方式，如果需要更炫耀的过渡效果，则需要显示过渡滤镜。语法格式：,filter:revealtrans(duration=过渡秒数，transition=“过渡类型“),,Thank You !,
