CSS详细经典速成教程.ppt

《CSS详细经典速成教程.ppt》由会员分享，可在线阅读，更多相关《CSS详细经典速成教程.ppt（63页珍藏版）》请在三一办公上搜索。

1、CSS专题,CSS在页面风格设计中的作用,CSS语法基础,用DIV+CSS的方式来写HTML页面,用CSS设置图像样式扮靓网页,CSS与XML的综合运用,CSS简介,一、CSS简介,CSSCascading Style Sheet层叠样式表样式格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。层叠HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。,二、CSS在页面风格设计中的作用,网页的标准网页主要由3个部分组成：结构（Structure）表现（

2、Presentation）行为（Behavior）,在一个网页中，分若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。,网页各组成部分的字号、字体和颜色等属性就构成了它的“表现”。,网页与用户的交互,二、CSS在页面风格设计中的作用,网页标准的涵义：“结构”决定了网页“是什么”“表现”决定了网页看起来是“什么样子”“行为”决定了网页“做什么”网页标准对应的技术：(X)HTML决定网页的结构和内容CSS设定网页的表现样式JavaScript控制网页的行为CSS的核心目的：实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来

3、，改由CSS来完成。,三、CSS语法基础,CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。CSS规则的构造对象属性值,三、CSS语法基础,样式表规则的组成：选择符（selector）决定哪些因素要受到影响声明（declaration）一个或多个属性值对组成基本语法：selector属性:属性值;属性:属性值语法说明：selector表示希望进行格式化的元素；声明部分包括在选择器后的大括号中；用“属性:属性值”描述要应用的格式化操作；声明中的多个属性值对之间必须用分号隔开。,三、CSS语法基础,选择器（selector）CSS

4、的对象是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选择器（selector）类型：普通选择器复合选择器,标签,三、CSS语法基础,普通选择器标签选择器,标签,pfont-size:16px;color:red;,三、CSS语法基础,普通选择器类别选择器,.biaotifont-size:16px;color:red;普通文字赋于标记符类所产生的格式类选择器所定义的格式,三、CSS语法基础,普通选择器ID选择器,#biaotifont-size:16px;color:red;普通文字赋于标记符id所产生的格式ID选择器所定义的格式,三、CSS语法基础,复合选择器交集选择器

5、,p/*标记选择器*/color:blue;p.Special/*标记.类别选择器*/color:red;.special/*类别选择器*/color:green;普通段落文本（蓝色）普通标题文本（黑色）指定了.special类别的段落文本（红色）指定了.special类别的标题文本（绿色）,三、CSS语法基础,复合选择器并集选择器,并集选择器/*并集选择器*/*集体声明*/h1,h2,h3,h4,h5,p color:purple;font-size:15px;h2.special,.special,#one text-decoration:underline;,示例文字h1 示例文字h2

6、示例文字h3 示例文字h4 示例文字h5 示例文字p1 示例文字p2 示例文字p3,三、CSS语法基础,复合选择器后代选择器,后代选择器/*嵌套声明*/p span color:red;span color:blue;嵌套使用CSS（红色）标记的方法 嵌套之外的标记（蓝色）不生效,三、CSS语法基础,继承继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。,CSS的继承性CSS的继承性,三、CSS语法基础,样式表的定义与使用直接定义标记的style属性定义内部样式表嵌入外部样式表链接外部样式表,

7、import url(style.css)；,一段话,三、CSS语法基础示例,ID和类的定义 此段文字以默认方式显示 此段文字以16像素大小，红色字体显示 此段文字以26像素大小，玫红色字体显示,三、CSS语法基础字体,color 字体颜色font-size 字号 font-family 字体font-style 字体样式normal|italic|oblique(歪斜体)font-weight 字体加粗normal|bold|bolder|lighter|100|200|300 font-variant 字体变体font-variant:normal|small-caps(小型的大写字母)t

8、ext-decoration 文字效果属性none|underline|blink|overline|line-through font 综合字体属性font-style font-weight font-variant font-size/line-height font-family,三、CSS语法基础字体排版,text-indent 首行缩进属性normal|长度单位letter-spacing 字符间距属性normal|长度单位line-height 行距属性normal|比例|长度单位|百分比text-align 水平对齐属性left|right|center|justifytext

9、-transform 转换英文大小写uppercase|lowercase|capitalize|none,三、CSS语法基础背景颜色,background-color：关键字|RGB值|transparentCSS则有四种定义颜色的方法：十六进制数RGB函数（整数）RGB函数（百分比）颜色名称,三、CSS语法基础背景颜色,背景颜色的属性 此行文字以红色背景显示n 此行文字以黄色背景显示,三、CSS语法基础背景颜色,三、CSS语法基础背景图片,background-image：插入背景图片background-attachment:插入背景附件background-repeat:设置重复背景图

10、片background-position:设置背景图片位置,background-image插入背景图片,background-image设置背景图片基本语法：background-image:url|none语法说明：url表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，none表示不加载图片。,background-attachment插入背景附件,background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。基本语法：background-attachment：scroll|fixed语法说明：scroll表示背景图片是随着滚动条的

11、移动而移动，是浏览器的默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。,background-repeat设置重复背景图片,background-img属性设置网页的背景图片重复显示方式。基本语法：background-repeat：repeat|repeat-x|repeat-y|no-repeat语法说明：repeat表示背景图片在水平和垂直方向平铺，是默认值；repeat-x表示背景图片在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeat表示背景图片不平铺。,background-position设置背景图片位置,当在网页中插入背景图片

12、时，每一次插入的位置，都是位于网页的左上角，所以通过background-position属性来改变图片的插入位置。基本语法：background-position：百分比|长度|关键字语法说明：利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。,三、CSS语法基础盒子的概念与使用,盒子模块 设置边界 设置元素边框

13、 设置元素内边界,盒子模块,在CSS中，将样式调用在每一个元素上，都以一个假想的矩形格式模型看待.一般使用矩形模块的时候，搭配margin属性、border属性以及padding属性，可以更好的控制元素的样式。,设置边界,margin的四个属性主要是控制元素边界与文件其他内容的空白距离，四个边界一般按顺时针方向上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）属性。四个边界的设置语法一样。基本语法：margin-(top、right、bottom、left):长度单位|百分比单位|auto,设置元素边框,border-st

14、yle边框样式属性border-width边框宽度属性border-color边框色彩属性border属性的综合设置,border-style边框样式属性,利用边框样式属性不仅可以设置单位边框样式属性，还可以对单位边框进行设置，而且也可以利用复合边框样式属性来统一设置四条边框的样式。基本语法：border-style:样式值border-top-style:样式值border-bottom-style:样式值border-left-style:样式值border-right-style:样式值,border-style边框样式属性,语法说明：border-style是一个复合属性，复合属性的值

15、有四种设置方法，其他4个都是单个边框的样式属性，只能取一个值。样式值属性的具体说明见表10-8。设置一个值：四条边框宽度均使用一个值。设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。设置四个值：四条边框宽度的调用顺序为上、右、下、左。,border-width边框宽度属性,border-width属性，是控制元素边框的宽度的一个综合属性，和border-style一样也有四种单独的设置方法，分别来定义四条边框的宽度，设置方法和边框样式一样。基本语法：,border-width边框

16、宽度属性,语法说明：thin、medium、thick分别表示细、中等、粗，length表示长度单位,border-color边框色彩属性,border-color属性是用来控制边框显示的颜色，和边框宽度、边框样式的设置方法一样，也可以分别来设置每个边框的颜色.基本语法：border-color:颜色关键字|RGB值 border-top-color:颜色关键字|RGB值 border-bottom-color:颜色关键字|RGB值border-left-color:颜色关键字|RGB值border-right-color:颜色关键字|RGB值,border属性的综合设置,在CSS中，bord

17、er属性用来同时设置边框的样式、宽度和颜色，也可以另外对每个边界属性单独进行设置 基本语法：border:边框宽度|边框样式|边框颜色 border-top:上边框宽度|上边框样式|上边框颜色 border-bottom:下边框宽度|下边框样式|下边框颜色border-left:左边框宽度|左边框样式|左边框颜色border-right:右边框宽度|右边框样式|右边框颜色语法说明：每一个属性都是一个复合属性，都可以同时设置边框的样式、宽度和颜色，每个属性的值中间用空格隔开，在这5个属性中，只有border可以同时设置四条边框的属性，其他的只能设置单边框的属性。,设置元素内边界,元素内边界主要是

18、指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。基本语法：padding:长度|百分比padding-top:长度|百分比 padding-bottom:长度|百分比padding-left:长度|百分比padding-right:长度|百分比语法说明：长度包括长度值和长度单位，百分比是相对于上级元素宽度的百分比，不允许用负数，padding作为复合属性的四种取值方法请参考边框样式的取值方法。,三、CSS语法基础列表,列表 list-style-type列表样式list-style-image图像列表list-style-posi

19、tion列表符号的缩进,三、CSS语法基础列表,list-style-type属性，可用于设置列表的符号或编号，此属性通常搭配或标记使用。基本语法：list-style-type:属性值,三、CSS语法基础列表,利用css还可以把列表的符号设置成喜欢的图片基本语法：list-style-image:url|none语法说明：url是指定要载入的图片路径，在使用上与插入图片的用法差不多；none表示不使用图片式的列表符号。,三、CSS语法基础列表,list-style-position列表符号缩进属性，主要是设置每个列表项目的符号或图片，是否向外凸出。基本语法：list-style-positi

20、on:inside|outside语法说明：inside表示列表符号不向外凸出，也可以理解成列表项上的第二行文字与列表符号对齐；outside表示列表符号向外凸出，也是默认值。,三、CSS语法基础设置网页链接属性,设置伪类选择器得到不同的超链接属性,三、CSS语法基础设置滚动条属性,利用CSS制作滚动条的颜色效果,三、CSS语法基础设置光标属性,设置变化的光标图形cursor:属性值,四、用DIV+CSS的方式来写HTML页面,一列居中样式margin-right:auto;margin-left:auto;width:px;两列并列样式定义固定宽度、左对齐浮动两列并列居中样式用一个大容器容纳

21、两个列，即以上两种技术的综合三列并列样式定义固定宽度、左对齐浮动工字型布局结合三列并列样式，版权区设定清除浮动clear:both;,div标记的使用,在写HTML文件时，要定义区域间不同样式时，可以使用标记达到这个效果，除此以外，通过设置的z-index属性还可以设置层次的效果。基本语法：,div标记的使用,语法说明：用style来表示层的样式，因为如果没有定义层的样式的话，在浏览网页的时候是看不到效果的。其中：position属性主要是来定义层的定位方式；left和top是用来定位层的位置，与它并列的还有right和bottom，这四个属性主要是用来设置层的位置，分别表示对象与其他对象的左

22、部、顶部、右部和底部的相对位置；width和height用来定义层的宽度和高度；float是层的浮动属性，用来设置层的浮动位置，当然这个属性不仅可以用在图像和表格上，还可以用到其他任何元素上；clear是层的清除属性，表示是否充许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素；z-index主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，相当于三维空间的z坐标，z-index越大，区域在堆中的位置就越高。,标记的使用,标记主要用来定义网页上的区域，通常用于比较大范围的设置，而标记被用来组合

23、文档中的行内元素。基本语法：或者 语法说明：如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。,与的区别,基本上与标记在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。区域内是否换行：标记区域内的对象与区域外的上下文会自动换行，而标记区域内的对象与区域外的对象不会自动换行。标记相互包含：与标记可以同时在网页上使用，一般在使用上建议用标记包含标记；但最好不包含标记，否则会造成标记的区域不完整，而形成断行的现象。,小实例,页面布局设计始终是网页设

24、计中的一个核心问题，它包括技术和美学两个方面的问题，两者结合的非常紧密。页面布局的主要工具是、和Flash文件。对于框架，一般而言应尽量避免使用；表格作为可以在上面布置元素的二维网格，它的优点在于在所有浏览器中几乎都可以无差错的运行，而只有微不足道的差异，而且，对于像切割图像这样的问题可以非常容易的用表格实现；但是过度使用表格所带来的页面无序，会给后期的维护带来极大的困难；技术虽然难以全部代替，但是它的位置、尺寸、背景、边框等都可以很好的设计，更重要的是它所依赖的内容和样式分离的思想使得页面代码更为简洁，样式的更改更为方便。,五、用CSS设置图像样式扮靓网页,为图像设置边框border:样式

25、颜色 宽度;样式：dotted(点线)、dashed（虚线）、solid（实线）、double（双线）groove：根据border-color的值绘制3D凹槽ridge：根据border-color的值绘制3D凸槽inset：根据border-color的值绘制3D凹边outset：根据border-color的值绘制3D凸边为图像设置背景background:url();为图形设置阴影background:white url(渐变背景.gif)repeat-x bottom left;filter：Shadow(Color=?,Direction=?).y1 position:absolu

26、te;padding:12px;filter:Shadow(Color=#000000,Direction=135);,五、用CSS设置图像样式扮靓网页,滤镜静态滤镜alpha、blur、Motionblur、shadow、dropshadow、wave、glow、gray、flipv、fliph、invert、xray、emboss、engrave、mask动态滤镜必须与javascript配合才能发挥作用对象.滤镜数组名i.apply();对象.滤镜数组名i.play();对象.滤镜数组名i.stop();filter:BlendTrans(duration=秒数)filter:Revea

27、lTrans(Transition=变化方式duration=秒数)filter:light,五、用CSS设置图像样式扮靓网页,通道（alpha）设置透明度filter:alpha(Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)Opacity：透明等级，0100，0表示完全透明，100表示不透明；FinishOpacity：结束时的透明度，取值同上；Style：透明区域的形状特征0：统一形状1：线性2：放射性渐变3：矩形渐变当Style为2或3时，startX等参数没有意义，都是以图片中心开始向四

28、周结束,五、用CSS设置图像样式扮靓网页,模糊（blur）设置模糊度filter:progid:DXImageTransform.Microsoft.blur(pixelradius=?,makeshadow=?)pixelradius：设置模糊效果的作用深度；makeshadow：设置是否制作成阴影；makeshadowopacity:设置使用makeshadow制作成的阴影的透明度,.blur1filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);.blur2filter:progid:D

29、XImageTransform.Microsoft.blur(pixelradius=4,makeshadow=true,makeshadowopacity=10;);,五、用CSS设置图像样式扮靓网页,运动模糊（Motionblur）设置运动模糊度filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=？,direction=？,add=？);stregth：设置模糊效果的作用深度，代表有多少像素受到模糊影响；direction：模糊方向，0度表示垂直向上，；add:true|false,是否叠加原图；,.motionblur

30、1filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=false);.motionblur2filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=true);,五、用CSS设置图像样式扮靓网页,阴影shadow在指定方向上建立物体的连续投影filter:shadow(color=？,direction=？);dropshadow下落阴影 filter:dropshadow(c

31、olor=？,offx=？,offy=？,positive=？),.shadowfilter:shadow(color=#CCCCFF,direction=135);/*阴影效果*/.dropfilter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);/*下落阴影*/,五、用CSS设置图像样式扮靓网页,波形filter:wave(add=?,freq=?,lightstrength=?,phase=?,strength=？)Add:1显示原来对象，0不显示原来对象Freq:波形的频率，参数值1100，完整波纹的个数Lightstre

32、ngth：波纹增光效果，参数值1100Phase:正弦波开始的偏移量，数值0100，开始时偏移量占波长的百分比Strength:振幅的大小,.threefilter:flipv alpha(opacity=80)wave(add=0,freq=15,lightstrength=30,phase=0,strength=4);/*同时使用三个滤镜*/*竖直翻转、透明、波浪效果*/,五、用CSS设置图像样式扮靓网页,发光filter:glow(color=？,strength=？);灰度filter:gray;翻转filter:fliph;/*水平翻转*/filter:flipv;/*竖直翻转*/f

33、ilter:flipv fliph;/*水平、竖直同时翻转*/反色filter:invert;/*底片效果*/X光filter:xray;/*X光效果*/浮雕纹理filter:progid:DXImageTransform.microsoft.emboss(bias=？);凹陷浮雕效果filter:progid:DXImageTransform.microsoft.engrave(bias=？);凸出浮雕效果bias:取值范围-11遮罩filter:mask(color=？);/*遮罩效果*/,图片淡入淡出filter:BlendTrans(duration=秒数),五、用CSS设置图像样式扮

34、靓网页,function img1(x)/获取数组记录数this.length=x;iname=new img1(5);iname0=photo/01.jpg;iname1=photo/02.jpg;iname2=photo/03.jpg;iname3=photo/04.jpg;iname4=photo/05.jpg;var i=0;function play1()/演示变换效果if(i=4)i=0;/当进行到iname4时，返回iname0else i+;tp1.filters0.apply();/tp1为图像的name，在标记中定义tp1.src=inamei;tp1.filters0.p

35、lay();mytimeout=setTimeout(play1(),4000);,imgfilter:BlendTrans(duration=4);border:none;,play1();,PPT幻灯片filter:RevealTrans(Transition=变化方式duration=秒数)Transition：变化方式，取值023，23为随机特效,五、用CSS设置图像样式扮靓网页,function img2(x)this.length=x;jname=new img2(5);jname0=photo/06.jpg;jname1=photo/07.jpg;jname2=photo/08.

36、jpg;jname3=photo/09.jpg;jname4=photo/10.jpg;var j=0;function play2()if(j=4)j=0;else j+;tp2.filters0.apply();tp2.src=jnamej;tp2.filters0.play();mytimeout=setTimeout(play2(),4000);,imgfilter:RevealTrans(Duration=3,Transition=23);border:none;,play2();,灯光效果filter:light;AddAmbien:加入包围的光源；AddCone：加入锥形光源；A

37、ddPoint:加入光源；Changcolor：改变光的颜色；Changstrength:改变光源的强度；Clear:清除所有的光源；MoveLight:移动光源舞台灯光探照灯,五、用CSS设置图像样式扮靓网页,xml引用cssHtml+xml+cssHtml:内容Xml:数据Css:格式,六、CSS与XML的综合运用,六、CSS与XML的综合运用,var xmlDoc=new ActiveXObject(Microsoft.XMLDOM);xmlDoc.async=false;xmlDoc.load(html+css+xml.xml);/调用数据var nodes=xmlDoc.documentElement.childNodes;document.write();document.write(书名作者邮编时间)for(i=0;i+title+author+email+date+);document.write();,