3-15. CSS 概述

1欠啤、CSS概念

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示 HTML 元素
  • 樣式通常存儲在樣式表中
  • 把樣式添加到 HTML 4.0 中荚藻,是為了解決內(nèi)容與表現(xiàn)分離的問題
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常存儲在 CSS 文件中
  • 多個樣式定義可層疊為一

2、樣式解決了一個普遍的問題

  • HTML 標簽原本被設(shè)計為用于定義文檔內(nèi)容洁段。通過使用 <h1>应狱、<p>、<table> 這樣的標簽祠丝,HTML 的初衷是表達“這是標題”疾呻、“這是段落”、“這是表格”之類的信息写半。同時文檔布局由瀏覽器來完成岸蜗,而不使用任何的格式化標簽。
  • 由于兩種主要的瀏覽器(Netscape 和 Internet Explorer)不斷地將新的 HTML 標簽和屬性(比如字體標簽和顏色屬性)添加到 HTML 規(guī)范中叠蝇,創(chuàng)建文檔內(nèi)容清晰地獨立于文檔表現(xiàn)層的站點變得越來越困難散吵。
  • 為了解決這個問題,萬維網(wǎng)聯(lián)盟(W3C)蟆肆,這個非營利的標準化聯(lián)盟,肩負起了 HTML 標準化的使命晦款,并在 HTML 4.0 之外創(chuàng)造出樣式(Style)炎功。
  • 所有的主流瀏覽器均支持層疊樣式表。

3缓溅、樣式表極大地提高了工作效率

  • 樣式通常保存在外部的 .css 文件中蛇损。通過僅僅編輯一個簡單的 CSS 文檔,外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
  • 由于允許同時控制多重頁面的樣式和布局淤齐,CSS 可以稱得上 WEB 設(shè)計領(lǐng)域的一個突破股囊。作為網(wǎng)站開發(fā)者,你能夠為每個 HTML 元素定義樣式更啄,并將之應用于你希望的任意多的頁面中稚疹。如需進行全局的更新,只需簡單地改變樣式祭务,然后網(wǎng)站中的所有元素均會自動地更新内狗。

4、多重樣式將層疊為一個
樣式表允許以多種方式規(guī)定樣式信息义锥。樣式可以規(guī)定在單個的 HTML 元素中柳沙,在 HTML 頁的頭元素中,或在一個外部的 CSS 文件中拌倍。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表赂鲤。

5、層疊次序
當同一個 HTML 元素被不止一個樣式定義時柱恤,會使用哪個樣式呢数初?
一般而言,所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中膨更,其中數(shù)字 4 擁有最高的優(yōu)先權(quán)妙真。

  • 瀏覽器缺省設(shè)置
  • 外部樣式表
  • 內(nèi)部樣式表(位于 <head> 標簽內(nèi)部)
  • 內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)
    因此,內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)擁有最高的優(yōu)先權(quán)荚守,這意味著它將優(yōu)先于以下的樣式聲明:<head> 標簽中的樣式聲明珍德,外部樣式表中的樣式聲明,或者瀏覽器中的樣式聲明(缺省值)矗漾。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末锈候,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子敞贡,更是在濱河造成了極大的恐慌泵琳,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件誊役,死亡現(xiàn)場離奇詭異获列,居然都是意外死亡,警方通過查閱死者的電腦和手機蛔垢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門击孩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鹏漆,你說我怎么就攤上這事巩梢〈葱梗” “怎么了?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵括蝠,是天一觀的道長鞠抑。 經(jīng)常有香客問我,道長忌警,這世上最難降的妖魔是什么搁拙? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮慨蓝,結(jié)果婚禮上感混,老公的妹妹穿的比我還像新娘。我一直安慰自己礼烈,他們只是感情好弧满,可當我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著此熬,像睡著了一般庭呜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上犀忱,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天募谎,我揣著相機與錄音,去河邊找鬼阴汇。 笑死数冬,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的搀庶。 我是一名探鬼主播拐纱,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼哥倔!你這毒婦竟也來了秸架?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤咆蒿,失蹤者是張志新(化名)和其女友劉穎东抹,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沃测,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡缭黔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蒂破。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片试浙。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖寞蚌,靈堂內(nèi)的尸體忽然破棺而出田巴,到底是詐尸還是另有隱情,我是刑警寧澤挟秤,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布壹哺,位于F島的核電站,受9級特大地震影響艘刚,放射性物質(zhì)發(fā)生泄漏管宵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一攀甚、第九天 我趴在偏房一處隱蔽的房頂上張望箩朴。 院中可真熱鬧,春花似錦秋度、人聲如沸炸庞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽埠居。三九已至,卻和暖如春事期,著一層夾襖步出監(jiān)牢的瞬間滥壕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工兽泣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留负蚊,地道東北人。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓渴庆,卻偏偏與公主長得像苍糠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子牵敷,可洞房花燭夜當晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容