CSS的起源
- 在web最開開始(1990-1993),html只有描述段落楼镐,超鏈接忿族,列表和標(biāo)題等基本元素扼劈。隨著萬維網(wǎng)的出現(xiàn)(用戶交互體驗的加強(qiáng))驻啤,對html的要求越來越大,人們需要更好的使用體驗荐吵,于是出現(xiàn)了一些表現(xiàn)化的標(biāo)簽如<u></u>骑冗、<i></i>以及一些體現(xiàn)表現(xiàn)的屬性與屬性值如align="center"等。
- 隨著時間的推移先煎,html既要體現(xiàn)結(jié)構(gòu)贼涩,又要用于表現(xiàn),導(dǎo)致3個問題:1.html變得越來越臃腫薯蝎;2.頁面缺乏結(jié)構(gòu)性遥倦,降低了網(wǎng)頁的可訪問性。3占锯。頁面維護(hù)越來越困難袒哥。
- 在1995年,W3C組織(World WideWeb Consortium)成立消略,CSS(Cascading Style Sheets)的創(chuàng)作成員全部成為了W3C的工作小組并且全力以赴負(fù)責(zé)研發(fā)CSS標(biāo)準(zhǔn)堡称,并于12月份推出了第一份CSS(CSS1.0)。
CSS體驗
image.png
<head>
<meta charset="utf-8">
<style type="text/css"> /* type="text/css" 常省略艺演,因為這是默認(rèn)值却紧。*/
h2{
text-align: center; /*設(shè)置文本水平居中對齊*/
color: red; /*文本顏色:紅色*/
font-family: "微軟雅黑"; /* 字體族:微軟雅黑 */
}
p{
text-align: center;
color: blue;
font-size: 20px; /* 字體大型╇:20像素 */
}
small{
color: orange;
}
</style>
</head>
<body>
<h2>靜夜思游子吟</h2>
<p><small>作者:孟郊</small></p>
<p>慈母手中線,游子身上衣晓殊。</p>
<p>臨行密密縫断凶,意恐遲遲歸。</p>
<p>誰言寸草心挺物,報得三春暉懒浮。</p>
<h2>江城子·乙卯正月二十日夜記夢</h2>
<p><small>作者:蘇軾</small></p>
<p>十年生死兩茫茫,不思量识藤,自難忘砚著。</p>
<p>千里孤墳,無處話凄涼痴昧。</p>
<p>縱使相逢應(yīng)不識稽穆,塵滿面,鬢如霜赶撰。</p>
<p>夜來幽夢忽還鄉(xiāng)舌镶,小軒窗,正梳妝豪娜。</p>
<p>相顧無言餐胀,惟有淚千行。</p>
<p>料得年年腸斷處瘤载,明月夜否灾,短松岡。</p>
</body>
注:
- <style></style>其實在HTML任意部分都可以鸣奔,只是習(xí)慣在</head>上方墨技。
- <style></style>遵循HTML規(guī)范,有開始和結(jié)束標(biāo)簽挎狸。
- <style></style>里面的語句則遵循的是CSS語句規(guī)范扣汪,基本為:選擇器 { 屬性1:屬性值1;屬性2:屬性值2锨匆; }
- CSS語句的注釋格式為:/* 注釋的內(nèi)容 */
CSS和HTML的關(guān)系
- HTML負(fù)責(zé)結(jié)構(gòu)
- CSS負(fù)責(zé)表現(xiàn)
本節(jié)課來看崭别,CSS的優(yōu)點
- 結(jié)構(gòu)和表現(xiàn)分離
- 代碼簡潔統(tǒng)一
CSS還有很多優(yōu)點,隨著學(xué)習(xí)的深入恐锣,大家將會深刻體會到紊遵。
練習(xí)
1.自行完成本文的HTML部分和CSS部分。
2.思考侥蒙,如何僅僅讓 “夜來幽夢忽還鄉(xiāng),小軒窗匀奏,正梳妝鞭衩。” 字體顏色變成粉紅色(pink)