Pro017-從零開始HTML[#017]——5分鐘-CSS 層疊樣式表

<html>標簽

#017_Apl_CSS

????上一節(jié)課我們學習了如何該表 HTML 顯示內(nèi)容的樣式,不過這些樣式都是在 HTML 文檔內(nèi)部的,如果,我們有大量的頁面需要按照這個樣式表來對文檔進行格式化穆桂,而且這個樣式表規(guī)定的風格是十分完善的,是可以通用到所喲頁面的融虽,我們就需要用到外部樣式表——層疊樣式表享完。CSS(CascadingStyleSheets)


CSS有什么用?

????HTML 通過樣式定義如何顯示 HTML 元素衣形,樣式通常存儲在樣式表中驼侠,CSS里面層疊了大量的樣式表,把樣式添加到 HTML 中谆吴,是為了解決內(nèi)容與表現(xiàn)分離的問題倒源,與此同時,外部樣式表可以極大提高工作效率句狼。

上節(jié)課內(nèi)容回顧

? ? 上節(jié)課我們在 head 部分添加了一個內(nèi)部樣式表(代碼見黃色框部分)笋熬,正如我們開頭所說的,如果項目的 HTML 文件越來越多腻菇,是不是每一個 HTML 文檔的開頭都要加上這樣一個內(nèi)不樣式表啊胳螟,這個內(nèi)部樣式表相對來說已經(jīng)是一個簡單的內(nèi)部樣式表了,如果之后定義的樣式越來越多筹吐,那么不是每個 HTML 文檔都多上了一大段糖耸。

? ? 這時候,就要用到 CSS 了丘薛。

css 文檔

? ? 可以看見嘉竟,在 css 文檔中,我們用來定義樣式的代碼和在 HTML 文檔中的基本一樣,改變的 只是文檔的后綴舍扰,css 文檔 后綴不是 .html 而是 .css?

link 標簽調(diào)用外部樣式表

? ? 然后用 #011 課程里面說過的 link 標簽倦蚪,從外部導入樣式表,除了 href 屬性是填入對應的 css 文件的相對地址边苹,其他直接照抄陵且。


css 文檔怎么編寫

????css 文檔就是內(nèi)部樣式表 content 內(nèi)容值 的拆解,我們可以把原來內(nèi)部樣式表的內(nèi)容值逐一拆解放入 css 中个束,另存為 .css 文件慕购,放到項目對應文件夾,這樣就能用了茬底。

css 文檔編寫

同一個 HTML 元素被重復定義

? ? ?細心的同學可能注意到了脓钾,我把之前的內(nèi)部樣式表注釋掉了。這是因為桩警,同一個 HTML 元素被多個樣式定義的時候,一般而言昌妹,所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中捶枢,其中數(shù)字越大優(yōu)先權越高。

1飞崖、瀏覽器缺省設置

2烂叔、外部樣式表

3、內(nèi)部樣式表(位于 [head>] 標簽內(nèi)部)

4固歪、內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)

? ? 我們需要根據(jù)自己的需求蒜鸡,合理利用這些優(yōu)先級,制作出自己想要的顯示元素效果牢裳。

最終效果圖
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末逢防,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蒲讯,更是在濱河造成了極大的恐慌忘朝,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件判帮,死亡現(xiàn)場離奇詭異局嘁,居然都是意外死亡,警方通過查閱死者的電腦和手機晦墙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門悦昵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晌畅,你說我怎么就攤上這事但指。” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵枚赡,是天一觀的道長氓癌。 經(jīng)常有香客問我,道長贫橙,這世上最難降的妖魔是什么贪婉? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮卢肃,結果婚禮上疲迂,老公的妹妹穿的比我還像新娘。我一直安慰自己莫湘,他們只是感情好尤蒿,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著幅垮,像睡著了一般腰池。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上忙芒,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天示弓,我揣著相機與錄音,去河邊找鬼呵萨。 笑死碟联,一個胖子當著我的面吹牛明吩,可吹牛的內(nèi)容都是我干的锐朴。 我是一名探鬼主播哗魂,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼忱嘹!你這毒婦竟也來了嘱腥?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤拘悦,失蹤者是張志新(化名)和其女友劉穎爹橱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體窄做,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡愧驱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了椭盏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片组砚。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖掏颊,靈堂內(nèi)的尸體忽然破棺而出糟红,到底是詐尸還是另有隱情艾帐,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布盆偿,位于F島的核電站柒爸,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏事扭。R本人自食惡果不足惜捎稚,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望求橄。 院中可真熱鬧今野,春花似錦、人聲如沸罐农。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涵亏。三九已至宰睡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間气筋,已是汗流浹背夹厌。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留裆悄,地道東北人。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓臂聋,卻偏偏與公主長得像光稼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子孩等,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案艾君? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,753評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準肄方。 注意:講述HT...
    kismetajun閱讀 27,486評論 1 45
  • CSS全稱為“層疊樣式表 (Cascading Style Sheets)”冰垄,它主要是用于定義HTML內(nèi)容在瀏覽器...
    百作不死的學習閱讀 1,164評論 0 7
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,641評論 0 30
  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結構。 ??DOM2 和 DOM3 級則在這個結構...
    霜天曉閱讀 1,440評論 1 3