CSS入门教程

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,CSS,语言,http:/,/journal/,http:/,www.caopeng.org/html/css.htm,http:/,www.caopeng.org/html/seo.htm,http:/,www.caopeng.,com,CSS,简介,CSS,的英文全名为：,Cascading Style,Sheet（Cascade,层叠、级联；,Style,样式、风格；,Sheet,表格）,使用,CSS,可以方便的进行网站的管理，统一管理网站内的所有网页样式。,CSS,样式表能为我们做什么,?,它能帮你做以下事情,:,可以将格式和结构分离。,可以以前所未有的能力控制页面布局。,可以制作体积更小下载更快的网页。,可以将许多网页同时更新，比以前 更快更容易。,浏览器将成为你更友好的界面,第一章 课前须知,什么是,CSS,课前准备,HTML&CSS,CSS,规则解析,写,1stCSS,规则,嵌入式样式表,链接式样式表,引入式样式表,CSS,使用方法,直接定义标记的,STYLE,属性,定义内部样式表,嵌入外部样式表,连接外部样式表,CSS,使用方法,直接定义标记的,STYLE,属性,直接在,HTML,标记内容，插入,STYLE,属性，这是最简单直接的样式定义方法，但这种方法的适用范围小，没有发挥,CSS,的最大作用。,CSS,使用方法,定义内部样式表,在,HTML,文件的,HEAD,部分定义,STYLE,段，可以定义该文件的样式，这种方法比上一种方法稍强些，但还是没有发挥,CSS,的最大作用。,CSS,使用方法,隐藏标记，避免因浏览器不支持,CSS,语言而导致的错误。,选择符（,Selector）,指定使用该样式定义的,HTML,标记名称。还可以使用,CLASS,和,ID,增强控制范围。,样式属性定义样式的属性名称。如字体、背景等。,属性值设置样式属性的值,/*/注释符号,CSS,使用方法,CSS,使用方法,嵌入外部样式表,使用,IMPORT,语句,CSS,使用方法,连接外部样式表,这是最为常见也是最方便的,CSS,使用方法，可以轻松控制一个站点的网页样式。,第二章 常用选择符和属性,类别选择符,ID,选择符,群选择符,颜色,背景颜色,布局属性,边框,第二章 常用选择符和属性,边界距,填充,背景图片,背景重复,背景附着,背景定位,字体属性,字体风格,第二章 常用选择符和属性,字体粗细,字体大小,行间距,字体变量,文本缩进,文本对齐,文本装饰,文本变形,链接,CSS,基本语法,类别选择符让你对一个给定的类别应用,CSS,P.bold, font-weight: bold; ,这个段落应该是粗体,类的声明也可以无须相关的元素:,*.,note font-size: small ,其中“*”可以省略,CSS,基本语法,ID,选择符,ID,选择符,有点像类别选择符，只不过每一页只能用在一个元素上。,p,#bold, font-weight: bold; ,这个段落应该是粗体,CSS,基本语法,群选择符,可以同时为多个选择符应用同一套规则,P,，,h1,h2 text-,align:left,;,还可以在群选择符中参杂,ID,类别等,P.navigation,h1#titlefont-weight:bold;,颜色,/,背景颜色,方框属性,Border,边框,Margin,边界,Padding,补白,垂直方向的边界是有重叠的,Smaller=medium/1.2,http:/,www.caopeng.org/html/seo.htm,CSS,基本语法,伪类和伪元素,伪类,和,伪元素,是特殊的类和元素，能自动地被支持,CSS,的浏览器所识别。伪类区别开不同种类的元素(,例如,，,visited links(,已访问的连接)和,active links(,可激活连接)描述了两个定位锚(,anchors),的类型)。伪元素指元素的一部分，例如段落的第一个字母。,CSS,基本语法,伪类或伪元素规则的形式如,选择符:伪类 属性: 值 ,a:link, color: red,或,选择符:伪元素 属性: 值 ,P:first,-line font-variant: small-caps; font-weight: bold ,CSS,基本语法,链接伪类,link,普通链接,visited,已访问链接,hover,鼠标悬停链接,active,焦点链接,CSS,基本语法,首行伪元素,First-line,首行,伪元素可以用于任何,块级元素,(例如,P,、,H1,等等)。以下是一个,首行,伪元素的例子:,P:first,-line font-variant: small-caps; font-weight: bold ,CSS,基本语法,首个字母伪元素,First-letter,含有已指定值选择符的文本的首个字母会按照指定的值展示。一个,首个字母,伪元素可以用于任何,块级元素,。例如:,P:first,-letter font-size: 300%; float: left ,CSS,属性,字体属性,颜色及背景属性,文本属性,方框属性,分类属性,单位,滚动条,指针,滤镜,字体属性,字体,font-family,字体风格,font-style,字体变形,font-variant,字体加粗,font-weight,字体大小,font-size,字体属性(1),字体风格,语法:,font-style: ,允许值:,normal |,italic,|,oblique,初始值:,normal,适用于: 所有对象,字体风格,属性以三个方法的其中一个来定义显示的字体:,normal,(,普通)，,italic,(,斜体) 或,oblique,(,倾斜)。样式表的,字体风格,声明例子如下:,H1 font-style: oblique ,P font-style: normal ,字体属性(2),字体变形,语法:,font-variant: ,允许值:,normal | small-caps,初始值:,normal,适用于: 所有对象,字体变形,属性决定了字体的显示是,normal,(,普通) 还是,small-caps,(,小型大写字母)。当文字中所有字母都是大写的时候，小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的,CSS,将会支持附加的变形，如收缩、扩张、小写数码或其它自定义的变形。字体变形的定义例子如下:,SPAN font-variant: small-caps ,文本属性,文字间隔,word-spacing,字母间隔,letter-spacing,文字修饰,text-decoration,纵向排列,vertical-align,文本转换,text-transform,文本排列,text-align,文本缩进,text-indent,行高,line-height,颜色及背景属性,颜色,color,背景颜色,background-color,背景图象,background-image,背景重复,background-repeat,背景附件,background-attachment,背景位置,background-position,背景,background,方框属性(1),上边界,margin-top,右边界,margin-right,下边界,margin-bottom,左边界,margin-left,边界,margin,边界属性用一到四个值来设置元素的边界,。,如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。,方框属性(2),上补白,padding-top,右补白,padding-right,下补白,padding-bottom,左补白,padding-left,补白,padding,补白属性是,上补白,、,右补白,、下补白,和,左补白,属性的略写。一个元素的补白是,边框,和元素的内容之间的间隔的数值。可以给出从一到四的值，每个值可以是,长度,或,百分比,。百分比值参考上级元素的宽度。不能使用负值。如果四个值都给出了，它们分别应用于上、右、下和左补白。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。,方框属性(3),上边框宽度,border-top-width,右边框宽度,border-right-width,下边框宽度,border-bottom-width,左边框宽度,border-left-width,边框宽度,border-width,边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或,长度,。不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。,方框属性(3),边框颜色,border-color,边框颜色属性设置一个元素的,边框,颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。,方框属性(4),边框式样,语法:,border-style: ,允许值:,none | dotted | dashed | solid | double | groove | ridge | inset | outset1,4,初始值:,none,适用于:,所有对象,边框样式属性用于设置一个元素,边框,的样式。这个属性必须用于指定可见的边框。,可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。,方框属性(5),上边框,border-top,右边框,border-right,下边框,border-bottom,左边框,border-left,边框,border,边框属性是一个用于设置一个元素边框的,宽度,、,式样,和,颜色,的略写。,语法:,border: ,允许值:,|,|,初始值:,未定义,适用于:,所有对象,方框属性(6),宽度,width,高度,height,分类属性,显示,display,空白,white-space,目录样式类型,list-style-type,目录样式图象,list-style-image,目录样式位置,list-style-position,目录样式,list-style,显示,语法:,display: ,允许值:,block | inline | list-item | none,初始值:,block,适用于: 所有对象,显示属性,允许使用四个值中的一个来定义一个元素:,block,(,在元素的前和后都会有换行),inline,(,在元素的前和后都不会有换行),list-item,(,与,block,相同, 但增加了目录项标记),none,(,没有显示),每个元素都典型地由浏览器基于,HTML,规格建议的展示形式给出一个缺省的显示值。,显示属性,可能并不安全，因为它使用另外的不合适的格式显示元素。使用值,none,将关闭指定元素及其子元素的显示！,空白,语法:,white-space: ,允许值:,normal | pre |,nowrap,初始值:,normal,适用于: 块级元素,空白属性,将决定如何处理元素内的空格. 该属性的值取以下三个中的一个:,normal,(,将多个空格折叠成一个),pre,(,不折叠空格),nowrap,(,不允许换行，除非遇到,标记),单位1,长度单位,一个长度的值由可选的正号 + 或负号 - 、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如,，,1.3,em,就不是一个有效的长度的值，但,1.3,em,就是有效的。一个为零的长度不需要两个字母的单位声明。,无论是相对值还是绝对值长度，,CSS1,都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位:,em,(,em,，,元素的字体的高度),ex,(x-height，,字母 ,x,的高度),px,(,像素，相对于屏幕的分辨率),单位2,绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位:,in,(,英寸，1英寸=2.54厘米),cm,(,厘米，1厘米=10毫米),mm,(,毫米),pt,(,点，1点=1/72英寸),pc,(,帕，1帕=12点),滚动条属性,颜色,scrollbar-face-color,阴影颜色,scrollbar-shadow-color,边框颜色,scrollbar-highlight-color,3D,光影,scrollbar-3dlight-color,3D,阴影,scrollbar-,darkshadow,-color,滚动条轨道颜色,scrollbar-track-color,按钮指针颜色,scrollbar-arrow-color,滤镜,语法,filter:,滤镜1(参数1,参数2 .) 滤镜2(参数1,参数2 .),例,滤镜的种类,视觉滤镜(,Visual Filters):,视觉滤镜只可以达到静态的特效效果。只需在网页内使用,CSS,的定义语法，即可将此滤镜效果加到网页内。,转换滤镜(,Transition Filters):,转换滤镜是用于两画面进行转换式所使用的特效，将产生动态效果，除了在网页中使用,CSS,的定义语法外，还必须配合,Script,语言才能使用。,滤镜适用范围,BODY,BUTTON,DIV,IMG,INPUT,MARQUEE,SPAN,TABLE,TD,TEXTAREA,TFOOT,TH,THEAD,TR,视觉滤镜,Alpha,Blur,Chroma,DropShadow,FilpH,FlipV,Glow,Gray,Invert,Light,Mask,Shadow,Wave,Xray,ALPHA,滤镜,Opacity,开始透明度。值(0-100)。,FinishOpacity,终止透明度。值(0-100)。,Style,渐变形状。值(0:均匀;1:直线;2:圆形;3:矩形,),以下参数仅在,Style=1,时有效,StartX,渐变开始,X,坐标。值(0100)。,StartY,渐变开始,Y,坐标。值(0100)。,FinishX,渐变结束,X,坐标。值(0100)。,FinishY,渐变结束,Y,坐标。值(0100)。,BLUR,滤镜,Add,是否要显示原来的对象。值(0 不显示、1 显示,),Direction,模糊效果的方向。值(0-360),Strength,模糊效果强度。值(整数,),315,0,45,270,225,90,180,135,Chroma,滤镜,Color,指定,GIF,图片或块标记中要变为透明的颜色,例,style=“filter:chroma(#ceff9c)”,DropShadow,滤镜,Color,设置阴影颜色,Offx,阴影相对于原始对象的水平位置,Offy,阴影相对于原始对象的垂直位置,Positive,设置阴影的透明度,说明本滤镜只能在图片和块标记内使用，图片必须为,GIF,格式，同时背景必须透明,FlipH,/,FlipV,滤镜,这两个滤镜没有参数，使用方法如下,Style=“,filter:fliph,flipv,”,可以在图片和块标记上使用,Glow,滤镜,Color,设置边缘光晕颜色,Strength,设置边缘光晕强度大小。值(1-255),说明该滤镜可以在,GIF(,背景透明)和块标记上使用,Gray ,Invert,Xray,滤镜,语法：,filter:gray, ,filter:invert,filter:xray,Gray,滤镜是把一张图片变成灰度图；,Invert,滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；,Xray,滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“,X”,光片。,Light,滤镜,Light,滤镜,语法：,Filterlight,这个属性模拟光源的投射效果。一旦为对象定义了“,LIGHT,滤镜属性，那么就可以调用它的“方法(,Method),来设置或者改变属性。“,LIGHT,可用的方法有：,AddAmbient,加入包围的光源,AddCone,加入锥形光源,AddPoint,加入点光源,Changcolor,改变光的颜色,Changstrength,改变光源的强度,Clear,清除所有的光源,MoveLight,移动光源,Mask,滤镜,Mask,滤镜,语法：,filter:mask(color,=color),使用,MASK,属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。,Shadow,滤镜,Shadow,滤镜,语法：,filter:shadow(color,=,color,direction,=direction),利用“,Shadow”,属性可以在指定的方向建立物体的投影，,COLOR,是投影色，,DIRECTION,是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。,Wave,滤镜,Wave,滤镜 语法：,filter:wave(add,=,add,freq,=,freq,lightstrength,=,strength,phase,=,phase,strength,=strength)wave,属性把对象按垂直的波形样式打乱。默认是“,TRUE（,非0）”， “,ADD”,表示是否要把对象按照波形样式打乱，,“,FREQ”,是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹，,“,LIGHTSTRENGTH”,参数可以对于波纹增强光影的效果，范围0-100，,“,PHASE”,参数用来设置正弦波的偏移量。,“,STRENGTH”,代表振幅大小。,第三章,CSS,演示站二,文档二的使用,顶部风格,1,顶部风格,2,顶部风格,3,正文部分,1,正文部分,2,第三章,CSS,演示站二,侧边栏,1,侧边栏,2,侧边栏,3,侧边栏,4,底部风格,第四章 难点和其他,冲突与规则来源次序,冲突与,!IMPORTANT,冲突与具体性比较,1,（元素）,冲突与具体性比较,2(,元素和类别,),冲突与具体性比较,3(,元素和,ID),冲突与具体性比较,4,（,ID,与类别）,冲突与具体性比较,5,（在标记中施加,CSS,）,冲突与规则的来源,层叠顺序,!,important,规则可以用指定的,!,important,特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。,ID,属性,CLASS,属性,HTML,标记,最近原则,第四章 难点和其他,开发工具条,(,Firefox,浏览器扩展,),CSS,与媒体,