（精選）CSS指層疊樣式表(CascadingStyleSheets)

1、CSS指層疊樣式表（Cascading Style Sheets）CSS語法由三部分組成：選擇器、屬性和值：Selector property: value 例：body color:blue;若值為若干單詞，需加引號。選擇器分組 例：h1,h2,h3,h4 color:#ff0000;使這幾個標(biāo)題的顏色都是綠色的。派生選擇器 例：li strong font-style:italic;指在li里的屬性為strong的元素會變成斜體。id選擇器 以#定義#red color:red;這段是紅色的注：每個id屬性只能在html中出現(xiàn)一次。#mm p color:red;#mm h1 color:

2、green;作為派生選擇器，指id為mm的段落是紅色，h1標(biāo)題是綠色的。注：id選擇器作為派生選擇器時，可出現(xiàn)多次。類選擇器 以一個點號顯示.center text-align:centeraaaaa注：類選擇器的第一個字符不能是數(shù)字。td.fancy color: #f60;background: #666;作為派生選擇器，指類名為fancy的表格單元都是灰色背景的橙色。如何插入樣式表 3種方法外部樣式表注：外部樣式表mystyle.css不包含任何html標(biāo)簽。內(nèi)部樣式表hr color:red;內(nèi)聯(lián)樣式注：同一屬性在不同樣式表中被同樣選擇器定義，屬性值將從更具體的樣式表中被繼承過來。（內(nèi)

3、部樣式比外部具體）CSS背景背景色p backgroud-color:red;背景圖像p backgroud-image:url(123.jpg);背景重復(fù)p backgroud-repeat:repeat;repeat是圖像在水平垂直方向上都平鋪，相當(dāng)于添加整個背景圖像。repeat-x是圖像在水平方向上平鋪，repeat-y是在垂直方向上。背景定位p backgroud-position: center;其屬性值可以為center,top,bottom,left.right，若只出現(xiàn)一個關(guān)鍵字，則認為另一個關(guān)鍵字是center。p backgroud-position:66% 33%;指將

4、圖像放在水平方向 2/3、垂直方向 1/3 處。p background-position:50px 100px;圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素、向下 100 像素的位置。背景關(guān)聯(lián)p backgroud-attachment:fixed;背景圖像固定，不會隨其他滾動。（就是你可以一直看到背景，它不會動）可以將所有背景屬性放在一個聲明中：body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; CSS文本縮進文本p text-indent:5em;使所有段落的首行縮進 5 em（即第一行開頭距左

5、邊距有5em）使用負值p text-indent:-5em;段落的第一行的前5em的內(nèi)容從左面超出了瀏覽器。p text-indent:-5em;padding-left:5em;設(shè)置一個5em的內(nèi)邊距，第一行正常顯示，其余行的開頭距左邊有5em距離。使用百分比值div width:500px;p text-indent:20%;hello world!縮進的長度為：百分比值乘以該元素的父元素的寬度。水平對齊p text-align:left;文本左對齊，還有center，right，justify（文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等）字

6、間隔p word-spacing:3px;文本行中字（單詞）間的間隔。（可以使用負值）字母間隔p letter-spacing:3px;以上兩種的默認值都是normal，和0一樣。字符轉(zhuǎn)換p text-transform:none;屬性值：uppercase:全大寫，lowercase:全小寫，capitalize:每個單詞的首字母大寫。文本裝飾p text-decoration:none;屬性值：underline:下劃線，overline:文本頂部一條線，line-through:橫線從文本中間穿過，blink:使文本閃爍。注：none值會關(guān)閉原本應(yīng)用到一個元素上的所有裝飾。比如鏈接的下劃

7、線。p text-decoration:underline overline;可以這樣使文本同時擁有上下劃線。CSS字體注：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 inherit。font用于將所有字體的屬性值寫到一個聲明中。設(shè)置文本字體p font-family:Times, TimesNR, New Century Schoolbook,Georgia, New York, serif;根據(jù)這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。當(dāng)一個字體名中有一個或多個空格（比如 Ne

8、w York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。設(shè)置字體大小p font-size:30;其他屬性值：xx-small，x-small，small，medium，large，x-large，xx-large（默認值是medium）smaller：把 font-size 設(shè)置為比父元素更小的尺寸。larger：把 font-size 設(shè)置為比父元素更大的尺寸。inherit：規(guī)定應(yīng)該從父元素繼承字體尺寸。200%：把 font-size 設(shè)置為基于父元素的一個百分比值。設(shè)置字體風(fēng)格p font-style:normal; （默認值）it

9、alic：瀏覽器會顯示一個斜體的字體樣式。oblique：瀏覽器會顯示一個傾斜的字體樣式。inherit：規(guī)定應(yīng)該從父元素繼承字體樣式。設(shè)置字體異體p font-variant:small-caps;瀏覽器會顯示小型大寫字母的字體。設(shè)置字體粗細p font-weight:bold; (設(shè)置字體為粗體)bolder：定義更粗的字符。lighter：定義更細的字符。100900：定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。CSS列表要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標(biāo)志類型。設(shè)置列表標(biāo)記類型ul list-style-type:disc;

10、其他屬性值：none：無標(biāo)記。disc：實心圓。（默認值）circle：空心圓。square：實心方塊。decimal：數(shù)字。decimal-leading-zero：0開頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)lower-roman：小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)upper-roman：大寫羅馬數(shù)字(I, II, III, IV, V, 等。)lower-alpha：小寫英文字母。upper-alpha：大寫英文字母。將圖像作為列表標(biāo)志ul list-style-image: url(/i/eg_arrow.gif);設(shè)置列表標(biāo)志的位置ul list-style-position:outside;outside：默認值