CSS學(xué)習(xí)筆記1

cascading style sheet? 層疊樣式表

用途:

1.主要控制HTML文檔的版面樣式

2.美化web頁面的外觀

css語法

選擇器{ 聲明語句1;? 聲明語句2; }

屬性名稱: 屬性值

注釋: /* css注釋內(nèi)容 */

css樣式的引入方式

外部樣式——實現(xiàn)了結(jié)構(gòu)和表現(xiàn)的徹底分離

位置:在外部新建css文件婿斥,在HTML文檔的head標簽中通過link標簽將css文件引入

語法: <link rel="stylesheet" href="css文件的路徑">

rel屬性? 當前文檔與被鏈接文檔之間的關(guān)系

stylesheet得到所有瀏覽器的支持像鸡,表示外部文件的類型是css文件

創(chuàng)建步驟:

1.創(chuàng)建一個css文件夾志群,新建后綴名為.css的文件

2.在后綴名為.css文件中,輸入編碼方式:@charset? "utf-8";

3.在HTML文檔中吁脱,head標簽內(nèi)部攻冷,通過link標簽引入css文件

?<head>

...............

?<link rel="stylesheet" href="css/*.css">

...............

</head>

?選擇器

標簽選擇器——權(quán)值1

結(jié)構(gòu)中:<div>box1</div>

樣式中:div{ 聲明語句 }

class選擇器——權(quán)值10

結(jié)構(gòu)中:<div class="box">box2</div>

<p class="box txt2">content2</p>

樣式中:.box{ 聲明語句 }

? ? ? ? ? ? ? .txt2{ 聲明語句 }

?注意:使用標簽選擇器和class選擇器為同一個元素設(shè)置樣式涉兽,class選擇器的優(yōu)先級高

選擇器的優(yōu)先級與權(quán)值相關(guān)虱饿,權(quán)值越大優(yōu)先級越高拥诡;權(quán)值相同触趴,后寫的會覆蓋先寫內(nèi)容

?選擇器的命名規(guī)范:

1.名稱盡量有含義

2. 建議始終用英文字母開頭,可以包含英文字母、數(shù)字仇祭、-、_

3. 除了-和_之外的特殊符號不允許使用

4.不能使用中文漢字、純數(shù)字,不能以數(shù)字開頭

5.名稱區(qū)分大小寫

后代選擇器——權(quán)值是所有選擇器權(quán)值的累加

選擇器1? ? 選擇器2{ 聲明語句 }

?選擇器1范圍內(nèi)的所有的選擇器2都有樣式

群組選擇器

?選擇器1, 選擇器2{ 聲明語句 }

選擇器1和選擇器2都具有相同的樣式

1.小紅明天穿白襯衫

2.小藍明天穿白襯衫

3.小明明天穿白襯衫

小紅, 小藍, 小明{ 明天穿白襯衫 }

偽類選擇器

選擇器:hover{ 鼠標懸停的顯示效果 }

/* 鼠標懸停到.box盒子上潘靖,讓盒子的背景顏色設(shè)置為藍色blue */

box2:hover{background-color: blue; }

/* 鼠標懸停到.wrap盒子上既绕,讓.wrap中的子盒div背景顏色變?yōu)閘ightblue */

.wrap2:hover? div{background-color: lightblue; }

最后編輯于
?著作權(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)自己被綠了。 大學(xué)時的朋友給我發(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