八·初識CSS

  • CSS全稱為“層疊樣式表 (Cascading Style Sheets)”,它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式,如文字大小狡逢、顏色由境、字體加粗等棚亩。使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體虏杰、字號或者顏色等讥蟆。
  • CSS語法:CSS 規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明纺阔。
    selector {declaration1; declaration2; ... declarationN }
  • 選擇器通常是您需要改變樣式的 HTML 元素瘸彤,每條聲明由一個屬性和一個值組成。
  • 屬性(property)是您希望設(shè)置的樣式屬性(style attribute)笛钝。每個屬性有一個值质况。屬性和值被冒號分開。
    selector {property: value}
  • 你可以對選擇器進行分組玻靡,這樣结榄,被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開囤捻。在下面的例子中臼朗,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的最蕾。
    h1,h2,h3,h4,h5,h6 { color: green; }
  • 根據(jù) CSS依溯,子元素從父元素繼承屬性。但是它并不總是按此方式工作瘟则±杪看看下面這條規(guī)則:
    body { font-family: Verdana, sans-serif; }
    根據(jù)上面這條規(guī)則,站點的 body 元素將使用 Verdana 字體(假如訪問者的系統(tǒng)中存在該字體的話)醋拧。
  • 派生選擇器
    通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式慷嗜,你可以使標記更加簡潔。
    在 CSS1 中丹壕,通過這種方式來應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)庆械,這是由于它們依賴于上下文關(guān)系來應(yīng)用或者避免某項規(guī)則。在 CSS2 中菌赖,它們稱為派生選擇器缭乘,但是無論你如何稱呼它們,它們的作用都是相同的琉用。
    派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個標簽的樣式堕绩。通過合理地使用派生選擇器策幼,我們可以使 HTML 代碼變得更加整潔。
  • 如何插入樣式表
    當讀到一個樣式表時奴紧,瀏覽器會根據(jù)它來格式化 HTML 文檔特姐。插入樣式表的方法有三種:
    外部樣式表
    當樣式需要應(yīng)用于很多頁面時,外部樣式表將是理想的選擇黍氮。在使用外部樣式表的情況下唐含,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表沫浆。<link> 標簽在(文檔的)頭部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明捷枯,并根據(jù)它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯件缸。文件不能包含任何的 html 標簽铜靶。樣式表應(yīng)該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在屬性值與單位之間留有空格他炊。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” 争剿,它僅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作痊末。
內(nèi)部樣式表
當單個文檔需要特殊的樣式時蚕苇,就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標簽在文檔頭部定義內(nèi)部樣式表凿叠,就像這樣:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

內(nèi)聯(lián)樣式
由于要將表現(xiàn)和內(nèi)容混雜在一起涩笤,內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法盒件,例如當樣式僅需要在一個元素上應(yīng)用一次時蹬碧。
要使用內(nèi)聯(lián)樣式,你需要在相關(guān)的標簽內(nèi)使用樣式(style)屬性炒刁。Style 屬性可以包含任何 CSS 屬性恩沽。本例展示如何改變段落的顏色和左外邊距:

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義,那么屬性值將從更具體的樣式表中被繼承過來翔始。
例如罗心,外部樣式表擁有針對 h3 選擇器的三個屬性:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而內(nèi)部樣式表擁有針對 h3 選擇器的兩個屬性:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接,那么 h3 得到的樣式是:

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承于外部樣式表城瞎,而文字排列(text-alignment)和字體尺寸(font-size)會被內(nèi)部樣式表中的規(guī)則取代渤闷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市脖镀,隨后出現(xiàn)的幾起案子飒箭,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件补憾,死亡現(xiàn)場離奇詭異漫萄,居然都是意外死亡,警方通過查閱死者的電腦和手機盈匾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來毕骡,“玉大人削饵,你說我怎么就攤上這事∥次祝” “怎么了窿撬?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長叙凡。 經(jīng)常有香客問我劈伴,道長,這世上最難降的妖魔是什么握爷? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任跛璧,我火速辦了婚禮,結(jié)果婚禮上新啼,老公的妹妹穿的比我還像新娘追城。我一直安慰自己,他們只是感情好燥撞,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布座柱。 她就那樣靜靜地躺著,像睡著了一般物舒。 火紅的嫁衣襯著肌膚如雪色洞。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天冠胯,我揣著相機與錄音火诸,去河邊找鬼。 笑死涵叮,一個胖子當著我的面吹牛惭蹂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播割粮,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盾碗,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了舀瓢?” 一聲冷哼從身側(cè)響起廷雅,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后航缀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體商架,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年芥玉,在試婚紗的時候發(fā)現(xiàn)自己被綠了蛇摸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡灿巧,死狀恐怖赶袄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情抠藕,我是刑警寧澤饿肺,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站盾似,受9級特大地震影響敬辣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜零院,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一溉跃、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧门粪,春花似錦喊积、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拟蜻,卻和暖如春绎签,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背酝锅。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工诡必, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人搔扁。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓爸舒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親稿蹲。 傳聞我的和親對象是個殘疾皇子扭勉,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,751評論 1 92
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,553評論 32 459
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,055評論 0 1
  • ?前端面試題匯總 一苛聘、HTML和CSS 21 你做的頁面在哪些流覽器測試過涂炎?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8
  • 離別這一天唱捣,遲早都會來 只是我低估了 它來臨時两蟀,是這般的洶涌 四年前,懵懵懂懂的撞進海大 歡笑震缭、悲傷赂毯、相聚、離別 ...
    li柏謙閱讀 712評論 2 10