CSS基礎(chǔ):基礎(chǔ)和語(yǔ)法

CSS語(yǔ)法

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成:選擇器柏锄,以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素。

selector {declaration1; declaration2; ... declarationN }

每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性(property)是樣式屬性(style attribute)趾疚。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)以蕴。

selector {property: value}

例如下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色糙麦,同時(shí)將字體大小設(shè)置為 14 像素。
在這個(gè)例子中丛肮,h1 是選擇器赡磅,color 和 font-size 是屬性,red 和 14px 是值宝与。

h1 {color:red; font-size:14px;}

引入CSS樣式

如何插入樣式表仆邓,當(dāng)讀到一個(gè)樣式表時(shí),瀏覽器會(huì)根據(jù)它來(lái)格式化 HTML 文檔伴鳖。插入樣式表的方法有三種:外部樣式表、內(nèi)部樣式表和內(nèi)聯(lián)樣式徙硅。

1.外部樣式表

當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)榜聂,外部樣式表將是理想的選擇。在使用外部樣式表的情況下嗓蘑,你可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀须肆。每個(gè)頁(yè)面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在(文檔的)頭部:

<head><link rel="stylesheet" type="text/css" href="site.css" /></head>

2.內(nèi)部樣式表
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)桩皿,就應(yīng)該使用內(nèi)部樣式表豌汇。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表,就像這樣:

<head>
<style type="text/css">
 p {margin-left: 20px;}
 body {background-image: url("images/test.gif");}
</style>
</head>
(web前端學(xué)習(xí)交流群:328058344 禁止閑聊泄隔,非喜勿進(jìn)>芗) 

3.內(nèi)聯(lián)樣式由于要將表現(xiàn)和內(nèi)容混雜在一起,即HTML代碼和CSS代碼混編,這樣會(huì)不利于文檔結(jié)構(gòu)逻澳,并且不容易維護(hù)闸天,所以一般不要使用這種方式引入樣式。例如改變段落的顏色和左外邊距:

<p style="color: red; margin-left: 20px;">
This is a paragraph
</p>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末斜做,一起剝皮案震驚了整個(gè)濱河市苞氮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瓤逼,老刑警劉巖笼吟,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異霸旗,居然都是意外死亡贷帮,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén)定硝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)皿桑,“玉大人,你說(shuō)我怎么就攤上這事蔬啡』逦辏” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵箱蟆,是天一觀的道長(zhǎng)沟绪。 經(jīng)常有香客問(wèn)我,道長(zhǎng)空猜,這世上最難降的妖魔是什么绽慈? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮辈毯,結(jié)果婚禮上坝疼,老公的妹妹穿的比我還像新娘。我一直安慰自己谆沃,他們只是感情好钝凶,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著唁影,像睡著了一般耕陷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上据沈,一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1 308
  • 那天哟沫,我揣著相機(jī)與錄音,去河邊找鬼锌介。 笑死嗜诀,一個(gè)胖子當(dāng)著我的面吹牛猾警,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播裹虫,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼肿嘲,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了筑公?” 一聲冷哼從身側(cè)響起雳窟,我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎匣屡,沒(méi)想到半個(gè)月后封救,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡捣作,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年誉结,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片券躁。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡惩坑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出也拜,到底是詐尸還是另有隱情以舒,我是刑警寧澤,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布慢哈,位于F島的核電站蔓钟,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏卵贱。R本人自食惡果不足惜滥沫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望键俱。 院中可真熱鬧兰绣,春花似錦、人聲如沸编振。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)党觅。三九已至,卻和暖如春斋泄,著一層夾襖步出監(jiān)牢的瞬間杯瞻,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工炫掐, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留魁莉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像旗唁,于是被迫代替她去往敵國(guó)和親畦浓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案检疫? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,756評(píng)論 1 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理讶请,服務(wù)發(fā)現(xiàn),斷路器屎媳,智...
    卡卡羅2017閱讀 134,693評(píng)論 18 139
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,062評(píng)論 0 1
  • 第6章 開(kāi)始學(xué)習(xí)CSS夺溢,為網(wǎng)頁(yè)添加樣式 1、認(rèn)識(shí)CSS樣式CSS全稱為“層疊樣式表 (Cascading Styl...
    夏沫xx閱讀 1,062評(píng)論 1 11
  • 昨我做到放任烛谊,孩子晚上也愿意放下一回游戲了
    吳若閱讀 58評(píng)論 0 0