1、Css 知識點總結(jié)Css 知識點總結(jié)1基本格式：31、派生選擇器32、id 選擇器（選擇器以 # 來定義）：3如何插入樣式表41、外部樣式表42、內(nèi)部樣式表43、內(nèi)聯(lián)樣式44、多重樣式4css背景51、背景色52、背景圖像53、背景重復(fù)64、背景定位65、背景關(guān)聯(lián)6css文本71、文本顏色：text-indent 屬性：72、水平對齊：text-algin屬性：73、字間隔：word-spacing 屬性85、字符轉(zhuǎn)換text-transform 屬性86、文本裝飾87、direction 屬性規(guī)定文本的方向 / 書寫方向。8CSS 字體91、font 屬性92、font-family 屬性9

2、3、font-style 屬性104、font-variant 屬性105、font-weight 屬性106、font-size 屬性117、line-height 屬性11CSS 列表121、設(shè)置所有的列表屬性122、list-style-type 屬性123、list-style-position 屬性134、list-style-image 屬性13CSS 表格141、border-collapse 屬性142、border-spacing 屬性143、caption-side 屬性154、empty-cells 屬性155、table-layout 屬性15CSS 框模型概述16CS

3、S 內(nèi)邊距16CSS 邊框171、border 簡寫172、4個邊框分別設(shè)置18CSS 外邊距181、margin 屬性18基本格式：三種格式：（CSS 語法由三部分構(gòu)成：選擇器、屬性和值）例：body color: blue1、派生選擇器例：Css部分：strong color: red; h2 color: red; h2 strong color: blue; Html文件部分:The strongly emphasized word in this paragraph isred.This subhead is also red.The strongly emphasized word

4、 in this subhead isblue.2、id 選擇器（選擇器以 # 來定義）：例：Css部分：#red color:red;#green color:green;Html 文本：這個段落是紅色。這個段落是綠色。3、類選擇器例：Css部分：.center text-align: centerHtml文本：This heading will be center-alignedThis paragraph will also be center-aligned.如何插入樣式表1、外部樣式表當樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文

5、件來改變整個站點的外觀。每個頁面使用 標簽鏈接到樣式表。 標簽在（文檔的）頭部：瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔。2、內(nèi)部樣式表當單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用 標簽在文檔頭部定義內(nèi)部樣式表，就像這樣: hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif);3、內(nèi)聯(lián)樣式要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距

6、：This is a paragraph4、多重樣式如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。例如，外部樣式表擁有針對 h3 選擇器的三個屬性：h3 color: red; text-align: left; font-size: 8pt; 而內(nèi)部樣式表擁有針對 h3 選擇器的兩個屬性：h3 text-align: right; font-size: 20pt; 假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接，那么 h3 得到的樣式是：color: red; text-align: right; font-size: 20pt;即顏色屬性將被繼

7、承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內(nèi)部樣式表中的規(guī)則取代。css背景1、背景色background-color 屬性為元素設(shè)置背景色。這個屬性接受任何合法的顏色值。例：這條規(guī)則把元素的背景設(shè)置為灰色：p background-color: gray;2、背景圖像 background-image 屬性為元素設(shè)置背景圖像。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。例：如果需要設(shè)置一個背景圖像，必須為這個屬性設(shè)置一個 URL 值：body background-image: url(/i/eg

8、_bg_04.gif);3、背景重復(fù)background-repeat屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪。默認地，背景圖像將從一個元素的左上角開始。例：body background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; 4、背景定位background-position 屬性改變圖像在背景中的位置：例：在 body 元素中將一個背景圖像居中

9、放置：body background-image:url(/i/eg_bg_03.gif); background-repeat:no-repeat; background-position:center; background-position 屬性提供值有很多方法a) background-position屬性后面的值可為關(guān)鍵字：b) background-position屬性后面的值可為百分數(shù)：例background-position:50% 50%;c) background-position屬性后面的值可為長度值：例：background-position:50px 100px;5、

10、背景關(guān)聯(lián)您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區(qū)是固定的（fixed），因此不會受到滾動的影響：body background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed css文本1、文本顏色：text-indent 屬性：例：p background-color: gray;a) 使用負值：例：text-indent: -5em;注意：在為 text-indent 設(shè)置負值時要當心，如果對一個段

11、落設(shè)置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對負縮進再設(shè)置一個外邊距或一些內(nèi)邊距：p text-indent: -5em; padding-left: 5em;b) 使用百分比值例：p text-indent: 20%;2、水平對齊：text-algin屬性：值 left、right 和 center 會導(dǎo)致元素中的文本分別左對齊、右對齊和居中。3、字間隔：word-spacing 屬性word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那么字之間的間隔就會增加。為 word-spacing 設(shè)置一個負值，會把它拉近

12、：p.spread word-spacing: 30px;p.tight word-spacing: -0.5em;This is a paragraph. The spaces between words will be decreased.This is a paragraph. The spaces between words will be increased.5、字符轉(zhuǎn)換text-transform 屬性text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：none 、uppercase 、lowercase 、capitalize 。默認值 none 對文本不做

13、任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。例：h1 text-transform: uppercase6、文本裝飾text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。text-decoration 有 5 個值：none 、underline、overline 、line-through、blink。 不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在

14、文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。a text-decoration: none;7、direction 屬性規(guī)定文本的方向 / 書寫方向。該屬性指定了塊的基本書寫方向，以及針對 Unicode 雙向算法的嵌入和覆蓋方向。不支持雙向文本的用戶代理可以忽略這個屬性。實例：把文本方向設(shè)置為“從右向左”：div direction: rtl CSS 字體1、 font 屬性解釋：簡寫屬性在一個聲明中設(shè)置所有字體屬性。

15、可以按順序設(shè)置如下屬性：u font-style u font-variant u font-weight u font-size/line-height u font-family 可以不設(shè)置其中的某個值，比如 font:100% verdana; 也是允許的。未設(shè)置的屬性會使用其默認值。實例：在一個聲明中設(shè)置所有字體屬性：p.ex1 font:italic arial,sans-serif; p.ex2 font:italic bold 12px/20px arial,sans-serif; 2、 font-family 屬性定義： font-family 屬性用于設(shè)置字體系列例：如果你希

16、望文檔使用一種 sans-serif 字體，但是你并不關(guān)心是哪一種字體，以下就是一個合適的聲明：body font-family: sans-serif;3、 font-style 屬性定義：font-style 屬性定義字體的風(fēng)格可能值：normal默認值。瀏覽器顯示一個標準的字體樣式。italic瀏覽器會顯示一個斜體的字體樣式。oblique瀏覽器會顯示一個傾斜的字體樣式。inherit規(guī)定應(yīng)該從父元素繼承字體樣式。實例：h1 font-size:250%;4、 font-variant 屬性定義：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均換為大寫，但是所有使用小型大寫字體的

17、字母與其余文本相比，其字體尺寸更小?？赡苤担簄ormal默認值。瀏覽器會顯示一個標準的字體。small-caps瀏覽器會顯示小型大寫字母的字體。inherit規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。實例：p.small font-variant:small-caps; 5、 font-weight 屬性定義：設(shè)置文本的粗細可能的值：normal默認值。定義標準的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細的字符。100 200 300 400 500 600 700 800 900 定義由粗到細的字符。400 等同于 normal，而 700

18、 等同于 bold。inherit規(guī)定應(yīng)該從父元素繼承字體的粗細。實例：p.normal font-weight:normal;6、 font-size 屬性定義：可設(shè)置字體的尺寸可能的值：xx-small x-small small medium large x-large xx-large 把字體的尺寸設(shè)置為不同的尺寸，從 xx-small 到 xx-large。默認值：medium。smaller把 font-size 設(shè)置為比父元素更小的尺寸。larger把 font-size 設(shè)置為比父元素更大的尺寸。length把 font-size 設(shè)置為一個固定的值。%把 font-size

19、設(shè)置為基于父元素的一個百分比值。inherit規(guī)定應(yīng)該從父元素繼承字體尺寸。實例：h1 font-size:250%;7、 line-height 屬性定義：設(shè)置行間的距離（行高）可能值：normal默認。設(shè)置合理的行間距。number設(shè)置數(shù)字，此數(shù)字會與當前的字體尺寸相乘來設(shè)置行間距。length設(shè)置固定的行間距。%基于當前字體尺寸的百分比行間距。inherit規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。實例p.small line-height:90%CSS 列表1、 設(shè)置所有的列表屬性定義：list-style 簡寫屬性在一個聲明中設(shè)置所有的列表屬性。可能值：list-sty

20、le-type設(shè)置列表項標記的類型。參閱：list-style-type 中可能的值。list-style-position設(shè)置在何處放置列表項標記。參閱：list-style-position 中可能的值。list-style-image使用圖像來替換列表項的標記。參閱：list-style-image 中可能的值。inherit規(guī)定應(yīng)該從父元素繼承 list-style 屬性的值。實例：ul list-style:square inside url(/i/arrow.gif); 2、 list-style-type 屬性定義：設(shè)置列表項標記的類型可能值：實例：ul.circle list-

21、style-type:circle;3、 list-style-position 屬性定義：設(shè)置在何處放置列表項標記可能值：實例：ul list-style-position:inside;4、 list-style-image 屬性定義：使用圖像來替換列表項的標記可能值：實例：ul list-style-image:url(/i/arrow.gif);CSS 表格所有屬性列表：1、 border-collapse 屬性定義：設(shè)置表格的邊框是否被合并為一個單一的邊框可能值：實例：table border-collapse:collapse; 2、 border-spacing 屬性定義：設(shè)置相

22、鄰單元格的邊框間的距離（僅用于“邊框分離”模式）?？赡苤担簩嵗簍able border-spacing:10px 50px; 3、 caption-side 屬性定義：設(shè)置表格標題的位置可能值：實例：caption caption-side:bottom; 4、 empty-cells 屬性定義：設(shè)置是否顯示表格中的空單元格（僅用于“分離邊框”模式）可能值：實例：table empty-cells:hide; 5、 table-layout 屬性定義：用來顯示表格單元格、行、列的算法規(guī)則可能值：實例：table table-layout:fixed; CSS 框模型概述假設(shè)框的每個邊上有 10 個像素的