CSS详细经典速成教程

,*,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Company name,WEB,编程基础,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,*,CSS,专题,CSS,在页面风格设计中的作用,CSS,语法基础,用,DIV+CSS,的方式来写,HTML,页面,用,CSS,设置图像样式扮靓网页,CSS,与,XML,的综合运用,CSS,简介,一、,CSS,简介,CSS,Cascading Style Sheet,层叠样式表,样式,格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。,层叠,HTML,文件引用多个,CSS,样式时，如果,CSS,的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循,“,最近优选原则,”,。,二、,CSS,在页面风格设计中的作用,网页的标准,网页主要由,3,个部分组成：,结构（,Structure,）,表现（,Presentation,）,行为（,Behavior,）,在一个网页中，分若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。,网页各组成部分的字号、字体和颜色等属性就构成了它的“表现” 。,网页与用户的交互,二、,CSS,在页面风格设计中的作用,网页标准的涵义：,“结构”决定了网页“是什么”,“表现”决定了网页看起来是“什么样子”,“行为”决定了网页“做什么”,网页标准对应的技术：,(X)HTML,决定网页的结构和内容,CSS,设定网页的表现样式,JavaScript,控制网页的行为,CSS,的核心目的：,实现网页结构内容和表现形式的分离，将原来由,HTML,语言所承担的一些与结构无关的功能剥离出来，改由,CSS,来完成。,三、,CSS,语法基础,CSS,的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。,CSS,规则的构造,对象,属性,值,三、,CSS,语法基础,样式表规则的组成：,选择符（,selector,）,决定哪些因素要受到影响,声明（,declaration,）,一个或多个属性值对组成,基本语法：,selector,属性,:,属性值,;,属性,:,属性值,语法说明：,selector,表示希望进行格式化的元素；,声明部分包括在选择器后的大括号中；,用,“,属性,:,属性值,”,描述要应用的格式化操作；,声明中的多个属性值对之间必须用分号隔开。,三、,CSS,语法基础,选择器（,selector,）,CSS,的对象是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称,选择器（,selector,）,类型：,普通选择器,复合选择器,标签,三、,CSS,语法基础,普通选择器,标签选择器,标签,pfont-size:16px; color:red;,三、,CSS,语法基础,普通选择器,类别选择器,.biaotifont-size:16px; color:red;,普通文字,赋于标记符类所产生的格式,类选择器所定义的格式,三、,CSS,语法基础,普通选择器,ID,选择器,#biaotifont-size:16px;,color:red;,普通文字,赋于标记符,id,所产生的格式,ID,选择器所定义的格式,三、,CSS,语法基础,复合选择器,交集选择器,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,示例文字,h3,示例文字,h4,示例文字,h5,示例文字,p1,示例文字,p2,示例文字,p3,三、,CSS,语法基础,复合选择器,后代,选择器,后代选择器,/*,嵌套声明 *,/,p span,color:red;,span,color:blue;,嵌套使,用,CSS,（红色）,标记的方法,嵌套之外的,标记（蓝色）,不生效,三、,CSS,语法基础,继承,继承是,CSS,的一个主要特征，许多,CSS,属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。,例如一个,body,定义了的颜色值也会应用到段落的文本中。,CSS,的继承性,CSS,的,继承性,三、,CSS,语法基础,样式表的定义与使用,直接定义标记的,style,属性,定义内部样式表,嵌入外部样式表,链接外部样式表,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 (,小型的大写字母,),text-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 | justify,text-transform,转换英文大小写,uppercase | lowercase | capitalize | none,三、,CSS,语法基础,背景颜色,background-color,：关键字,| RGB,值,| transparent,CSS,则有四种定义颜色的方法：,十六进制数,RGB,函数（整数）,RGB,函数（百分比）,颜色名称,三、,CSS,语法基础,背景颜色, ,背景颜色的属性,此行文字以红色背景显示,n,此行文字以黄色背景显示,三、,CSS,语法基础,背景颜色,三、,CSS,语法基础,背景图片,background-image,：,插入背景图片,background-attachment:,插入背景附件,background-repeat:,设置重复背景图片,background-position:,设置背景图片位置,background-image,插入背景图片,background-image,设置背景图片,基本语法：,background-image:url | none,语法说明：,url,表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，,none,表示不加载图片。,background-attachment,插入背景附件,background-attachment,背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。,基本语法：,background-attachment,：,scroll | fixed,语法说明：,scroll,表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；,fixed,表示背景图片固定在页面上不动，不随着滚动条的移动而移动。,background-repeat,设置重复背景图片,background-img,属性设置网页的背景图片重复显示方式。,基本语法：,background-repeat,：,repeat | repeat-x | repeat-y | no-repeat,语法说明：,repeat,表示背景图片在水平和垂直方向平铺，是默认值；,repeat-x,表示背景图片在水平方向平铺；,repeat-y,表示背景图片在垂直方向平铺；,no-repeat,表示背景图片不平铺。,background-position,设置背景图片位置,当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，所以通过,background-position,属性来改变图片的插入位置。,基本语法：,background-position,：百分比,|,长度,|,关键字,语法说明：,利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有,left,、,center,、,right,，关键字在垂直方向的主要有,top,、,center,、,bottom,。水平方向和垂直方向相互搭配使用。,三、,CSS,语法基础,盒子,的概念与使用,盒子模块,设置边界,设置元素边框,设置元素内边界,盒子模块,在,CSS,中，将样式调用在每一个元素上，都以一个假想的矩形格式模型看待,.,一般使用矩形模块的时候，搭配,margin,属性、,border,属性以及,padding,属性，可以更好的控制元素的样式。,设置边界,margin,的四个属性主要是控制元素边界与文件其他内容的空白距离，四个边界一般按顺时针方向上（,margin-top,）、右（,margin-right,）、下（,margin-bottom,）、左（,margin-left,）属性。四个边界的设置语法一样。,基本语法：,margin-(top,、,right,、,bottom,、,left):,长度单位,|,百分比单位,| auto,设置元素边框,border-style,边框样式属性,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,是一个复合属性，复合属性的值有四种设置方法，其他,4,个都是单个边框的样式属性，只能取一个值。样式值属性的具体说明见表,10-8,。,设置一个值：四条边框宽度均使用一个值。,设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。,设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。,设置四个值：四条边框宽度的调用顺序为上、右、下、左。,border-width,边框宽度属性,border-width,属性，是控制元素边框的宽度的一个综合属性，和,border-style,一样也有四种单独的设置方法，分别来定义四条边框的宽度，设置方法和边框样式一样。,基本语法：,border-width,边框宽度属性,语法说明：,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,中，,border,属性用来同时设置边框的样式、宽度和颜色，也可以另外对每个边界属性单独进行设置,基本语法：,border:,边框宽度,|,边框样式,|,边框颜色,border-top:,上边框宽度,|,上边框样式,|,上边框颜色,border-bottom:,下边框宽度,|,下边框样式,|,下边框颜色,border-left:,左边框宽度,|,左边框样式,|,左边框颜色,border-right:,右边框宽度,|,右边框样式,|,右边框颜色,语法说明：,每一个属性都是一个复合属性，都可以同时设置边框的样式、宽度和颜色，每个属性的值中间用空格隔开，在这,5,个属性中，只有,border,可以同时设置四条边框的属性，其他的只能设置单边框的属性。,设置元素内边界,元素内边界主要是指边框和内部元素之间的空白距离，利用,padding,属性设置元素内的边界时，也包括,5,个属性，同样也有四种设置方法。,基本语法：,padding:,长度,|,百分比,padding-top:,长度,|,百分比,padding-bottom:,长度,|,百分比,padding-left:,长度,|,百分比,padding-right:,长度,|,百分比,语法说明：,长度包括长度值和长度单位，百分比是相对于上级元素宽度的百分比，不允许用负数，,padding,作为复合属性的四种取值方法请参考边框样式的取值方法。,三、,CSS,语法基础,列表,列表,list-style-type,列表样式,list-style-image,图像列表,list-style-position,列表符号的缩进,三、,CSS,语法基础,列表,list-style-type,属性，可用于设置列表的符号或编号，此属性通常搭配,或,标记使用。,基本语法：,list-style-type:,属性值,三、,CSS,语法基础,列表,利用,css,还可以把列表的符号设置成喜欢的图片,基本语法：,list-style-image:url | none,语法说明：,url,是指定要载入的图片路径，在使用上与插入图片,的用法差不多；,none,表示不使用图片式的列表符号。,三、,CSS,语法基础,列表,list-style-position,列表符号缩进属性，主要是设置每个列表项目的符号或图片，是否向外凸出。,基本语法：,list -style-position:inside | outside,语法说明：,inside,表示列表符号不向外凸出，也可以理解成列表项上的第二行文字与列表符号对齐；,outside,表示列表符号向外凸出，也是默认值。,三、,CSS,语法基础,设置网页链接属性,设置伪类选择器得到不同的超链接属性,三、,CSS,语法基础,设置滚动条属性,利用,CSS,制作滚动条的颜色效果,三、,CSS,语法基础,设置光标属性,设置变化的光标图形,cursor:,属性值,四、,用,DIV+CSS,的方式来写,HTML,页面,一列居中样式,margin-right: auto;,margin-left: auto;,width: px;,两列并列样式,定义固定宽度、左对齐浮动,两列并列居中样式,用一个大容器容纳两个列，即以上两种技术的综合,三列并列样式,定义固定宽度、左对齐浮动,工字型布局,结合三列并列样式，版权区设定清除浮动,clear: both;,div,标记的使用,在写,HTML,文件时，要定义区域间不同样式时，可以使用,标记达到这个效果，除此以外，通过设置,的,z-index,属性还可以设置层次的效果。,基本语法：,div,标记的使用,语法说明：,用,style,来表示层的样式，因为如果没有定义层的样式的话，在浏览网页的时候是看不到效果的。其中：,position,属性主要是来定义层的定位方式；,left,和,top,是用来定位层的位置，与它并列的还有,right,和,bottom,，这四个属性主要是用来设置层的位置，分别表示对象与其他对象的左部、顶部、右部和底部的相对位置；,width,和,height,用来定义层的宽度和高度；,float,是层的浮动属性，用来设置层的浮动位置，当然这个属性不仅可以用在图像和表格上，还可以用到其他任何元素上；,clear,是层的清除属性，表示是否充许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素；,z-index,主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，相当于三维空间的,z,坐标，,z-index,越大，区域在堆中的位置就越高。,标记的使用,标记主要用来定义网页上的区域，通常用于比较大范围的设置，而,标记被用来组合文档中的行内元素。,基本语法：,或者,语法说明：,如果不对,span,应用样式，那么,span,元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。,与,的区别,基本上,与,标记在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。,区域内是否换行：,标记区域内的对象与区域外的上下文会自动换行，而,标记区域内的对象与区域外的对象不会自动换行。,标记相互包含：,与,标记可以同时在网页上使用，一般在使用上建议用,标记包含,标记；但,最好不包含,标记，否则会造成,标记的区域不完整，而形成断行的现象。,小实例,页面布局设计始终是网页设计中的一个核心问题，它包括技术和美学两个方面的问题，两者结合的非常紧密。页面布局的主要工具是,、,、,和,Flash,文件。,对于框架,，一般而言应尽量避免使用；,表格,作为可以在上面布置元素的二维网格，它的优点在于在所有浏览器中几乎都可以无差错的运行，而只有微不足道的差异，而且，对于像切割图像这样的问题可以非常容易的用表格实现；但是过度使用表格所带来的页面无序，会给后期的维护带来极大的困难；,技术虽然难以全部代替,，但是它的位置、尺寸、背景、边框等都可以很好的设计，更重要的是它所依赖的内容和样式分离的思想使得页面代码更为简洁，样式的更改更为方便。,五、,用,CSS,设置图像样式扮靓网页,为图像设置边框,border:,样式 颜色 宽度,;,样式：,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:absolute;,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:RevealTrans(Transition=,变化方式,duration=,秒数,),filter:light,五、,用,CSS,设置图像样式扮靓网页,通道（,alpha,）,设置透明度,filter: alpha(Opacity=,？, FinishOpacity=,？, Style=,？, StartX=,？, StartY=,？, FinishX=,？, FinishY=,？,),Opacity,：透明等级，,0,100,，,0,表示完全透明，,100,表示不透明；,FinishOpacity,：结束时的透明度，取值同上；,Style,：透明区域的形状特征,0,：统一形状,1,：线性,2,：放射性渐变,3,：矩形渐变,当,Style,为,2,或,3,时，,startX,等参数没有意义，都是以图片中心开始向四周结束,五、,用,CSS,设置图像样式扮靓网页,模糊（,blur,）,设置模糊度,filter:progid:DXImageTransform.Microsoft.blur(pixelradius=?,makeshadow=?),pixelradius,：设置模糊效果的作用深度；,makeshadow,：设置是否制作成阴影；,makeshadowopacity:,设置使用,makeshadow,制作成的阴影的透明度,.blur1,filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);,.blur2,filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=true,makeshadowopacity=10;);,五、,用,CSS,设置图像样式扮靓网页,运动模糊（,Motionblur,）,设置运动模糊度,filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=,？,direction=,？,add=,？,);,stregth,：设置模糊效果的作用深度，代表有多少像素受到模糊影响；,direction,：模糊方向，,0,度表示垂直向上，；,add:true|false,是否叠加原图；,.motionblur1,filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=false);,.motionblur2,filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=true);,五、,用,CSS,设置图像样式扮靓网页,阴影,shadow,在指定方向上建立物体的连续投影,filter:shadow(color=,？,direction=,？,);,dropshadow,下落阴影,filter:dropshadow(color=,？,offx=,？,offy=,？,positive=,？,),.shadow,filter:shadow(color=#CCCCFF,direction=135);,/*,阴影效果 *,/,.drop,filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);,/*,下落阴影 *,/,五、,用,CSS,设置图像样式扮靓网页,波形,filter:wave(add=?,freq=?, lightstrength=?, phase=?, strength=,？,),Add:1,显示原来对象，,0,不显示原来对象,Freq:,波形的频率，参数值,1100,，完整波纹的个数,Lightstrength,：波纹增光效果，参数值,1100,Phase:,正弦波开始的偏移量，数值,0100,，开始时偏移量占波长的百分比,Strength:,振幅的大小,.three,filter: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;/*,竖直翻转 *,/,filter:flipv fliph;/*,水平、竖直同时翻转 *,/,反色,filter:invert;/*,底片效果 *,/,X,光,filter:xray;/* X,光效果 *,/,浮雕纹理,filter:progid:DXImageTransform.microsoft.emboss(bias=,？,);,凹陷浮雕效果,filter:progid:DXImageTransform.microsoft.engrave(bias=,？,);,凸出浮雕效果,bias:,取值范围,-1,1,遮罩,filter:mask(color=,？,);/*,遮罩效果 *,/,图片淡入淡出,filter:BlendTrans(duration=,秒数,),五、,用,CSS,设置图像样式扮靓网页,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,时，返回,iname0,else i+; ,tp1.filters0.apply();/tp1,为图像的,name,，在,标记中定义,tp1.src=inamei;,tp1.filters0.play();,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.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);,img,filter:RevealTrans(Duration=3,Transition=23);,border:none;,play2();,灯光效果,filter:light;,AddAmbien:,加入包围的光源；,AddCone,：加入锥形光源；,AddPoint:,加入光源；,Changcolor,：改变光的颜色；,Changstrength:,改变光源的强度；,Clear:,清除所有的光源；,MoveLight:,移动光源,舞台灯光,探照灯,五、,用,CSS,设置图像样式扮靓网页,xml,引用,css,Html+xml+css,Html:,内容,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;i12;),title = nodes.item(0+i).text;,author = nodes.item(1+i).text;,email = nodes.item(2+i).text;,date = nodes.item(3+i).text;,i=i+4;,document.write(+title+author+email+date+);,document.write();,