CSS 之基礎(chǔ)

CSS --- Cascading Style Sheets 層疊樣式表

Cascading 層疊: 一種樣式疊加在另一種樣式的一種方式

Style Sheets 樣式表: 控制網(wǎng)頁文檔外觀和感觀.

CSS 和HTML是工作在一起的:

HTML: 構(gòu)建出網(wǎng)頁的結(jié)構(gòu)

CSS: 定義HTML元素如何顯示

問題: 樣式表的作用?

答案: 控制網(wǎng)頁文檔外觀和感觀.

為什么使用CSS?

CSS 允許你對指定的HTML元素應(yīng)用指定的樣式.

CSS的主要好處是允許你把樣式和內(nèi)容分離挡毅。

只使用HTML, 所有的樣式和格式都在一起,隨著頁面的內(nèi)容增加,將增加維護難度.

所有格式可以(應(yīng)該可以)從HTML文件中移除并存儲在單獨的CCS文件中.

內(nèi)聯(lián)CSS

使用內(nèi)聯(lián)樣式是其中一種插入樣式表的方式,使用內(nèi)聯(lián)樣式,獨有的樣式被應(yīng)用在單一的HTML元素上.

為了使用內(nèi)聯(lián)樣式,可以在相關(guān)的表簽上添加style屬性.

下面的例子展示如何使 P元素獲得灰色的背景和白色的文本:

<!DOCTYPE html>
<html lang="zh-cn">
<body>
<p style = "color: white; background-color:gray;">

這是一個內(nèi)聯(lián)樣式的例了

</p>
</body>
</html>

嵌入/內(nèi)部CSS

內(nèi)部樣式是被定義在<style>元素內(nèi)的,在HTML頁面中的head部份.
例如:下面的代碼應(yīng)用在所有的P元素中:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: white;
            background-color: gray;
        }
    </style>
</head>
<body>
    <p>這是我的第一個段落</p>
    <p>這是我的第二個段落</p>
</body>
</html>
12.PNG

外部 CSS

使用這種方法,所有樣式規(guī)則被包含在一個文本文件中,這個文本文件的擴展名為.css.
這個CSS文件在HTML文件使用<link>表簽來引用,<link>元素被包含在head部分.
下面是個例子:
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>

<body>
    <p>這是我的第一個段落</p>
    <p>這是我的第二個段落</p>
    <p>這是我的第三個段落</p>
</body>

</html>

CSS文件:

p {
    color: white;
    background-color: gray;
}
A.PNG

層級

一個網(wǎng)頁的最終呈現(xiàn)是各種樣式規(guī)則的結(jié)果.
形成層級樣式信息的主要三種來源:
---來自網(wǎng)頁作者創(chuàng)建的樣式
---來自瀏覽器默認的樣式
---來自用戶指定的樣式
CSS是Cassading Style Sheets的首字母縮寫.

Inheritance 繼承

繼承是指屬性在網(wǎng)頁中的流動行式, 除非有指定定義外,一個子元素通常會具有其父級元素的特征.
例如:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            color: green;
            font-family: Arial;
        }    
    </style>
</head>
<body>
    <p>這是在段落中的文本</p>
</body>
</html>
A.PNG

因為 P標簽(子元素)在body標簽的內(nèi)部(父級元素),它具有body標簽中所有的樣式.

階段小結(jié)

三種樣式來源中,哪一種是網(wǎng)站最優(yōu)的選擇? (A)
A: 外部
B: 內(nèi)聯(lián)
C: 內(nèi)部

當(dāng)使用內(nèi)部樣試的時候,"style"屬于以下哪種性質(zhì)? (C)
A: value 值
B: property 屬性
C: tag 標簽

樣式的定義規(guī)則包含:選擇器, 屬性和

補充空格上的內(nèi)容使得P元素具有白色文本的樣式
p {___ #FFF;}------答案: color:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子捣郊,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寻定,死亡現(xiàn)場離奇詭異,居然都是意外死亡精耐,警方通過查閱死者的電腦和手機狼速,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來卦停,“玉大人向胡,你說我怎么就攤上這事【辏” “怎么了僵芹?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長专执。 經(jīng)常有香客問我淮捆,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任攀痊,我火速辦了婚禮桐腌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘苟径。我一直安慰自己案站,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布棘街。 她就那樣靜靜地躺著蟆盐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪遭殉。 梳的紋絲不亂的頭發(fā)上石挂,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天,我揣著相機與錄音险污,去河邊找鬼痹愚。 笑死,一個胖子當(dāng)著我的面吹牛蛔糯,可吹牛的內(nèi)容都是我干的拯腮。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蚁飒,長吁一口氣:“原來是場噩夢啊……” “哼动壤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起淮逻,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤琼懊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后弦蹂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肩碟,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年凸椿,在試婚紗的時候發(fā)現(xiàn)自己被綠了削祈。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡脑漫,死狀恐怖髓抑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情优幸,我是刑警寧澤吨拍,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站网杆,受9級特大地震影響羹饰,放射性物質(zhì)發(fā)生泄漏伊滋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一队秩、第九天 我趴在偏房一處隱蔽的房頂上張望笑旺。 院中可真熱鬧,春花似錦馍资、人聲如沸筒主。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乌妙。三九已至,卻和暖如春建钥,著一層夾襖步出監(jiān)牢的瞬間藤韵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工熊经, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留荠察,地道東北人。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓奈搜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親盯荤。 傳聞我的和親對象是個殘疾皇子馋吗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,860評論 2 361