第8部分 CSS属性设置.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,8,部分,CSS,属性,8.1 CSS,属性单位,8.2,设置字体样式,8.3,控制图文布局,8.4,颜色及背景,8.5,网页美化与超链接,8.6 CSS,定位和,CSS,滤镜,8.1 CSS,属性单位,长度单位：,CSS,中用于描述长度的单位如下表所示。,符号 意义 符号 意义,cm,厘米,in,英寸，,1in=2.54cm,mm,毫米,pt,点,(,磅,),，,1pt=1/72in,em,当前字体中,m,字母的宽度,pc,皮卡，,1pc=12pt,ex,当前字体中,x,字母的宽度,px,像素,8.1 CSS,属性单位,百分比单位：百分比值中有可选的“,+”,或,“,-”,号，以“,%”,结束,，“,+”,可省略，但不可以有空格。,百分比值是一个相对值，总是相对于其它值来说的。例如，,P line-height:150%;,，表示段落中文字的高度为标准行高的,1.5,倍。,8.1 CSS,属性单位,颜色,(,值,/,单位,),：有颜色名、十六进制、十进制和百分比四种颜色定义法。,颜色名称。例如,red,、,blue,等。,十六进制。格式为,#,rrggbb,，如,#995522,。,十进制。格式为,rgb(x,y,z,),，,x,、,y,、,z,为,0255,间的整数，例如,rgb(255,0,0),。,百分比。格式为,rgb(x%,y%,z,%),，,x,、,y,、,z,为,0100,间的整数，例如,rgb(100%,0%,0%),。,8.2,设置字体样式,8.2.1,字体属性,8.2.1.1 font-family(,字体系列,),8.2.1.2 font-size(,字体大小,),8.2.1.3 font-style(,文字风格,),8.2.1.4 font-variant(,字形变体,),8.2.1.5 font-weight(,字体粗细,),8.2.1.6 font(,字体,),8.2.2 text-decoration(,文字修饰,),8.2.1.1 font-family(,字体系列,),用于设置用何种字体系列来显示文字，可以为文字指定一种或多种字体，属性值是用逗号分隔的字体名称列表，如：,p font-family:Arial,华文彩云,黑体,楷体,浏览器会由前向后依次查找系统是否安装此字体。若都未安装，则用默认字体显示。,本节目录,8.2.1.2 font-size(,字体大小,),该属性用于定义字体的大小。例如,P font-size:30pt;,P font-size:200%;,P font-size:large;,P font-size:larger;,P font-size:+5pt;,CSS,共支持用,5,种方式表示字体大小。分别是长度,(,磅,),值、百分比值,(,相对默认字体,),、绝对大小、相对大小,(,相对上一元素,),和增大值。,本节目录,8.2.1.3 font-style(,文字风格,),使用该属性可以使文字产生斜体效果，属性值为,italic(,斜体,),或,oblique(,倾斜,),时，都能产生斜体，很难区分其差别，可任选其一，例如,P font-style:oblique,若不想产生斜体效果，可以取默认属性值,normal,，或干脆不使用本属性。,本节目录,8.2.1.4 font-variant(,字体变形,),此属性的默认值也是,normal,，表示不作变形，若指定其值为,small-caps,，则小写字母都变形为小型的大写字母，如,p font-variant:small-caps,abcABC,效果如图,本节目录,8.2.1.5 font-weight(,字体粗细,),本属性用于控制字体的粗细,(,注意和大小相区别,),，默认值也是,normal,。可指定其值为,100900,之间并且是,100,的倍数的数字，共,9,种不同的粗细。也可以使用关键字，其中,normal,对应,400,，,bold,对应,700,，,bolder,和,lighter,分别表示比上一级元素中的字体的该值增加或减少,100,。例如：,p font-weight:bold,p font-weight:700,Q,：能否一次性简洁地设置出各种字体属性呢？,本节目录,8.2.1.6 font(,字体,),一次性设置前面介绍的各种字体属性。,各属性值之间以空格分隔，但,font-size,和,line-height,值之间以“,/”,分隔。,可以缺省某些值，但存在的值必须按,font-style,、,font-variant,、,font-weight,、,font-size/line-height,和,font-family,的顺序书写。,font-family,的值包含多个字体系列，则各系列之间以逗号分隔，如果某系列名称中含有空格，则它要用双引号括起来。,本节目录,8.2.2 text-decoration(,文字修饰,),该属性可以对文本设置各种修饰效果，其取值为：,underline(,下划线,),、,overline,(,上划线,),、,line-through(,删除线,),、,blink(,闪烁,),和,none(,无,),中的一个或多个，例如：,p text-decoration:underline line-through;,它产生的效果是给文字加上下划线和穿越线，如图所示,本节目录,8.3,控制图文布局,8.3.1,字间距与行间距,8.3.2,文字对齐,8.3.3 text-indent(,首行缩进,),8.3.4 text-transform(,文本转换,),8.3.1,字间距与行间距,letter-spacing(,字符间距,),该属性用于控制字符之间的距离，其默认值为,normal,，即标准间距；也可使用具体长度值,(,可取负值,),。例如：,p letter-spacing:15px;,word-spacing(,词,字,间距,),：可控制文本中单词,(,字,),间的距离。,line-height(,行高或行间距,),该属性定义了文本的行间距。通常浏览器以单行距离作为文本的行间距，通过该属性来增加行间距。它可接受长度值、百分数或缩放系数。例如：,P line-height:20pt,P line-height:120%,P line-height:2.0,本节目录,8.3.2,文字对齐,text-align,属性用于控制标签中文本的水平对齐方式，共有,4,个值：,left,、,right,、,center,和,justify,，分别为左、右、中和两边对齐，默认为,left,。例如：,p text-align:justify,vertical-align,属性用来设置标签内容的垂直对齐方式，可取值为：,baseline,、,sub,、,super,、,top,、,text-top,、,middle,、,bottom,、,text-bottom,、百分比，默认值为,baseline,。如：,img,vertical-,align:top,;/,图片顶端与当前行文本对齐,img,vertical-,align:middle,;/,图片中线与当前行文本对齐,本节目录,8.3.3 text-indent(,首行缩进,),该属性可以为一段文字设置首行缩进的效果，可以取长度值或百分比值，表示首行的缩进量，,0,为默认值，表示无缩进。如：,p text-indent:20pt;/,缩进,20,磅,p text-indent:100%;/,缩进一行只留一个字符,本节目录,8.3.4 text-transform(,文本转换,),该属性用来设置文本格式的转换，其可能取值为：,none(,无文本转换,),、,capitalize(,首字母大写,),、,uppercase(,字母大写,),、,lowercase(,字母小写,),，默认值为,none,。如：,p text-transform:capitalize;,p text-transform:uppercase;,本节目录,8.4,颜色及背景,8.4.1 color(,字体颜色属性,),8.4.2 background-color(,背景颜色属性,),8.4.3,背景图片属性,8.4.4 background(,背景属性,),8.4.1 color(,字体颜色属性,),该属性设置标签内容的前景色。颜色的值可以是颜色名称、十六进制、十进制,RGB,组合或百分比,RGB,组合。例如，将文字设置为蓝色：,p color:blue;,p color:#0000ff;,p color:rgb(0,0,255);,p color:rgb(0,0,100%);,不仅可以使用,color,属性设置文本的颜色，还可以设置其它标签中的非文本内容的颜色，例如水平分隔线,等。,本节目录,8.4.2 background-color(,背景颜色,),该属性用来指定网页元素的背景颜色，它的值也是颜色值，写法和,color,的值相同。,虽然可以在,中使用,bgcolor,来设置网页的背景颜色，但,CSS,中的,background-color,属性功能更为强大，它不仅能设置网页的背景颜色，而且能应用于任何元素,(,任何标签,),。,本节目录,8.4.3,背景图片属性,background-image(,背景图像,),该属性用于指定网页元素的背景图像。它的值可以是背景图像的,URL,，也可以是默认关键字,none,。,例如：,body background-image:,url(images/abc.gif,);,background-attachment(,背景附件,),用该属性设置图像的滚动方式。若使用默认值,scroll,，则背景图像随元素移动而移动；若使用,fixed,值，则图像不移动。,例如：,td,background:url(images/abc.gif,);background-attachment:fixed;,本节目录,8.4.3,背景图片属性,background-repeat(,背景重复,),用于指定背景图案如何被重复显示。它的取值为：,repeat,、,repeat-x,、,repeat-y,、,no-repeat,，默认值是,repeat,。例如：,body,background:white,url(images/abc.gif,);,background-,repeat:repeat-y,;,background-position(,背景位置,),用该属性设置图像的初始位置，只能应用于块级元素和替换元素,(,包括,img,、,input,、,textarea,、,select,和,object),。关键字有,X,向的,left,、,center,、,right,，,Y,向的,top,、,center,、,bottom,。,本节目录,8.4.4 background(,背景属性,),background(,背景属性,),用于一次性设置上述各种背景属性的属性，这是一个组合属性。各属性次序任意，若不指定，则接受初始值。例如：,body,background:white,url(images/abc.gif,)repeat-y;,本节目录,8.5,网页美化与超链接,8.5.1,浮动属性,8.5.2,网页链接属性,8.5.3,边框属性,8.5.4,列表属性,8.5.5,鼠标属性,8.5.1,设置滚动条属性,属性名 含义,scrollbar-3d-light-color,滚动条,3D,界面的亮边框颜色,scrollbar-highlight-color,滚动条亮边颜色,scrollbar-face-color,滚动条,3D,表面的颜色,scrollbar-arrow-color,滚动条方向箭头的颜色,scrollbar-shadow-color,滚动条,3D,界面的暗边颜色,scrollbar-dark-shadow-color,滚动条暗边框颜色,scrollbar-base-color,滚动条基准颜色,本节目录,8.5.1,浮动属性,CSS,提供,float,和,clear,两种浮动属性，使设计者能够将文本环绕在一个元素的周围。,float,属性控制元素的内容浮动到页面的左边缘或右边缘，其可取值为：,left,、,right,和,none,。默认值为,none,，表示不浮动。,left,表示元素浮动到左边缘，,right,表示元素浮动到右边缘。,clear,属性控制某元素旁边是否允许其它元素漂浮，取值为,none,、,left,、,right,和,both,，默认值为,none,，表示允许漂浮元素在它旁边。,left,禁止左边出现漂浮元素，,right,禁止右边出现漂浮元素，,both,禁止左右两边出现漂浮元素。,本节目录,8.5.2,网页链接属性,在,CSS,中为超链接专门定义了伪类，允许为特定的链接状态定义显示样式。,定义伪类的方法和常规类很相似，只有两点不同：一是连接符是冒号而不是句点号；二是它们有预先定义好的名称，而不能随便取名，这三个伪类名分别是,:link(,未访问,),、,:active(,正在访问,),和,:visited(,已访问,),。,另外还有一个伪类,:hover,，它的作用是控制当鼠标停留在元素上时该元素和鼠标的显示样式。比如当鼠标停留在超链接上时鼠标变为手型而超链接加上下划线。,本节目录,8.5.3,边框属性,8.5.3.1 border-color(,边框颜色,),8.5.3.2 border-width(,边框宽度,),8.5.3.3 border-style(,边框风格,),8.5.3.4,边框缩略属性,8.5.3.5 margin(,边界属性,),8.5.3.6 padding(,填充属性,),本节目录,8.5.3.1 border-color(,边框颜色,),该属性可以设置边框的颜色，可以接受,14,个值。若仅指定一个值，,4,个边框都采用指定的颜色；若指定两个值，则上下边框为第一种颜色，左右边框为第二种颜色；若指定三个值，上边框为第一种颜色，左右边框为第二种，下边框为第三种；若有四个值，则按上、右、下、左的顺序依次应用颜色。例如,.b1 border-color:red yellow blue,该规则指定了标题的上边框为红色，左右边框为黄色，下边框则是蓝色。,用,border-left-color,，,border-right-color,，,border-top-color,，,border-bottom-color,分别直观地设置左右上下四边的颜色。,本节目录,8.5.3.2 border-width(,边框宽度,),该属性允许改变边框的宽度，它也允许接受,14,个长度值，按类似颜色的方式应用于不同边框。它不仅接受长度值和百分数，还接受三个关键字，分别是,thin(,细,),、,medium(,中,),和,thick(,粗,),。比如,.b2 border-width:1pt thick,该规则定义了边框的上下边为,1,磅，左右边加粗。当然如果想直观地设置边框宽度可以使用,border-top-width,、,border-right-width,、,border-bottom-width,和,border-left-width,（分别是上、右、下、左边框宽度）。,本节目录,8.5.3.3 border-style(,边框风格,),该属性用以设置边框线的样式，可取,none(,无边框,),、,dotted(,小点,),、,dashed(,虚线,),、,solid(,实线,),、,double(,双线,),、,groove(,四进线,),、,ridge(,凸线,),、,inset(,元素内凹,),和,outset(,元素外凸,)9,个值，默认值为,none,。例如,.b3border-style:outset;,该规则能使元素产生突出效果，,如图所示：,与边框宽度一样可以使用四个边框风格属性来设置四边风格。,本节目录,8.5.3.4,边框缩略属性,CSS,提供了,5,种边框缩略属性：,border-top,、,border-bottom,、,border-left,和,border-right,，分别只影响边框的一侧，,border,属性则影响整个边框。可以指定长度值、颜色值和线型关键字的一个或多个值赋予这些属性，顺序不限。比如,.b4 border-top:5pt red dashed;,.b5 border:inset green;,b4,就指定了上边框以,5,磅、红色和虚线显示，而,b5,则指定整个边框以内凹和绿色显示，宽度为默认值。,本节目录,8.5.3.5 margin(,边界属性,),该属性允许改变元素边界的宽度，可接受,14,个长度值，按类似颜色的方式应用于不同边界。它不仅接受长度值和百分数，还接受关键字,auto,。允许取负值。比如,.m2 margin:1pt auto;,该规则定义了上下边界宽度为,1,磅，左右边界宽度自动取值。当然可以使用四个边界宽度属性：,margin-top,、,margin-right,、,margin-bottom,和,margin-left,，分别直观地设置上、右、下、左边界宽度。,本节目录,8.5.3.6 padding(,填充属性,),该属性允许改变元素填充区的宽度，接受,14,个长度值，按类似颜色的方式应用于不同填充区。它接受长度值和百分数，不可以取负值。比如,.m3 padding:3pt;,该规则定义了上下左右四个填充区的宽度都为,3,磅。当然也可以使用,padding-top,、,padding-right,、,padding-bottom,和,padding-left,分别直观地设置上、右、下、左填充区宽度。,本节目录,8.5.4,列表属性,列表属性是用来设置有序和无序列表相关特性的一组属性。,list-style-type(,列表类型属性,),用来设置项目符号和编号的样式。其取值如下表所示。,属性值 说明,disc,默认值，实心黑点,circle,空心圆圈,square,方形黑块,decimal,十进制数,(1,2,3),lower-roman,小写罗马数字,upper-roman,大写罗马数字,lower-alpha,小写字母,upper-alpha,大写字母,none,无样式,本节目录,8.5.4,列表属性,list-style-image(,项目符号图片属性,),用来把图片设置为项目的符号。其取值为,none,或要指定图片的,URL,。,list-style-position(,项目符号位置属性,),用来设置列表元素标记相对于列表中其它文本的位置，其取值为,inside,或,outside,。,Outside,为默认值，标记出现在所有列表元素的外部；若值为,inside,，则标记出现在所有列表元素的内部。,list-style(,列表属性,),不限顺序的一次性设置上述,3,个属性值，,list-style-image,与,list-style-type,同时出现，前者优先，只有当浏览器不能显示图片时,list-style-type,才生效。,本节目录,8.5.5,鼠标属性,cursor(,鼠标属性,),设置鼠标的不同形状,其取值如下表所示。,属性值 说明 属性值 说明,auto,自动变形,n-resize,箭头朝上,crosshair,精确定位“十”字,s-resize,箭头朝下,default,默认指针,w-resize,箭头朝左,hand,手型,e-resize,箭头朝右,move,移动,ne,-resize,箭头朝右上,text,文本,型,nw,-resize,箭头朝左上,wait,等待,se-resize,箭头朝右下,help,求助,sw,-resize,箭头朝左下,本节目录,8.6 CSS,定位和,CSS,滤镜,8.6.1 CSS,定位,8.6.2 CSS,滤镜,8.6.1 CSS,定位,8.6.1.1 position(,位置,),8.6.1.2 left,、,right,、,top,、,bottom,8.6.1.3 width,、,height,8.6.1.4 overflow(,溢出,),8.6.1.5,z-index(z,轴位置,),本节目录,8.6.1.1 position(,位置,),该属性指定了定位的方式，它有,3,个值，,static,为默认值，表示元素按照,HTML,格式规则正常定位，由浏览器决定元素的位置；,当属性值为,relative,时，所定义的元素位置是相对位置，一旦改变浏览器窗口大小或其它元素的位置，所有元素都按相对位置重新排列，保持整体的一致性；,当值设为,absolute,时，表示定义的元素位置是绝对位置，不管浏览器如何改变大小，绝对位置都保持不变。,本节目录,8.6.1.2 left,、,right,、,top,、,bottom,这四个属性分别指定了元素的左、右、上、下的位置，它们的值可以是长度值或百分数，表示该元素离网页边界或前一元素末端的偏移量。例如,p position:relative;left:10%;,该规则定义了文章段落离左边界的距离为网页宽度的,10%,，当我们改变浏览器窗口大小时，这个间距也会随之改变,(,因为使用了,position:relative),，一直保持在,10%,。,本节目录,8.6.1.3 width,、,height,通过宽度和高度这两个属性定义了元素占有空间的大小，它的值为长度值和百分数，例如,img,position:relative;width:20%;height:20%,该规则指定了图像的高和宽都是网页高宽的,20%,。,本节目录,8.6.1.4 overflow(,溢出,),当设置元素的位置和大小时，难免会遇到元素本身大于指定空间的情况，这就是所谓的溢出。,处理溢出是由,overflow,属性完成的，它有,4,个值：,visible,表示即使超出元素显示区域也要使其可见；,hidden,则强迫隐藏所有超出分配空间的内容；,scroll,会为元素创建滚动条，以浏览隐藏部分内容。但是即使内容没有超出规定范围，滚动条依然存在；,设为,auto,时，滚动条仅会在需要的时候出现，浏览器会自动判断是否需要滚动条。,本节目录,8.6.1.5,z-index(z,轴位置,),每个元素在浏览器中不仅有,x,和,y,轴位置，还有,z,轴位置，,z,轴位置越高则该元素越靠近浏览者，而其下的元素变得相对模糊，用来解决元素的重叠问题。,这就相当于将浏览器窗口理解为若干个透明的图层，所有元素都置于相应的图层上。该属性值是大于,-1,的自然数，值越大则越靠近浏览者，,-1,表示在最底层。,本节目录,z,y,x,8.6.2 CSS,滤镜,8.6.2.1 Alpha(,透明度滤镜,),8.6.2.2 blur(,模糊,),8.6.2.3,Chroma,(,色度,),8.6.2.4,FlipH,、,FlipV,(,水平、垂直翻转,),8.6.2.5 Glow(,发光,),8.6.2.6 Shadow,、,DropShadow,(,阴影,),8.6.2.7 Wave(,波纹,),8.6.2.8,其它滤镜,本节目录,8.6.2.1 Alpha(,透明度滤镜,),alpha,是用来设置透明度的。它的语法格式为：,filter:alpha(opacity,=,值,finishopacity,=,值,style=,值,startX,=,值,startY,=,值,finishX,=,值,finishY,=,值,),其中,opacity,代表透明度等级，可选值从,0100,，,0,代表完全透明，,100,代表完全不透明。,style,参数指定了透明区域的形状特征，,0,代表统一形状；,1,代表线形；,2,代表放射状；,3,代表长方形。,finishopacity,是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从,0,到,100,。,startX,和,startY,代表渐变透明效果的开始坐标，,finishX,和,finishY,代表渐变透明效果的结束坐标。,本节目录,8.6.2.2 blur(,模糊,),Blur,滤镜用于产生模糊效果，其语法格式为：,filter:blur(add,=,值,direction,strength,=,值,),add,参数有两个可选值：,true,和,false,。表示指定图片是否被改变成模糊效果。,direction,参数用来设置模糊的方向，模糊效果是按照顺时针方向进行的，其中,0,度代表垂直向上，每,45,度一个单位，默认值是向左的,270,度。,strength,参数值只能取整数，它代表有多少像素的宽度将受到模糊影响。默认值是,5,像素。,本节目录,8.6.2.3,Chroma,(,色度,),Chroma,可以使一个元素中指定的颜色为透明色，语法格式如下：,Filter:Chroma(color,=,值,),该规则表达式很简单，它只有一个参数。只需把想要指定为透明的颜色用,color,参数设置出来即可。,本节目录,8.6.2.4,FlipH,、,FlipV,Flip,是,CSS,滤镜的翻转属性，,FlipH,代表水平翻转，,FlipV,代表垂直翻转。它们的语法格式很简单，分别是：,Filter,：,FlipH,Filter,：,FlipV,如：,p.hfilter:fliph,;font-size:20pt,p.vfilter:flipv,;font-size:20pt,本节目录,8.6.2.5 Glow(,发光,),当对一个元素使用“,Glow”,属性后，这个元素的边缘就会产生类似发光的效果。它的语法格式如下：,Filter:Glow(Color,=,值,Strength=,值,),Glow,属性的参数只有两个：,Color,指定发光的颜色，,Strength,指定发光的强度，值从,1,到,255,。,本节目录,8.6.2.6 Shadow,、,DropShadow,这两个属性都能使元素产生阴影效果，其规则表达式略有不同，格式分别如下：,Filter:Shadow(Color,=,值，,Direction=,值,),Filter:DropShadow(Color,=,值,Offx,=,值,Offy,=,值,Positive=,值,),Shadow,有两个参数值：,Color,参数用来指定投影的颜色；,Direction,参数用来指定投影的方向。,DropShadow,属性一共有四个参数：,Color,代表投射阴影的颜色。,Offx,和,Offy,分别为,X,方向和,Y,方向阴影的偏移量。,Positive,参数有两个值：,True,为任何非透明像素建立可见的投影，,False,为透明的像素部分建立可见的投影。,本节目录,8.6.2.7 Wave(,波纹,),Wave,属性用来设置图形或文字的波纹效果。其语法格式为：,Filter:Wave(Add,=,布尔值,Freq=,频率,LightStrength,=,增强光,Phase=,偏移量,Strength=,振幅,),Add,参数有两个值，,True,代表显示原有元素；,False,不显示原有元素；,Freq,参数指定波纹的频率，指定在元素上共需要产生多少个完整的波纹；,LightStrength,参数使波纹有增强光影的效果。取,0100,；,Phase,参数设置正弦波开始的偏移量。常用值为,0,，其范围为从,0100,，代表开始时的偏移量占波长的百分比；,Strength,设置振幅的大小。,本节目录,8.6.2.8,其它滤镜,gray,属性将图片变成灰度图。语法格式为：,filter:gray,xray,属性设置,X,光效果。语法格式为：,filter:xray,invert,属性用于翻转可视化对象的色彩、饱和度和亮度，创建底片效果。语法格式为：,filter:invert,mask,属性为对象建立一个覆盖于表面的膜，就好比戴着有色眼镜看物体一样。语法格式为：,filter:mask(color,=,膜颜色,),本节目录,