CSS 指層疊樣式表 (Cascading Style Sheets),是一種樣式表語言,用來描述 HTML 或 XML(包括如 SVG、XHTML 之類的 XML 分支語言)文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。
2、為何使用CSS網頁是由HTML標簽組成的,那么這些標簽會根據瀏覽器的默認方式進行排版與樣式的渲染,如果想要更改這些默認的樣式,推薦用CSS,因為這樣不僅實現了內容與表現分離的問題,而且更易于維護。
3、CSS語法CSS 語法由兩個主要的部分構成:選擇器,以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }其中每條聲明由一個屬性和一個值組成。
selector {property: html' target='_blank'>value}下面這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值。
h1 {color:red; font-size:14px;}這張圖形象的表示了上面代碼的結構

CSS對空格和大小寫都不敏感,也就是說大小寫均可,是否包含空格不會影響 CSS 在瀏覽器中的工作效果
/* 屬性為大小,值為小寫,并且冒號后面有多個空格 */ .box {COLOR: blue;}/* 建議寫法 */.box {color: blue;}上面的兩種寫法在瀏覽器中顯示的效果是一樣的。
4、CSS注釋與HTML語言一樣,CSS也同樣存在著注釋
4.1、單行注釋/* 這是表示單行的注釋 */
注意:注釋不能嵌套,例如下面的寫法都是錯誤的
/* 這是表示*/單行的注釋 *//* 這是表示單行的注釋 /* */ */4.2、多行注釋
/* * 這是表示多行的注釋 * 注釋內容1 * 注釋內容2 */5、引入方式5.1、行內式
行內式是在標簽的style屬性中設定CSS樣式。
div >5.2、嵌入式嵌入式是將CSS樣式集中寫在網頁的 head 標簽的 style /style 標簽對中
head meta charset= UTF-8 title 嵌入式 /title ... style type= text/css ...在這里寫CSS樣式 /style /head5.3、外聯式將CSS樣式寫在一個獨立的文件中,然后通過link標簽引入CSS樣式文件
head meta charset= UTF-8 title 外聯式 /title ... link rel= stylesheet href= outer.css?1.1.11 / /headtype屬性:只有一個選項,“text/css ,指定當前為css文本文件
5.4、導入式(不推薦使用)
rel:指定當前HTML文件與CSS文件的關系是樣式表
href:指定外聯樣式表的路徑將CSS樣式寫在一個獨立的文件中,然后通過@import標簽引入CSS樣式文件
head meta charset= UTF-8 title 導入式 /title style type= text/css @import url(css/outer.css);/*其他css樣式*/ /style /head注意:導入樣式的書寫必須在所有的css規則書寫之前,否則失效,導入外部樣式表與鏈入外部樣式表類似,相當于在文件中直接使用,這會占用html文件的空間,故不推薦使用該方法,而且有些瀏覽器會最后加載導入的樣式,導致剛開始打開網頁的時候,沒有任何的樣式,到加載完畢之后才會導入樣式,用戶體驗不好
導入外部樣式表的另一種用途是,如果一個文件需要引用很多外部樣式表,可以把這些要引用的樣式表放在一個文件中,然后需要引用的文件則只需引用一個文件即可,如
import.css內容如下
@import “a.css”
@import “b.css”
@import “c.css”除了以上4種導入的樣式之外,這里需要知道所有的標簽都有一個默認樣式,我們稱為瀏覽器樣式,或者默認樣式。也就是不加任何樣式,HTML標簽在瀏覽器中的顯示的樣子。
6、建議與注意點一些建議
為了以后的對代碼的優化,建議在每個屬性值的后面加一個分號,如:p { font-style: normal; }
某些html屬性有自定默認的CSS屬性值,如: h1 /h1
為了兼容瀏覽器,建議將所有的元素的CSS屬性值重置,如: h1 /h1 ——— h1 { font-size: 12px; }
如果想要用某種特殊字體的話,又擔心用戶的上面沒有該字體,則可以用圖片代替
中英文字體的設置順序,先設置英文的字體,再設置中文的字體,如:p { Courier New , 宋體 },建議字體用雙引號
樣式應用順序
行內樣式優先級最高
針對相同的樣式屬性,不同的樣式屬性將以合并的方式呈現
相同樣式并且相同屬性,呈現的方式由在 head 中的順序決定,后面會覆蓋前面定義過的屬性
!important 指定樣式規則應用最優先
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答