第9章CSS的常用屬性

1、字體屬性文本屬性背景屬性邊框?qū)傩?1字體屬性文字屬性功能可取值font-family字體例如隸書，Times New Roman等，當指定多種字體時，用逗號分隔，當字體由多個單詞組成時，由雙引號括起來font-size字號absolute-size:根據(jù)對象字體調(diào)節(jié)；relative-size:根據(jù)父對象字體調(diào)節(jié)；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：像素，是網(wǎng)頁設(shè)計中使用最多的長度單位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;黃鶴樓送孟浩然之廣陵故人西辭黃鶴樓煙花三月下?lián)P州孤帆遠影碧空盡惟見長江天際流52文本屬性文本屬性功能取值word-spacing英文單詞之間的間隔默認值為0，可取正值（間隔增大）或負值（間隔減?。﹍etter-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:默認，無轉(zhuǎn)換；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背景是否隨內(nèi)容滾動scroll:背景圖像隨內(nèi)容滾動；fixed:背景圖像不隨內(nèi)容滾動。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、天接水，芳草無情，更在斜陽外。黯鄉(xiāng)魂，追旅思。夜夜除非，好夢留人睡。明月樓高休獨倚，酒入愁腸，化作相思淚。范仲淹：漁家傲塞下秋來風景異。衡陽雁去無留意。四面邊聲連角起。千嶂里。長煙落日孤城閉。濁酒一杯家萬里。燕然未勒歸無計。羌管悠悠霜滿地。人不寐。將軍白發(fā)征夫淚。94邊框?qū)傩岳肅SS邊框?qū)傩钥梢栽O(shè)置對象邊框的顏色、樣式以及寬度。使用對象的邊框?qū)傩灾?，必須先設(shè)定對象的高度及寬度，或者將對象的position屬性設(shè)置成absolute。104邊框?qū)傩裕?）邊框顏色定義邊框顏色使用border-color屬性，對象有上方、右方、下方、左方四個邊框，對邊框顏色賦值時有以下幾種方式：p四個參數(shù)：按上

8、方、右方、下方、左方的順序賦值；例如：border-color:redgreenblueblack;p一個參數(shù)：顏色作用于四個邊框；例如border-color:red;p二個參數(shù)：按照上下，左右的順序賦值；例如：border-color:redgreen;上下邊框為紅色，左右邊框為綠色；p三個參數(shù)：按照上，左右，下的順序賦值；例如：border-color:redgreenblue;上邊框為紅色，左右邊框為綠色，下邊框為藍色；114邊框?qū)傩赃吙驑邮饺≈祅one無邊框，無論邊框?qū)挾仍O(shè)為多大hidden隱藏邊框dotted點線邊框dashed虛線邊框solid實線邊框double雙線邊框groo

9、ve3D凹槽邊框ridge菱形邊框inset3D內(nèi)嵌邊框outset3D凸邊框（2）邊框樣式定義邊框樣式使用border-style屬性，邊框樣式的參數(shù)的個數(shù)及賦值方式與邊框顏色類似，邊框樣式的可取值及其解釋如表所示。124邊框?qū)傩裕?）邊框?qū)挾仁褂胋order-width來定義，寬度的取值可以使用關(guān)鍵字或自定義的數(shù)值，寬度的參數(shù)的個數(shù)及賦值方式與邊框顏色類似?？墒褂玫年P(guān)鍵字有medium、thin、thick。medium指默認寬度；thin小于默認寬度；thick大于默認寬度。若要使邊框?qū)挾戎粚δ骋粋€邊框有效，只需要在border-width中加入邊框位置即可，例如border-left-

10、width:thin;。邊框的屬性也可以使用border復(fù)合屬性按照寬度、樣式、顏色的順序定義。13例4：CSS使用示例-邊框?qū)傩詃iv.b1border:2pxdashed#FF9600;div.b2border:4pxdoublered;春曉春眠不覺曉處處聞啼鳥夜來風雨聲花落知多少144定位屬性div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容一塊內(nèi)容，即“塊框”。span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。 CSS 定位定位 (Positioning) 屬性允許對元素進行定位。屬性允許對元素進行定位。定位的基本

11、思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。 CSS 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內(nèi)框在一行中水平布置。4定位屬性定位屬性功能取值position是否定位及定位方式static:無特殊定位；relative:相對定位，對象不可層疊；absolute:絕對定位，對象可以層疊；top、right、bottom、left與父

12、對象的上，右，下，左的距離auto:無特殊定位；自定義數(shù)值:%或長度，只有position取值為absolute或relative，此值才有效clip設(shè)置對象的可視區(qū)域auto:自動；shape:按照形狀定義顯示overflow設(shè)置當內(nèi)容超過對象大小時如何顯示內(nèi)容auto:根據(jù)內(nèi)容確定是否需要顯示滾動條；visible:默認值，內(nèi)容顯示在對象邊框之外；hidden:超出邊框的內(nèi)容不顯示；scroll:顯示滾動條vertical-align設(shè)置對象的垂直對齊方式top, middle, bottom等z-index設(shè)置對象的層疊順序auto:遵循父對象的定位；自定義的數(shù)值：無單位的整數(shù)值，可為負

13、數(shù)，較大值的對象會覆蓋較小值的對象16相對定位h2.pos_leftposition:relative;left:-20pxh2.pos_rightposition:relative;left:20px!-這是位于正常位置的標題這個標題相對于其正常位置向左移動這個標題相對于其正常位置向右移動相對定位會按照元素的原始位置對該元素進行移動。!-h2.pos_absposition:absolute;left:100px;top:150px這是帶有絕對定位的標題通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側(cè) 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;如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow屬性可以確定是否顯示滾動條等行為。這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內(nèi)容

15、也會出現(xiàn)滾動條。默認值是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擁有更低的優(yōu)先級。21例5：CSS使用示例-定位屬性春曉春眠不覺曉處處聞啼鳥夜來風雨聲花落知多少靜夜思床前明月光疑是地上霜舉頭望明月低頭思故鄉(xiāng)226布局屬性在HTML

16、中，元素的位置是依次排列的，而在CSS中可以利用布局屬性來定義元素的排列位置。常用的布局屬性有display、visibility、margin、float等236布局屬性（1）display屬性display屬性用來確定頁面元素是否顯示以及顯示方式，display屬性不可繼承。display屬性常用的值為：pblock：定義元素為塊對象；pinline：定義元素為內(nèi)聯(lián)對象；plist-item：定義元素為列表項目；pnone：隱藏對象，同時元素所占的空間也被清除24displayp display: inlinediv display: none本例中的樣式表把段落元素設(shè)置為內(nèi)聯(lián)元素。而 d

17、iv 元素不會顯示出來！div 元素的內(nèi)容不會顯示出來！spandisplay: block本例中的樣式表把 span 元素設(shè)置為塊級元素。兩個 span 元素之間產(chǎn)生了一個換行行為。256布局屬性（2）visibility屬性visibility屬性用來確定元素是否顯示，不可繼承。其可取的值為：pvisible：元素可見；phidden：元素不可見，元素所占空間依然存在；pcollapse：在表格元素中使用時，會隱藏表格中的行和列。在非表格元素中使用時，元素不可見26visibilityh1.visible visibility:visibleh1.invisible visibility:

18、hidden這是可見的標題這是不可見的標題tr.coll visibility:collapse AdamsJohnBushGeorge276布局屬性（3）margin屬性margin屬性用來定義元素的邊界屬性，邊界屬性也是不可繼承的屬性。其語法結(jié)構(gòu)如下：margin:auto|長度值|百分比值;當取百分比值時，是相對于元素的寬度。margin屬性有四個單側(cè)屬性，分別為margin-top、margin-right、margin-bottom、margin-left。2829例6：p.margin margin: 2cm 4cm 3cm 4cm這個段落沒有指定外邊距。這個段落帶有指定的外邊距。

19、這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。這個段落沒有指定外邊距。306布局屬性（4）float屬性float屬性用來定義元素是否浮動及浮動的方式?？扇〉闹涤校簄one：元素不浮動；left：元素的浮動在左側(cè)；right：元素的浮動在右側(cè)316布局屬性浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。當把框1向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：326布局屬性當框1向左浮動時，它脫離文檔流并

20、且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框2，使框2從視圖中消失。如果把所有三個框都向左移動，那么框1向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。336布局屬性如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：34例7：簡單浮動img float:right;border:1px dotted black;margin:0px 0px 15px 20px;在下面的段落中，我們添加了一個樣式為 float

21、:right 的圖像。結(jié)果是這個圖像會浮動到段落的右側(cè)。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中，列表屬性專門控制列表的表現(xiàn)形式，常用的列表屬性有l(wèi)ist-style-type、list-style-image、list-style-position以及l(fā)ist-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 類型茶