第9章 CSS属性设置.ppt

1、第9章CSS属性设置,9.1设置字体样式9.2控制图文布局9.3颜色及背景9.4网页美化与超链接9.5CSS定位和CSS滤镜,9.1设置字体样式,9.1.1字体属性9.1.1.1font-family（字体系列）9.1.1.2font-size（字体大小）9.1.1.3font-style（文字风格）9.1.1.4font-variant（字形变体）9.1.1.5font-weight（字体粗细）9.1.1.6font（字体）9.1.2text-decoration（文字修饰）,9.1.1.1font-family（字体系列）,描述了用何种字体系列来显示文字，可以为文字指定一种或多种字体，属性

2、值为用逗号分隔的字体名称列表，如：pfont-family:“Arial,华文彩云,黑体,楷体浏览器会依次查找系统中是否安装此字体。若都未安装，则用系统的默认字体显示。,本节目录,9.1.1.2font-size（字体大小）,本属性允许我们定义字体的大小。例如Pfont-size:30ptPfont-size:200%Pfont-size:largePfont-size:largerPfont-size:+5ptCSS共支持用5种方式表示字体大小。分别是磅值、相对值、关键字、相对关键字和增大值。,本节目录,9.1.1.3font-style（文字风格）,使用本属性可以使文字产生斜体效果，属性的

3、值为italic或oblique。这两个值都能产生斜体，并且很难区分他们的差别，所以可以任选其一使用，例如Pfont-style:oblique若不想产生斜体效果，可以指定其值为默认值normal或干脆不使用本属性。,本节目录,9.1.1.4font-variant（字形变体）,本属性的默认值也是normal，表示不作变形，若指定其值为small-caps，则小写字母都变形为小的大写字母，如pfont-variant:small-capsabcABC效果如图,本节目录,9.1.1.5font-weight（字体粗细）,本属性可以控制字体的粗细（注意和大小是不同的概念），它的默认值也是norma

4、l。可以指定其值为100到900之间并且是100的倍数的数字，共9种不同的粗细。也可以使用关键字，其中normal对应400，bold对应700，bolder和lighter分别表示比当前的值增加或减少100。例如pfont-weight:boldpfont-weight:700,本节目录,9.1.1.6font（字体）,同时设置字体系列、字体粗细、字体大小和斜体等属性。要求按font-style、font-variant、font-weight、font-size、line-height和font-family的值的顺序书写，可以缺少其中的某些值，但剩下的值必须按要求的先后顺序排列。各属性值

5、之间以空格为分隔符，只有font-size和line-height的值之间以“/”分隔。font-family的值如果是含有多个字体系列的列表，则各系列之间以逗号分隔，如果单个系列名称中含有空格，则该系列要用双引号包括起来。,本节目录,9.1.2text-decoration（文字修饰）,本属性可以产生文本修饰效果，它的值是下列关键字的一个或多个：underline（下划线）、overline（上划线）、line-through（穿越线）、blink（闪烁）和none（无），例如ptext-decoration:underlineline-through它产生的效果是给文字加上下划线和穿越线，

6、如图所示,本节目录,9.2控制图文布局,9.2.1字间距与行间距9.2.2text-align（文字对齐）9.2.3text-indent（首行缩进）,9.2.1字间距与行间距,1.letter-spacing（字间距）本属性可以控制文字之间的间隔距离，它的值可以是默认关键字normal，表示使用正常的字符间距；也可以使用数值，它的单位是px（像素）。例如：pletter-spacing:15px2.line-height（行高或行间距）本属性定义了文本的最小行间距。通常浏览器将单行距离作为文本的行间距，我们可以通过line-height属性来增加行间距。本属性可以接受长度值、百分数或缩放系数

7、。例如：Pline-height:20ptPline-height:120%Pline-height:2.0,本节目录,9.2.2text-align（文字对齐）,本属性允许调整文本块（或）相对于页边的对齐方式，共有4个值，分别是left、right、center和justify。它们分别为左、右、中和两边对齐。例如：ptext-align:justify,本节目录,9.2.3text-indent（首行缩进）,本属性可以为一段文字设置首行缩进的效果，它的值为数值，单位是长度单位或百分数，表示首行的缩进量（用百分数时表示缩进量为当前字符宽度的多少倍），如：ptext-indent:20pt（缩

8、进20磅）ptext-indent:100%（缩进一个字符）,本节目录,9.3颜色及背景,9.3.1color（字体颜色属性）9.3.2background-color（背景颜色属性）9.3.3背景图片属性,9.3.1color（字体颜色属性）,本属性可设置标签内容的前景色。颜色的值可以是颜色名、十六进制RGB组合或十进制RGB组合。如对文字设置蓝色，下面的书写均为正确：pcolor:bluepcolor:#0000ffpcolor:rgb(0,0,255)pcolor:rgb(0,0,100%)当然不仅可以使用color属性设置文本的颜色，还可以设置其它标签中的非文本内容，例如水平分隔线等。

9、,本节目录,9.3.2background-color（背景颜色）,本属性用来控制元素的背景颜色，它的值也是颜色值，写法和color的值相同。虽然可以在中使用bgcolor来设置网页的背景颜色，但CSS中的background-color属性功能更为强大，它不仅可以设置页面的背景颜色，而且可以应用于任何元素（任何标签）。,本节目录,9.3.3背景图片属性,background-image（背景图像）本属性可以在元素内容后面放置一个图像。它的值可以是URL，也可以是默认关键字none。例如：bodybackground-image:url(bgimages/abc.gif)tdbackgroun

10、d-image:url(bgimages/abc.gif)background-attachment（背景附件）用本属性来设置图像的滚动方式。若使用默认值scroll，则背景图像随元素的移动而移动；若使用fixed值，则图像不移动。,本节目录,9.4网页美化与超链接,9.4.1设置滚动条属性9.4.2网页链接属性9.4.3边框属性,9.4.1设置滚动条属性,属性名含义scrollbar-3d-light-color滚动条亮边框颜色scrollbar-highlight-color滚动条3D界面的亮边颜色scrollbar-face-color滚动条3D表面的颜色scrollbar-arrow-

11、color滚动条方向箭头的颜色scrollbar-shadow-color滚动条3D界面的暗边颜色scrollbar-dark-shadow-color滚动条暗边框颜色scrollbar-base-color滚动条基准颜色,本节目录,9.4.2网页链接属性,在CSS中为超链接专门定义了伪类，允许为特定的标签状态定义显示样式。定义伪类的方法和常规类很相似，但有两点不同：一是连接符是冒号而不是句点号；二是它们有预先定义好的名称，而不能随便取名，三种状态的类名分别是:link（未访问）、:active（正在访问）和:visited（已访问）。另外还有一个伪类:hover，它的作用是控制当鼠标停留在元

12、素上时该元素和鼠标的显示样式。比如当鼠标停留在超链接上时鼠标变为手型而超链接加上下划线。,本节目录,9.4.3边框属性,9.4.3.1border-color（边框颜色）9.4.3.2border-width（边框宽度）9.4.3.3border-style（边框风格）9.4.3.4边框缩略属性,本节目录,9.4.3.1border-color（边框颜色）,本属性可以设置边框的颜色，属性的值为颜色值。本属性可以接受14个值。当颜色的值为一个的时候，边框的所有颜色都设置为指定颜色；当有两个值时，则上下边框为第一个值的颜色，左右边框为第二个值的颜色；当有三个值时，上边框为第一个值，左右边框为第二个

13、，下边框为第三个；若有四个值，则按上、右、下、左的顺时针顺序依次应用颜色。例如.b1border-color:redyellowblue该规则指定了标题的上边框为红色，左右边框为黄色，下边框则是蓝色。,本节目录,9.4.3.2border-width（边框宽度）,本属性允许改变边框的宽度，它同样允许接受14个长度值（包括百分数），按类似的方式应用于不同边框。本属性不仅接受长度值和百分数，还接受三个关键字，分别是thin（细）、medium（中）和thick（粗）。比如.b2border-width:1ptthick该规则定义了边框的上下边为1磅，左右边加粗。当然如果想直观地设置边框宽度可以使用

14、四个边的宽度属性：border-top-width、border-right-width、border-bottom-width和border-left-width（分别是上、右、下、左边框宽度）。,本节目录,9.4.3.3border-style（边框风格）,本属性用以设置边框线的样式，它可以接受9个关键字作为值，分别是：none（无边框）、dotted（小点）、dashed（虚线）、solid（实线）、double（双线）、groove（四进线）、ridge（凸线）、inset（使整个元素内凹）和outset（使整个元素外凸）。例如.b3border-style:outset;该规则能使元

15、素产生突出效果，如图所示：,本节目录,9.4.3.4边框缩略属性,CSS提供了5种边框缩略属性，border-top、border-bottom、border-left和border-right，分别只影响边框的一侧（而border属性则影响整个边框）。可以指定长度值、颜色值和线型关键字的一个或多个值赋予这些属性，顺序不限。比如.b4border-top:5ptreddashed.b5border:insetgreenb4就指定了上边框以5磅、红色和虚线显示，而b5则指定整个边框以内凹和绿色显示，宽度为默认值。,本节目录,9.5CSS定位和CSS滤镜,9.5.1CSS定位9.5.2CSS滤镜,

16、9.5.1CSS定位,9.5.1.1position（位置）9.5.1.2left、right、top、bottom9.5.1.3width、height9.5.1.4overflow（溢出）9.5.1.5z-index（z轴位置）,本节目录,9.5.1.1position（位置）,本属性指定了定位的方式，它有3个值，当值为static时，表示应用常规布局规则，由浏览器决定元素的位置，这也是本属性的默认值；当属性的值指定为relative（相对）时，以后所定义的元素位置都是相对位置，一旦浏览器改变窗口大小或其他元素的位置，所有元素都按相对位置重新排列，保持整体的一致性；当值设为absolute

17、（绝对）时，表示以后定义的元素位置都是绝对值，不管浏览器如何改变大小，绝对位置都保持不变。,本节目录,9.5.1.2left、right、top、bottom,这四个属性分别指定了元素的左、右、上、下的位置，它们的值可以是长度值或百分数，表示该元素离网页边界的偏移量。例如pposition:relative;left:10%该规则定义了文章段落离左边界的距离为网页宽度的10%，当我们改变浏览器窗口大小时，这个间距也会随之改变（因为使用了position:relative），一直保持在10%。,本节目录,9.5.1.3width、height,本属性通过宽度和高度定义了元素占有空间的大小，它的值

18、为长度值和百分数，例如imgposition:relative;width:20%;height:20%该规则指定了图像的高和宽都是网页高宽的20%。,本节目录,9.5.1.4overflow（溢出）,当设置元素的位置和占有空间时，难免会遇到元素本身大于指定空间的情况，这就是所谓的溢出。处理溢出是由overflow属性完成的，它有4个值：visible表示即使超出元素显示区域也要使其可见；hidden则强迫隐藏所有超出分配空间的内容；scroll会为元素创建滚动条，以浏览隐藏部分内容。但是即使内容没有超出规定范围，滚动条依然存在；设为auto时，滚动条仅会在需要的时候出现，浏览器会自动判断是否

19、需要滚动条。,本节目录,9.5.1.5z-index（z轴位置）,每个元素在浏览器中不仅有x和y轴的位置，还有z轴的位置，z轴位置越高则该元素越靠近浏览者，而其下的元素变的相对模糊。这就相当于将浏览器窗口理解为若干个透明的图层，所有元素都置于相应的图层上。本属性的值是自然数值，值越大则越靠近浏览者。,本节目录,9.5.2CSS滤镜,9.5.2.1alpha（透明度滤镜）9.5.2.2blur（模糊滤镜）9.5.2.3chroma（色度滤镜）9.5.2.4flipH、flipV（水平、垂直翻转滤镜）9.5.2.5glow（发光滤镜）9.5.2.6shadow、dropshadow（阴影滤镜）9.

20、5.2.7wave（波纹滤镜）,本节目录,9.5.2CSS滤镜,filter:滤镜名称(参数)可以同时定义多个滤镜，用空格分开。例：IMGfilter:alpha(opacity=80)flipv(),本节目录,9.5.2.1alpha（透明度滤镜）,alpha是来设置目标元素和背景混合度。它的变量的语法格式为：filter:alpha(opacity=值,finishopacity=值,style=值,startX=值,startY=值,finishX=值,finishY=值)opacity:代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。style：指定了透明区域

21、的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。finishopacity:是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。startX和startY:代表渐变透明效果的开始坐标:X,YfinishX和finishY:代表渐变透明效果的结束坐标:X,Y举例,9.5.2.2blur（模糊）,blur属性:可以达到模糊的效果，blur属性的语法格式为：filter:blur(add=值,direction,strength=值)add:有两个参数值：true和false。表示指定图片是否被改变成模糊效果。direction:用来设置模糊的

22、方向，模糊效果是按照顺时针方向进行的，其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。strength:只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。,举例,9.5.2.3chroma（色度）,chroma属性:可以使一个元素中指定的颜色为透明色，它的语法格式如下：filter:chroma(color=值)color:用color参数设置出来就可以了。它可以使文字、图像或其他多媒体内容中指定的颜色部分均变为透明。,本节目录,9.5.2.4flipH、flipV,flip属性:是CSS滤镜的翻转属性，flipH:代表水平翻转，flipV:代表垂直翻转。它们的语法格式很简单，分别是：filter：flipHfilter：flipV如：p.hfilter:flipH;font-size:20ptp.vfilter:flipV;font-size:20pt,本节目录,9.5.2.5glow（发光）,glow属性：当对一个元素使用“glow”属性后，这个元素的边缘就会产生类似发光的效果。它的语法格式如下：filter:glow(color=值,strength=值)colo