网页设计课件ch11CSS的属性072

1、第第1111章章 csscss的属性的属性 11.1 11.1 设置字体样式设置字体样式 11.2 11.2 控制图文布局控制图文布局 11.3 11.3 颜色及背景颜色及背景 11.4 11.4 美化网页与超链接的设置美化网页与超链接的设置 11.5 css11.5 css定位定位 11.1 11.1 设置字体样式设置字体样式 11.1.1 11.1.1 字体属性字体属性font-familyfont-family利用利用css的的font-family属性，设置要使用的属性，设置要使用的字体字体 语法：语法： font-family:,.,对比：对比：font的的face属性属性 说明：说

2、明：浏览器将在字体列表中依次寻找有效字体浏览器将在字体列表中依次寻找有效字体。若浏览器完全找不到指定的字体时，则使用若浏览器完全找不到指定的字体时，则使用默认字体。默认字体。应该将一种常见的字体列在字体列表的最后应该将一种常见的字体列在字体列表的最后。在对英文字体进行设置时，在对英文字体进行设置时，如果两个英文单如果两个英文单词之间有空格时必须使用单引号（词之间有空格时必须使用单引号（）或双引）或双引号（号（）。利用利用font-style属性，达到字体风格的变化。属性，达到字体风格的变化。 语法：语法： font-style:normal|italic|oblique对比：对比：标签标签fo

3、nt-style参数值说明参数值说明11.1.2 11.1.2 字体风格字体风格font-stylefont-style参数值参数值说明说明normal正常显示，初始值为正常显示，初始值为normal。italic斜体显示斜体显示oblique倾斜显示倾斜显示11.1.3 11.1.3 字体变形字体变形font-variantfont-variant 语法：语法： font-variant:normal|small-caps font-variant参数值说明参数值说明参数值参数值说明说明normal正常显示，初始值为正常显示，初始值为normal。small-caps小型大写字母小型大写字母

4、,即小写的英文即小写的英文字体将转换为大写且字体较字体将转换为大写且字体较小的英文字小的英文字11.1.4 11.1.4 字体加粗字体加粗font-weightfont-weight 在在html里，可以利用里，可以利用标签，将文字设标签，将文字设置为粗体。置为粗体。在在css内，则可利用内，则可利用font-weight属性，设置字体的粗细属性，设置字体的粗细。 语法：语法： font-weight:normal|bold|bolder|lighter| 100|200|300|400|500|600|700|800|900 font-weight参数值说明参数值说明参数值参数值说明说明no

5、rmal浏览器默认的字体为浏览器默认的字体为7，字体粗，字体粗细约为细约为400。bold粗体，字体粗细约为粗体，字体粗细约为700。bolder粗体再加粗，字体粗细约为粗体再加粗，字体粗细约为900。lighter比默认字体还细。比默认字体还细。100-900数字越小字体越细、数字越大字数字越小字体越细、数字越大字体越粗体越粗 利用利用html的标签的标签只能设定只能设定7种字号，种字号，在在css中可以使用中可以使用font-size属性对文属性对文字的字号进行随心所欲的设置。字的字号进行随心所欲的设置。 语法：语法： font-size:|11.1.5 11.1.5 字号的控制字号的控制

6、font-sizefont-size 绝对尺寸可以使用的单位有：绝对尺寸可以使用的单位有：in（英寸）、（英寸）、cm（厘米）、（厘米）、mm（毫（毫米）、米）、pt（磅）和）和px（像素）。（像素）。说明说明11 用关键字来说明文字大小用关键字来说明文字大小，共有，共有7种关键种关键字，相对应于字，相对应于html标签标签中所用的中所用的数字参数。这数字参数。这7种关键字如下：种关键字如下： xx-small x-small small medium large x-large xx-large 利用这些参数，浏览器可以自由决定每一种利用这些参数，浏览器可以自由决定每一种关键字所适合的尺寸（

7、关键字所适合的尺寸（在不同浏览器中它的大在不同浏览器中它的大小是有区别的小是有区别的）。）。 相对尺寸相对尺寸 相对尺寸只有两种相对尺寸只有两种larger和和smaller。 smaller参数告诉浏览器将当前文字在关参数告诉浏览器将当前文字在关键字规格基础上键字规格基础上“缩小一级缩小一级”。而。而larger参数的作用与参数的作用与smaller相反。相反。说明说明 比例尺寸比例尺寸 还可以使用比例参数来设定文字大小，例还可以使用比例参数来设定文字大小，例如：如： pfont-size:15pt bfont-size:300% 这些规则的含义为：使所有包含在这些规则的含义为：使所有包含在

8、中中的被的被标识的文字的尺寸为标识的文字的尺寸为尺寸设定值尺寸设定值的的3倍，即倍，即45pt。比例参数常用于从母体对象比例参数常用于从母体对象继承参数值继承参数值。说明说明14 注意：注意： 1在在css中设置文字尺寸的单位很多，但中设置文字尺寸的单位很多，但有有些浏览器对有些尺寸单位是不支持的些浏览器对有些尺寸单位是不支持的 2px(像素）单位所有的操作平台都支持它，像素）单位所有的操作平台都支持它，但因为访问者的屏幕分辨率的不同，网页的显但因为访问者的屏幕分辨率的不同，网页的显示将可能不稳定，字体可能大也可能小示将可能不稳定，字体可能大也可能小。 3pt(磅)是确定文字尺寸最好的单位，因

9、为是确定文字尺寸最好的单位，因为它在所有的浏览器和操作平台上都适用它在所有的浏览器和操作平台上都适用。 4关键字这种尺寸单位在不同浏览器中它的关键字这种尺寸单位在不同浏览器中它的大小是有区别的。大小是有区别的。 5低版本的浏览器不支持相对尺寸这种单位。低版本的浏览器不支持相对尺寸这种单位。15text-transform属性可以控制字母的大小写。属性可以控制字母的大小写。 语法：语法：text-transform:uppercase|lowercase| capitalize|none text-transform参数值说明如下参数值说明如下11.1.6 文字的更改text-transform

10、16参数值参数值说明说明uppercase使所有字母大写显示。使所有字母大写显示。lowercase使所有字母小写显示。使所有字母小写显示。capitalize词首字母大写。词首字母大写。none字母以正常形式显示。字母以正常形式显示。text-transformtext-transform参数值说明参数值说明17 语法：语法：text-decoration:underline|overline|line-throungh|nonetext-decoration参数值说明参数值说明参数值参数值说明说明underline给文字加下划线。给文字加下划线。overline给文字加上划线。给文字加上划

11、线。line-throungh 给文字加删除线。给文字加删除线。none使得上述效果那不会发生。使得上述效果那不会发生。11.1.7 11.1.7 文字修饰文字修饰text-decorationtext-decoration18 其中其中none参数也非常有用，它可以使链参数也非常有用，它可以使链接的文字不以下划线的形式显示。接的文字不以下划线的形式显示。 如，如，取消超级链接时带下划线的形式取消超级链接时带下划线的形式。 a:linktext-decoration:none a:activetext-decoration:none a:visitedtext-decoration:nonen

12、onenone参数参数19 font属性，可以同时设置许多跟文字有关属性，可以同时设置许多跟文字有关的属性的属性。例如：字体、字体效果、字号、字。例如：字体、字体效果、字号、字体粗细等。体粗细等。 语法：语法： font:font-family|font-style|font-variant|font-weight|font-size11.1.8 11.1.8 字体属性字体属性fontfont20说明：说明：v可以同时设置多种属性。可以同时设置多种属性。v属性与属性之间必须利用空隔隔开。属性与属性之间必须利用空隔隔开。 实例：实例： pfont:bold 12pt/14pt 隶书隶书,宋体宋体

13、 指定该段为指定该段为bold（粗体）和隶书或宋体，（粗体）和隶书或宋体，12点大小，行高为点大小，行高为14点。点。11.1.8 11.1.8 字体属性字体属性fontfont21 11.2 11.2 控制图文布局控制图文布局 样式表中对图文布局的控制样式表中对图文布局的控制是指字符、是指字符、单词和行与行之间是如何定位的单词和行与行之间是如何定位的，包括如何，包括如何设定字与字之间、字母之间的距离，以及行设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、距（垂直间距）、文字的对齐方式、边距、边框及浮动对象等。边框及浮动对象等。2211.2.1 11.2.1 设置字

14、间距设置字间距及字母间距及字母间距 语法：语法： word-spacing:normal|长度单位长度单位 letter-spacing: normal|长度单位长度单位 说明：说明： word-spacing：设置设置英文单词英文单词之间的距离；之间的距离；letter-spacing：设置设置英文字母英文字母之间的距离。之间的距离。 两者两者可以使用前面讲到的任何一种长度单位可以使用前面讲到的任何一种长度单位。 如果使用如果使用normal参数，将按照浏览器默认设参数，将按照浏览器默认设置显示。置显示。2311.2.2 11.2.2 设置行距设置行距line-heightline-heig

15、ht 语法：语法：line-height:normal|数字数字|长度单位长度单位|比例比例 说明：说明：设置相邻两行的基准线之间的垂直距离设置相邻两行的基准线之间的垂直距离。 （基准线就是英文小写字母如（基准线就是英文小写字母如x，a的下阶的下阶线，但不包括诸如线，但不包括诸如y，g等字母超过下阶线等字母超过下阶线的部分）的部分） 24 实例：实例： 用数字设定行距用数字设定行距 bfont-size=12pt;line-height:2 表示将利用字号来确定行距，将字号乘以表示将利用字号来确定行距，将字号乘以设定的参数值，即设定的参数值，即12x2=24，所以在本例中，所以在本例中行高将是

16、行高将是24点。点。 用长度单位设定行距用长度单位设定行距 bline-height:11pt 用比例设定行距用比例设定行距 bfont-size:10pt;line-height:140% 表示行距是文字的基准大小表示行距是文字的基准大小10pt的的140%，即即14pt。25 语法：语法： text-align:left|right|center|justify vertical-align:top|bottom|text-top|text-bottom|baseline|middle|sub|super 11.2.3 11.2.3 文字对齐文字对齐 26 说明：说明： text-alig

17、n属性用于文字的水平对齐属性用于文字的水平对齐，但，但这项属性这项属性只用于整块的内容只用于整块的内容，如，如、到到和和等。等。text-align参数值说明参数值说明参数值参数值说说 明明left浏览器默认的对齐方式，左浏览器默认的对齐方式，左对齐。对齐。right右对齐。右对齐。center居中。居中。justify左右对齐。左右对齐。27 vertical-align属性用于控制文字或其他属性用于控制文字或其他网页对象相对于母体对象的垂直位置网页对象相对于母体对象的垂直位置。 vertical-align参数值说明参数值说明参数值参数值说说 明明top使元素和行中最高的元素向上对齐使元素

18、和行中最高的元素向上对齐bottom使元素和行中最低的元素向下对齐使元素和行中最低的元素向下对齐text-top使元素和上级元素的字体向上对齐使元素和上级元素的字体向上对齐text-bottom使元素和上级元素的字体向下对齐使元素和上级元素的字体向下对齐baseline使元素和上级元素的基线对齐（默认）使元素和上级元素的基线对齐（默认）middle纵向对齐元素基线加上上级元素字母纵向对齐元素基线加上上级元素字母“x”高度的一高度的一半的中点半的中点sub将对象以下标的形式显示。将对象以下标的形式显示。super将对象以上标的形式显示。将对象以上标的形式显示。28 11.2.4 11.2.4 首

19、行缩进属性首行缩进属性text-indenttext-indent 首行缩进属性首行缩进属性用来指定段文字的第一行文用来指定段文字的第一行文字缩进的距离，而浏览器的默认值不缩进字缩进的距离，而浏览器的默认值不缩进。 语法：语法： text-indent:数字数字|百分比百分比 说明：说明： 在在ie浏览器中浏览器中使用比例参数时，是相对于使用比例参数时，是相对于整个浏览器窗口的宽度，而不是相对于段落整个浏览器窗口的宽度，而不是相对于段落的宽度。的宽度。11.3 11.3 颜色及背景颜色及背景3011.3.1 11.3.1 颜色属性颜色属性colorcolor 语法：语法： color：实例：实

20、例： h1color:blue h2color:#00008031利用利用backgroud-color属性设置背景颜色。属性设置背景颜色。 语法：语法： background-color：|transparent（透（透明）明） 说明：初始值为说明：初始值为transparent（透明）。（透明）。 实例：实例： bodybackground-color:white h1background-color:#00008011.3.2 11.3.2 背景颜色属性背景颜色属性3211.3.3 11.3.3 背景图像属性背景图像属性 在在css里，可利用里，可利用background-image属属

21、性，将网页背景以图片的方式显示。性，将网页背景以图片的方式显示。 语法：语法： background-image：|none（无）（无）3311.3.4 11.3.4 背景图片重复属性背景图片重复属性设定一个指定的背景图片如何被重复设定一个指定的背景图片如何被重复。 语法：语法： background-repeat：repeat|repeat-x|repeat-y|no-repeat 34background-repeatbackground-repeat属性参数值说明属性参数值说明参数值参数值说说 明明repeat背景图片水平与垂直方向同时背景图片水平与垂直方向同时平铺（默认值）平铺（默认值

22、）repeat-x背景图片横向重复背景图片横向重复repeat-y背景图片纵向重复背景图片纵向重复no-repeat不重复不重复3511.3.5 11.3.5 固定背景图片属性固定背景图片属性设置指定的背景图片是跟随内容滚动，设置指定的背景图片是跟随内容滚动，还是保持固定。还是保持固定。 语法：语法： background-attachment：scroll|fixed 说明：说明： scroll表示滚动，表示滚动，fixed表示固定。初始表示固定。初始值为值为scroll。3611.3.6 11.3.6 背景图片的位置属性背景图片的位置属性vbackground-position设置设置背景

23、图片的最初背景图片的最初位置位置v这个属性只能应用于这个属性只能应用于块级元素块级元素和和替换元素替换元素(替换元素仅指一些已知原有尺寸的元素。替换元素仅指一些已知原有尺寸的元素。html替换元素包括替换元素包括 img, input, textarea, select, 和和 object。) 语法：语法： background-position：|37 以百分比方法设置以百分比方法设置background-position属性的语法如下：属性的语法如下： background-position：x% y% 其中其中x%代表设置图片的水平位置；代表设置图片的水平位置；y%代表图片的垂直位置。

24、初始值为代表图片的垂直位置。初始值为0% 0%。 实例：实例： pbackground-position:70% 50%;repeat-y;url(.picsky.jpg) 表示背景图片的水平位置为表示背景图片的水平位置为70%，垂直，垂直位置为位置为50%。38 以长度单位设置以长度单位设置background-position属性的语法如下：属性的语法如下： background-position：x y 使用长度单位可以对背景图片的位置作出使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起更精确的控制，可以设定水平和垂直定位起点。点。 实例：实例： backgro

25、und-position:70px 10px;url(.picsky.jpg) 表示从左起表示从左起70像素、垂直像素、垂直10像素的位置开像素的位置开始显示图像。始显示图像。39 以关键字设置以关键字设置background-position属性的语法如下：属性的语法如下： background-position： top|center|bottom|left|center|right （注：（注：|表示或的意思，表示或的意思，|表示二者同时使表示二者同时使用，用， 表示可搭配使用）表示可搭配使用） 实例：实例：background-position:right top;url(.picsk

26、y.jpg)40 11.3.7 11.3.7 背背 景景 语法：语法：background： 允许值：允许值：| 初始值：未定义初始值：未定义以下是一些背景的声明：以下是一些背景的声明： bodybackground:white url(tree.jpg) h1background:#7fffd4 pbackground:url(tree.jpg) #f0f8ff fixed tablebackground:#0c0 url(tree.jpg) no-repeat bottom right11.4 11.4 美化网页与美化网页与超链接的设置超链接的设置 4211.4.1 11.4.1 网页链接

27、属性网页链接属性anchoranchor在在css里，可以通过网页链接属性里，可以通过网页链接属性anchor来设来设置网页链接文字的效果。置网页链接文字的效果。 网页链接属性网页链接属性anchor语法说明语法说明a:link 尚未链接过的超链接文字的样式。尚未链接过的超链接文字的样式。 a:visited 已链接过的超链接文字的样式。已链接过的超链接文字的样式。a:active 当鼠标点击超链接后，超链接文字所显示的样式。当鼠标点击超链接后，超链接文字所显示的样式。a:hover 当鼠标移到超链接文字上方时，当鼠标移到超链接文字上方时， 超链接文字所显示的样式。超链接文字所显示的样式。43

28、11.4.2 11.4.2 设置滚动条属性设置滚动条属性scrollbarscrollbar在在css里，可以通过滚动条属性里，可以通过滚动条属性scrollbar来美化滚动条。来美化滚动条。44滚动条滚动条scrollbarscrollbar的参数说明的参数说明参数值参数值说说 明明scrollbar-face-color设置设置a区域的颜色。区域的颜色。scrollbar-shadow-color设置设置a区域阴影的颜色。区域阴影的颜色。scrollbar-highlight-color设置设置a区域的边框颜色。区域的边框颜色。scrollbar-3dlight-color设置设置a区域的

29、区域的3d光影。光影。scrollbar-darkshadow-color设置设置a区域的区域的3d阴影。阴影。scrollbar-track-color设置设置b区域的滚动条轨道颜色。区域的滚动条轨道颜色。scrollbar-arrow-color设置设置a区域内内小三角形的颜色。区域内内小三角形的颜色。4511.4.3 11.4.3 光标属性的光标属性的设置设置cursorcursor光标属性光标属性cursor可设置光标的图形可设置光标的图形，cursor属性共提供了属性共提供了16种属性值，如种属性值，如下表所示。下表所示。464711.4.4 11.4.4 边框的设置边框的设置 在在

30、css中，可以通过中，可以通过margin属性、属性、border属性和属性和padding属性控制段落、图片和表格属性控制段落、图片和表格等对象的样式。如：边框的宽度、颜色、样等对象的样式。如：边框的宽度、颜色、样式以及对象与边框之间的空白距离式以及对象与边框之间的空白距离。 上述三种属性通常用于文件段落、图片、上述三种属性通常用于文件段落、图片、表格与网页边界的空白距离，或者是设置表表格与网页边界的空白距离，或者是设置表格内的边框及空白样式等，如下图所示。格内的边框及空白样式等，如下图所示。48边框属性说明边框属性说明49说明：说明：vmargin属性属性：控制对象边界与文件其他：控制对象

31、边界与文件其他内容的空白距离。内容的空白距离。vborder属性属性：控制表格四边边框的宽度、：控制表格四边边框的宽度、颜色及样式。颜色及样式。vpadding属性属性：控制表格中的内容或图片：控制表格中的内容或图片与对象边界的空白距离。与对象边界的空白距离。 1边界的设置边界的设置margin 通过通过margin属性可以设定对象与四属性可以设定对象与四周文字之间的距离。周文字之间的距离。 其语法如下：其语法如下： margin-(top、right、bootom、left)：长度长度|百分比百分比|auto51 说明：说明： margin属性有属性有margin-top（顶部空白区（顶部空

32、白区域）、域）、margin-bottom（底部空白区域）、（底部空白区域）、margin-left（左边空白区域）和（左边空白区域）和margin-right（右边空白区域）四个边界属性。通过设置这（右边空白区域）四个边界属性。通过设置这4项属性，项属性，可以控制一个对象四周空白区域的可以控制一个对象四周空白区域的大小大小。 可以使用任何长度单位可以使用任何长度单位。 如将边距设为负值，就可以将两个对象重如将边距设为负值，就可以将两个对象重叠在一起。叠在一起。52 利用利用margin属性设置边界值的方法有：属性设置边界值的方法有： 设置一个边界值设置一个边界值：若：若margin属性只设置

33、一属性只设置一个边界值时，则上、右、下和左四个边界都将个边界值时，则上、右、下和左四个边界都将调用此值。调用此值。 实例：实例： margin:2cm 设置对应边值设置对应边值：在：在margin属性中设置对应属性中设置对应边值，是指上边界与下边界、左边界与右边界边值，是指上边界与下边界、左边界与右边界为相对应的边界，所以若设置对应边其中一边为相对应的边界，所以若设置对应边其中一边的值时，另一边将调用此值。的值时，另一边将调用此值。 实例：实例： margin：2cm 4cm 上边界与下边界的值为上边界与下边界的值为2cm，左边界与右边，左边界与右边界的值为界的值为4cm。53 设置四个边界值

34、设置四个边界值：利用：利用margin属性，顺属性，顺序输入上、右、下、左边界的值，就可以序输入上、右、下、左边界的值，就可以完成四个边界的设置了。完成四个边界的设置了。 实例：实例： margin:20pt 30% 30px 2cm 上边界为上边界为20pt，右边界为，右边界为30%，下边界，下边界为为30px，左边界为，左边界为2cm。542设置边框的宽度设置边框的宽度border-width 在在css里，可以利用里，可以利用border-width属性来控制属性来控制边框的宽度。边框的宽度。 语法语法1：border-width:thin|medium|thick|长度长度 说明：说明

35、：border-width的参数值的参数值thin代表细、代表细、medium代表中等、代表中等、thick代表粗。代表粗。 语法语法2： border-top-width:长度长度 border-bottom-width:长度长度 border-left-width:长度长度 border-right-width:长度长度 55border-width属性设置宽度有属性设置宽度有4种方法：种方法：v设置一个值设置一个值：四条边框宽度均使用同一个：四条边框宽度均使用同一个设置值。设置值。v设置两个值设置两个值：上边框与下边框宽度调用第：上边框与下边框宽度调用第一个值，右边框与左边框宽度调用第二

36、个值。一个值，右边框与左边框宽度调用第二个值。v设置三个值设置三个值：上边框宽度调用第一个值，：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框右边框与左边框宽度调用第二个值，下边框宽度调用第三个值。宽度调用第三个值。v设置四个值设置四个值：四条边框宽度的调用顺序，：四条边框宽度的调用顺序，顺序为上、右、下、左。顺序为上、右、下、左。563 3设置边框的颜色设置边框的颜色border-colorborder-color border-color属性用于设置属性用于设置边框的颜色边框的颜色，它的使用，它的使用方法与方法与border-width相同。相同。 语法语法1：border

37、-color:#rrggbbborder-color:#rrggbb #rrggbb #rrggbb #rrggbb 说明：其中第说明：其中第1种颜色为顶部边框颜色，其中第种颜色为顶部边框颜色，其中第2种颜色为右边边框颜色，其中第种颜色为右边边框颜色，其中第3种颜色为底部边框种颜色为底部边框颜色，其中第颜色，其中第4种颜色为左边边框颜色。种颜色为左边边框颜色。 语法语法2： border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb 574 4

38、设置边框的样式设置边框的样式border-styleborder-style border-style属性用于设置边框的样式。属性用于设置边框的样式。 其语法设置如下：其语法设置如下：border-style:none|solid|double|dotted| dashed|groove|ridge|inset|outset说明如下：说明如下：58 border-style border-style属性设置值属性设置值属性属性说明说明solid实线实线double双直线双直线dotted小点虚线小点虚线dashed大点虚线大点虚线groove3d凹线凹线ridge3d凸线凸线inset3d框入

39、线框入线outset3d隆起线隆起线595 5设置边框属性设置边框属性borderborder 在在css里，通过里，通过border属性可以快速设置属性可以快速设置边框的宽度、边框颜色及边框样式。其语法边框的宽度、边框颜色及边框样式。其语法如下：如下：border:| 实例：实例： border:1pt double #ff0000 设置边框的宽度为设置边框的宽度为1pt、样式为双直线、颜、样式为双直线、颜色为红色。色为红色。6 6内边界的设置内边界的设置paddingpadding padding属性主要是控制元素的内容与元属性主要是控制元素的内容与元素外框内缘的距离素外框内缘的距离。其语法如下：。其语法如下：padding-(top、right、bottom、left):长度长度|百分比百分比 说明：其用法与说明：其用法与border-color相同。相同。11.5 css定位6211.5.1 css11.5.1 css定位属性定位属性利用样式表的定位属性，就可以精确地设定利用样式表的定位属性，就可以精确地设定对象的位置，还能将各对象进行叠放处理。对象的位置，还能将各对象进行