CSS知識點總結(jié)整理版

1、1 CSS1.1 css是什么CSS 指層疊樣式表 (CascadingStyleSheets)樣式定義如何顯示HTML 元素樣式一般存儲在樣式表【.css文獻(xiàn)、css區(qū)域】中把樣式添加到 HTML 4.0 中，是為理解決內(nèi)容與體現(xiàn)分離的問題外部樣式表可以極大提高工作效率外部樣式表一般存儲在CSS 文獻(xiàn)中多種樣式定義可層疊為一1.2 css作用樣式表解決了html的內(nèi)容與體現(xiàn)分離使用樣式表極大的提高了工作效率。1.3 css書寫規(guī)則本語法 Css規(guī)則重要由兩部分構(gòu)成 1.選擇器 2.一條或多條屬性聲明選擇器重要作用是為了擬定需要變化樣式的HTML元素每一條聲明由一種屬性和一種值構(gòu)成，使用花括號

2、來包圍聲明，屬性與值之間使用冒號(:)分開如圖:值的單位書寫注意事項如果值為若干單詞，則要給值加引號多種聲明之間使用分號(;)分開css對大小寫不敏感,如果波及到與html文檔一起使用時，class與id名稱對大小寫敏感1.4 導(dǎo)入css方式第一種：內(nèi)聯(lián)樣式表要使用內(nèi)聯(lián)樣式，你需要在有關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以涉及任何 CSS 屬性例如：這是一種DIV 注意:慎用這種方式，它將內(nèi)容與顯示混合在一起，損失了樣式表的優(yōu)勢。一般狀況下，這種方式只有在一種標(biāo)簽上只應(yīng)用一次樣式時才會使用第二種：內(nèi)部樣式表我們可以使用標(biāo)簽在html文檔的中來定義樣式表。例如:這種方式，樣式

3、只適合應(yīng)用于一種頁面第三種：外部樣式表如果想要在多種頁面使用同一種樣式表，可以使用外部樣式表來導(dǎo)入。我們可以在html頁面上使用標(biāo)簽來導(dǎo)入外部樣式表。例如:瀏覽器會從mystyle.css文獻(xiàn)中讀取樣式，并對頁面上的html進行修飾。外部樣式表，應(yīng)當(dāng)以css為后綴來保存，可以使用任意文本編輯器對css文獻(xiàn)進行編輯。第四種：import導(dǎo)入這種方式也是外部導(dǎo)入。import與引用外部樣式表的區(qū)別【理解】1.import這種方式只有firefox支持，而ie不支持。2.import這種方式導(dǎo)入的css，會在整個頁面加載后，才會加載樣式。如果網(wǎng)絡(luò)不好狀況下，會先看到無樣式修飾的頁面，閃爍一下后，才會

4、看到有樣式修飾的頁面。而使用外部樣式表，會先裝載樣式表，這樣看到的就是有樣式修飾的頁面。import不支持通過javascript修改樣式，而link支持。優(yōu)先級問題內(nèi)聯(lián)樣式表內(nèi)部樣式表外部樣式表：就近原則1.5 CSS選擇器css選擇器重要是用于選擇需要添加樣式的html元素。對于css來說，它的選擇器有諸多，我們重要簡介如下幾種:id選擇器id選擇器使用#引入，它引用的是id屬性中的值。類選擇器類選擇器使用時,需要在類名前加一種點號(.)項目中，絕大部都是用類選擇器排版元素選擇器這是最常用的選擇器，簡樸說，文檔中的元素就是選擇器屬性選擇器如果需要選擇有某個屬性的元素，而不管屬性是什么，可以

5、使用屬性選擇器偽類css偽類用于向某些選擇器添加特殊效果。下面我們簡介一下錨偽類。在支持css的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示這些狀態(tài)涉及：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸念狀態(tài)。層級選擇器Id、元素、類、屬性選擇器的結(jié)合1.6 CSS屬性字體Css字體屬性定義文本的字體系列，大小，加粗，風(fēng)格(如斜體)和變形(如小型大寫字母)常用屬性:font:簡寫屬性，作用是把所有針對字體的屬性設(shè)立在一種聲明中。【style size family】font-family:定義字體系列font-size:定義字體的尺寸font-style:定義字體風(fēng)格文本CSS 文本屬性可定義文

6、本的外觀。通過文本屬性，您可以變化文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。常用屬性color:定義文本顏色text-align:定義文本對齊方式letter-spacing:定義字符間隔背景CSS 容許應(yīng)用純色作為背景，也容許使用背景圖像創(chuàng)立相稱復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上。常用屬性:background:簡寫屬性，作用是將背景屬性設(shè)立在一種聲明中background-color:定義背景顏色background-image:定義背景圖片background-position:定義背景圖片的起始位置【left,center,right】bac

7、kground-repeat:定義背景圖片與否及如何反復(fù)尺寸CSS 尺寸 (Dimension) 屬性容許你控制元素的高度和寬度。常用屬性:width:設(shè)立元素的寬度height:設(shè)立元素的高度列表CSS 列表屬性容許你放置、變化列表項標(biāo)志，或者將圖像作為列表項標(biāo)志。常用屬性:list-style:簡寫屬性。用于把所有用于列表的屬性設(shè)立于一種聲明中。list-style-image:定義列表項標(biāo)志為圖象list-style-position:定義列表項標(biāo)志的位置list-style-type:定義列表項標(biāo)志的類型。表格CSS 表格屬性可以協(xié)助您極大地改善表格的外觀常用屬性:border-col

8、lapse:定義與否把表格邊框合并為單一的邊框。border-spacing:定義分隔單元格邊框的距離caption-side:定義表格標(biāo)題的位置【top,bottom】輪廓輪廓（outline）是繪制于元素周邊的一條線，位于邊框邊沿的外圍，可起到突出元素的作用。CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。常用屬性:outline:在一種聲明中設(shè)立所有的輪廓屬性outline-color:定義輪廓的顏色outline-style:定義輪廓的樣式outline-width:定義輪廓的寬度定位CSS 定位 (Positioning) 屬性容許你對元素進行定位。定位的基本思想很簡樸，

9、它容許你定義元素框相對于其正常位置應(yīng)當(dāng)浮現(xiàn)的位置，或者相對于父元素、另一種元素甚至瀏覽器窗口自身的位置CSS 有三種基本的定位機制：一般流、浮動和絕對定位。常用屬性:position:把元素放置到一種靜態(tài)的,相對的，絕對的，或固定的位置中。top:定義了定位元素的上外邊距邊界與其涉及塊上邊界之間的偏移量right: 定義了定位元素右外邊距邊界與其涉及塊右邊界之間的偏移left: 定義了定位元素左外邊距邊界與其涉及塊左邊界之間的偏移bottom: 定義了定位元素下外邊距邊界與其涉及塊下邊界之間的偏移。相對定位是一種非常容易掌握的概念。如對一種元素進行相對定位，它將出目前它所在的位置上。然后通過設(shè)

10、立垂直或水平位置，讓這個元素“相對于”它的起點進行移動。絕對布局分類CSS 分類屬性容許你控制如何顯示元素，設(shè)立圖像顯示于另一元素中的何處，相對于其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。常用屬性clear:設(shè)立一種元素的側(cè)面與否容許其他的浮動元素float:定義元素在哪個方向浮動cursor:當(dāng)指向某元素之上時顯示的指針類型display:定義與否及如何顯示元素visibility:定義元素與否可見或不可見。浮動：displayvisibilityclear1.7 CSS框模型盒子模型CSS 框模型 (Box Model) 規(guī)定了元素框解決元素內(nèi)容、內(nèi)邊距、邊框和外邊距的

11、方式。元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊沿是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素邊框元素的邊框 (border) 是環(huán)繞元素內(nèi)容和內(nèi)邊距的一條或多條線。CSS border 屬性容許你規(guī)定元素邊框的樣式、寬度和顏色。常用屬性:border:簡寫屬性，用于把針對于四個邊的屬性設(shè)立在一種聲明。border-color:簡寫屬性，定義元素邊框中可見部分的顏色，或為四個邊分別設(shè)立顏色。border-style:用于定義所有邊框的樣式，或者單獨為各邊設(shè)立邊框樣式。border-width:簡寫屬性，用于為元素的所有邊

12、框設(shè)立寬度，或則單獨地為各邊邊框設(shè)立寬度border-top:簡寫屬性，用于把上邊框的所有屬性設(shè)立到一種聲明中border-right:簡寫屬性，用于把右邊框所有屬性設(shè)立到一種聲明中border-bottom:簡寫屬性，用于把下邊框的所有屬性設(shè)立到一種聲明中border-left:簡寫屬性，用于把左邊框的所有屬性設(shè)立到一種聲明中。外邊距環(huán)繞在元素邊框的空白區(qū)域是外邊距。設(shè)立外邊距會在元素外創(chuàng)立額外的“空白”。設(shè)立外邊距的最簡樸的措施就是使用 margin 屬性，這個屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值。常用屬性:margin:簡寫屬性，在一種聲明中設(shè)立所有外邊距屬性margin-top:定義元素的上外邊距margin-right:定義元素的右外邊距margin-bottom:定義元素的下外邊距margin-left定義元素的左外邊距注意:在使用margin來定義所有外邊距時，可以使用值復(fù)制。如果缺少左外邊距的值，則使用右外邊距的值。如果缺少下外邊距的值，則使用上外邊距的值。如果缺少右外邊距的值，則使用上外邊距的值。內(nèi)邊距元素的內(nèi)邊