第9章CSS的常用属性

1、字体属性文本属性背景属性边框属性21字体属性文字属性功能可取值font-family字体例如隶书，Times New Roman等，当指定多种字体时，用逗号分隔，当字体由多个单词组成时，由双引号括起来font-size字号absolute-size:根据对象字体调节；relative-size:根据父对象字体调节；length:相对于父对象字体的尺寸，不可为负值。font-style样式normal:正常；italic:斜体；oblique:倾斜；font-weight加粗normal:正常；lighter:细体；bold:粗体；bolder:特粗体；color文字颜色取英文单词，或#rrgg

2、bb，或#rgb3CSS 长度单位绝对长度单位in（英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）pt（磅）：是标准印刷上常用的单位，72pt的长度为1英寸。pc（pica）：这也是一个印刷上用的单位，1pc的长度为12磅。相对长度单位em：定义文字大小的值，即font-size属性的值。ex：和em类似，指的是文本中字母x的高度px：像素，是网页设计中使用最多的长度单位4例1：CSS使用示例-文字属性的使用pfont-family:楷体;font-size:18pt;font-style:italic;font-weight:bold;color:blue;h1font-f

3、amily:楷体;font-size:20pt;color:red;黄鹤楼送孟浩然之广陵故人西辞黄鹤楼烟花三月下扬州孤帆远影碧空尽惟见长江天际流52文本属性文本属性功能取值word-spacing英文单词之间的间隔默认值为0，可取正值（间隔增大）或负值（间隔减小）letter-spacing字符或汉字之间的间隔同上text-decoration文字修饰none:默认；underline:下划线；overline:上划线；line-through:删除线；blink:闪烁；inherit:继承父元素；text-indent文本缩进可以使用绝对单位（cm, mm, in, pt, pc），也可以使

4、用相对单位（em, ex, px）或者百分比text-align水平对齐方式left:左对齐；center:居中对齐；right:右对齐；justify:两端对齐；text-transform文字大小写uppercase:所有文字大写显示；lowercase:所有文字小写显示；capitalize :每个单词的首字母大写；none:默认，无转换；vertical-align垂直对齐方式top:顶端对齐；bottom:底部对齐；baseline:基线对齐；middle:居中对齐；line-height行高参照text-indent属性6例2：CSS使用示例文本属性divtext-indent:3

5、0px;text-align:left;line-height:25px;letter-spacing:5px;text-decoration:underline;天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。73背景属性背景属性功能取值background-color背景颜色取英文单词，或#rrggbb，或#rgbbackground-image背景图片绝对路径或相对路径表示的url background-repeat背景图片的平铺方式repeat-x:横向平铺；repeat-y:纵向平铺；norepeat:不平铺；backgrou

6、nd-attachment背景是否随内容滚动scroll:背景图像随内容滚动；fixed:背景图像不随内容滚动。background-position背景的水平和垂直位置left, right, top, bottom或精确的值8例3：CSS使用示例-背景属性bodycolor:#FF9600;font-family:黑体;font-size:18pt;background-image:url(image/back.jpg);background-repeat:repeat-y;background-attachment:fixed;范仲淹：苏幕遮碧云天，黄叶地，秋色连波，波上寒烟翠。山映斜阳

7、天接水，芳草无情，更在斜阳外。黯乡魂，追旅思。夜夜除非，好梦留人睡。明月楼高休独倚，酒入愁肠，化作相思泪。范仲淹：渔家傲塞下秋来风景异。衡阳雁去无留意。四面边声连角起。千嶂里。长烟落日孤城闭。浊酒一杯家万里。燕然未勒归无计。羌管悠悠霜满地。人不寐。将军白发征夫泪。94边框属性利用CSS边框属性可以设置对象边框的颜色、样式以及宽度。使用对象的边框属性之前，必须先设定对象的高度及宽度，或者将对象的position属性设置成absolute。104边框属性（1）边框颜色定义边框颜色使用border-color属性，对象有上方、右方、下方、左方四个边框，对边框颜色赋值时有以下几种方式：p四个参数：按上

8、方、右方、下方、左方的顺序赋值；例如：border-color:redgreenblueblack;p一个参数：颜色作用于四个边框；例如border-color:red;p二个参数：按照上下，左右的顺序赋值；例如：border-color:redgreen;上下边框为红色，左右边框为绿色；p三个参数：按照上，左右，下的顺序赋值；例如：border-color:redgreenblue;上边框为红色，左右边框为绿色，下边框为蓝色；114边框属性边框样式取值none无边框，无论边框宽度设为多大hidden隐藏边框dotted点线边框dashed虚线边框solid实线边框double双线边框groo

9、ve3D凹槽边框ridge菱形边框inset3D内嵌边框outset3D凸边框（2）边框样式定义边框样式使用border-style属性，边框样式的参数的个数及赋值方式与边框颜色类似，边框样式的可取值及其解释如表所示。124边框属性（3）边框宽度使用border-width来定义，宽度的取值可以使用关键字或自定义的数值，宽度的参数的个数及赋值方式与边框颜色类似。可使用的关键字有medium、thin、thick。medium指默认宽度；thin小于默认宽度；thick大于默认宽度。若要使边框宽度只对某一个边框有效，只需要在border-width中加入边框位置即可，例如border-left-

10、width:thin;。边框的属性也可以使用border复合属性按照宽度、样式、颜色的顺序定义。13例4：CSS使用示例-边框属性div.b1border:2pxdashed#FF9600;div.b2border:4pxdoublered;春晓春眠不觉晓处处闻啼鸟夜来风雨声花落知多少144定位属性div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容一块内容，即“块框”。span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 CSS 定位定位 (Positioning) 属性允许对元素进行定位。属性允许对元素进行定位。定位的基本

11、思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。4定位属性定位属性功能取值position是否定位及定位方式static:无特殊定位；relative:相对定位，对象不可层叠；absolute:绝对定位，对象可以层叠；top、right、bottom、left与父

12、对象的上，右，下，左的距离auto:无特殊定位；自定义数值:%或长度，只有position取值为absolute或relative，此值才有效clip设置对象的可视区域auto:自动；shape:按照形状定义显示overflow设置当内容超过对象大小时如何显示内容auto:根据内容确定是否需要显示滚动条；visible:默认值，内容显示在对象边框之外；hidden:超出边框的内容不显示；scroll:显示滚动条vertical-align设置对象的垂直对齐方式top, middle, bottom等z-index设置对象的层叠顺序auto:遵循父对象的定位；自定义的数值：无单位的整数值，可为负

13、数，较大值的对象会覆盖较小值的对象16相对定位h2.pos_leftposition:relative;left:-20pxh2.pos_rightposition:relative;left:20px!-这是位于正常位置的标题这个标题相对于其正常位置向左移动这个标题相对于其正常位置向右移动相对定位会按照元素的原始位置对该元素进行移动。!-h2.pos_absposition:absolute;left:100px;top:150px这是带有绝对定位的标题通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。17CLIPrect(top,r

14、ight,bottom,left)img position:absolute; left: 0px; clip:rect(30px 200px 100px 20px); clip 属性剪切了一幅图像18OverFlowdivbackground-color:#00FFFF;width:150px;height:150px;overflow:scroll;如果元素中的内容超出了给定的宽度和高度属性，overflow属性可以确定是否显示滚动条等行为。这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容

15、也会出现滚动条。默认值是visible。19vertical-alignimg.topvertical-align:text-top;img.bottomvertical-align:text-bottom;这是一幅位于段落中的图像。这是一幅位于段落中的图像。20Z-indeximg.xposition:absolute;left:0px;top:0px;z-index:-1这是一个标题默认的z-index是0。Z-index-1拥有更低的优先级。21例5：CSS使用示例-定位属性春晓春眠不觉晓处处闻啼鸟夜来风雨声花落知多少静夜思床前明月光疑是地上霜举头望明月低头思故乡226布局属性在HTML

16、中，元素的位置是依次排列的，而在CSS中可以利用布局属性来定义元素的排列位置。常用的布局属性有display、visibility、margin、float等236布局属性（1）display属性display属性用来确定页面元素是否显示以及显示方式，display属性不可继承。display属性常用的值为：pblock：定义元素为块对象；pinline：定义元素为内联对象；plist-item：定义元素为列表项目；pnone：隐藏对象，同时元素所占的空间也被清除24displayp display: inlinediv display: none本例中的样式表把段落元素设置为内联元素。而 d

17、iv 元素不会显示出来！div 元素的内容不会显示出来！spandisplay: block本例中的样式表把 span 元素设置为块级元素。两个 span 元素之间产生了一个换行行为。256布局属性（2）visibility属性visibility属性用来确定元素是否显示，不可继承。其可取的值为：pvisible：元素可见；phidden：元素不可见，元素所占空间依然存在；pcollapse：在表格元素中使用时，会隐藏表格中的行和列。在非表格元素中使用时，元素不可见26visibilityh1.visible visibility:visibleh1.invisible visibility:

18、hidden这是可见的标题这是不可见的标题tr.coll visibility:collapse AdamsJohnBushGeorge276布局属性（3）margin属性margin属性用来定义元素的边界属性，边界属性也是不可继承的属性。其语法结构如下：margin:auto|长度值|百分比值;当取百分比值时，是相对于元素的宽度。margin属性有四个单侧属性，分别为margin-top、margin-right、margin-bottom、margin-left。2829例6：p.margin margin: 2cm 4cm 3cm 4cm这个段落没有指定外边距。这个段落带有指定的外边距。

19、这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落没有指定外边距。306布局属性（4）float属性float属性用来定义元素是否浮动及浮动的方式。可取的值有：none：元素不浮动；left：元素的浮动在左侧；right：元素的浮动在右侧316布局属性浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：326布局属性当框1向左浮动时，它脱离文档流并

20、且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。336布局属性如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：34例7：简单浮动img float:right;border:1px dotted black;margin:0px 0px 15px 20px;在下面的段落中，我们添加了一个样式为 float

21、:right 的图像。结果是这个图像会浮动到段落的右侧。This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is so

22、me text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.35例8：spanflo

23、at:left;width:0.7em;font-size:400%;font-family:algerian,courier;line-height:80%;Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissome

24、text.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.在上面的段落中，文本的第一个字母包含在一个span元素中。这个span元素的宽度是当前字体尺寸的0.7倍。span元素的字体尺寸是400%，行高是80%。span中的字母字体是Algerian367列表属性在CSS中，列表属性专门控制列表的表现形式，常用的列表属性有list-style-type、list-style-image、list-style-position以及list-style属性。37lis

25、t-style-type标记类型ul.none list-style-type: noneul.disc list-style-type: discul.circle list-style-type: circleul.square list-style-type: squareul.decimal list-style-type: decimalul.decimal-leading-zero list-style-type: decimal-leading-zeroul.lower-roman list-style-type: lower-romanul.upper-roman list-s

26、tyle-type: upper-romanul.lower-alpha list-style-type: lower-alphaul.upper-alpha list-style-type: upper-alphaul.lower-greek list-style-type: lower-greekul.lower-latin list-style-type: lower-latinul.upper-latin list-style-type: upper-latinul.hebrew list-style-type: hebrewul.armenian list-style-type: a

27、rmenianul.georgian list-style-type: georgianul.cjk-ideographic list-style-type: cjk-ideographicul.hiragana list-style-type: hiraganaul.katakana list-style-type: katakanaul.hiragana-iroha list-style-type: hiragana-irohaul.katakana-iroha list-style-type: katakana-irohanone 类型茶可口可乐Disc 类型茶可口可乐Circle 类型

28、茶可口可乐Square 类型茶可口可乐Decimal 类型茶可口可乐Decimal-leading-zero 类型茶可口可乐Lower-roman 类型茶可口可乐Upper-roman 类型茶可口可乐Lower-alpha 类型茶可口可乐Upper-alpha 类型茶可口可乐Lower-greek 类型茶可口可乐Lower-latin 类型茶可口可乐Upper-latin 类型茶可口可乐Hebrew 类型茶可口可乐Armenian 类型茶可口可乐Georgian 类型茶可口可乐Cjk-ideographic 类型茶可口可乐Hiragana 类型茶可口可乐Katakana 类型茶可口可乐Hiragana-iroha 类型茶可口可乐Katakana-iroha 类型茶