1、第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.54cmmm 毫米 pt 点(磅)，1pt=1/72inem 当前字体中m字母的宽度 pc 皮卡，1pc=12ptex 当前字体中x字母的宽度 px 像素,8.1 CSS属性单位,百分比单位：百分比值中有可选的“+”或“-”号，以“%”结束 ，“+”可省略，但不可以有空格。百分比值是一个相对值，总是相对
2、于其它值来说的。例如，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 fo
3、nt-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-si
4、ze(字体大小),该属性用于定义字体的大小。例如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: obliqu
5、e若不想产生斜体效果，可以取默认属性值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对应70
6、0，bolder和lighter分别表示比上一级元素中的字体的该值增加或减少100。例如：p font-weight: boldp font-weight: 700Q ：能否一次性简洁地设置出各种字体属性呢？,本节目录,8.2.1.6 font(字体),一次性设置前面介绍的各种字体属性。 各属性值之间以空格分隔，但font-size和line-height值之间以“/”分隔。 可以缺省某些值，但存在的值必须按font-style、font-variant、font-weight、font-size/line-height和font-family的顺序书写。 font-family的值包含多个字
7、体系列，则各系列之间以逗号分隔，如果某系列名称中含有空格，则它要用双引号括起来。,本节目录,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、首行缩进) 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%
9、 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; /图片顶端与当前行文本对齐 im
10、g 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(字母小写)，默
11、认值为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)
12、;p color: rgb(0,0,100%);不仅可以使用color属性设置文本的颜色，还可以设置其它标签中的非文本内容的颜色，例如水平分隔线等。,本节目录,8.4.2 background-color(背景颜色),该属性用来指定网页元素的背景颜色，它的值也是颜色值，写法和color的值相同。虽然可以在中使用bgcolor来设置网页的背景颜色，但CSS中的background-color属性功能更为强大，它不仅能设置网页的背景颜色，而且能应用于任何元素(任何标签)。,本节目录,8.4.3 背景图片属性,background-image(背景图像)该属性用于指定网页元素的背景图像。它的值可以是
13、背景图像的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
14、-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 (背景属性)用于一次性设置上述各
15、种背景属性的属性，这是一个组合属性。各属性次序任意，若不指定，则接受初始值。例如： 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
16、-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属性控制某元素旁边是否允许其它元素
17、漂浮，取值为none、left、right和both，默认值为none，表示允许漂浮元素在它旁边。left禁止左边出现漂浮元素，right禁止右边出现漂浮元素，both禁止左右两边出现漂浮元素。,本节目录,8.5.2 网页链接属性,在CSS中为超链接专门定义了伪类，允许为特定的链接状态定义显示样式。定义伪类的方法和常规类很相似，只有两点不同：一是连接符是冒号而不是句点号；二是它们有预先定义好的名称，而不能随便取名，这三个伪类名分别是:link(未访问)、:active (正在访问) 和:visited (已访问)。另外还有一个伪类:hover，它的作用是控制当鼠标停留在元素上时该元素和鼠标的显
18、示样式。比如当鼠标停留在超链接上时鼠标变为手型而超链接加上下划线。,本节目录,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个边框都采用指定的颜色；若指定两个值，则上下边框为第一种颜色，左右边框为第二种颜色；若指定三个值，上
19、边框为第一种颜色，左右边框为第二种，下边框为第三种；若有四个值，则按上、右、下、左的顺序依次应用颜色。例如.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个长度值，按类似颜色的方式应用于不同边框。它不仅接受长度值和百分数，还接
20、受三个关键字，分别是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(双线
21、)、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-t
22、op: 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
23、-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(列表类型属性
24、)用来设置项目符号和编号的样式。其取值如下表所示。 属性值 说明 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(项目符号位置属性)用来设置列表元素标记相对于列表中其它文本的位置，
25、其取值为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 箭头朝
26、下 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
27、.1.5 z-index(z轴位置),本节目录,8.6.1.1 position(位置),该属性指定了定位的方式，它有3个值，static为默认值，表示元素按照HTML格式规则正常定位，由浏览器决定元素的位置；当属性值为relative时，所定义的元素位置是相对位置，一旦改变浏览器窗口大小或其它元素的位置，所有元素都按相对位置重新排列，保持整体的一致性；当值设为absolute时，表示定义的元素位置是绝对位置，不管浏览器如何改变大小，绝对位置都保持不变。,本节目录,8.6.1.2 left、right、top、bottom,这四个属性分别指定了元素的左、右、上、下的位置，它们的值可以是长度值或
28、百分数，表示该元素离网页边界或前一元素末端的偏移量。例如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 overf
29、low(溢出),当设置元素的位置和大小时，难免会遇到元素本身大于指定空间的情况，这就是所谓的溢出。处理溢出是由overflow属性完成的，它有4个值：visible表示即使超出元素显示区域也要使其可见；hidden则强迫隐藏所有超出分配空间的内容；scroll会为元素创建滚动条，以浏览隐藏部分内容。但是即使内容没有超出规定范围，滚动条依然存在；设为auto时，滚动条仅会在需要的时候出现，浏览器会自动判断是否需要滚动条。,本节目录,8.6.1.5 z-index(z轴位置),每个元素在浏览器中不仅有x和y轴位置，还有z轴位置，z轴位置越高则该元素越靠近浏览者，而其下的元素变得相对模糊，用来解决元
30、素的重叠问题。这就相当于将浏览器窗口理解为若干个透明的图层，所有元素都置于相应的图层上。该属性值是大于-1的自然数，值越大则越靠近浏览者，-1表示在最底层。,本节目录,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是用来设置透明度的。
31、它的语法格式为：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代表渐变透明效果的结束坐标。
32、,本节目录,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可以使一个元素中指定的颜色为透明色，语法格式如下：Fil
33、ter:Chroma(color=值)该规则表达式很简单，它只有一个参数。只需把想要指定为透明的颜色用color参数设置出来即可。,本节目录,8.6.2.4 FlipH、FlipV,Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的语法格式很简单，分别是：Filter：FlipHFilter：FlipV 如：p.hfilter:fliph; font-size:20pt p.vfilter:flipv; font-size:20pt,本节目录,8.6.2.5 Glow(发光),当对一个元素使用“Glow”属性后，这个元素的边缘就会产生类似发光的效果。它的语法
34、格式如下： 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参数用来指定投影的方向。DropS
35、hadow属性一共有四个参数： 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参数指定波纹的频率，指定在元素上共需要产生多少个完整的
36、波纹；LightStrength参数使波纹有增强光影的效果。取0100；Phase参数设置正弦波开始的偏移量。常用值为0，其范围为从0100，代表开始时的偏移量占波长的百分比；Strength设置振幅的大小。,本节目录,8.6.2.8 其它滤镜,gray属性将图片变成灰度图。语法格式为：filter:grayxray属性设置X光效果。语法格式为： filter:xrayinvert属性用于翻转可视化对象的色彩、饱和度和亮度，创建底片效果。语法格式为： filter:invertmask属性为对象建立一个覆盖于表面的膜，就好比戴着有色眼镜看物体一样。语法格式为： filter:mask(color=膜颜色),本节目录,
