CSS的起源
- 在web最開開始（1990-1993）,html只有描述段落，超鏈接，列表和標(biāo)題等基本元素。隨著萬(wàn)維網(wǎng)的出現(xiàn)（用戶交互體驗(yàn)的加強(qiáng)），對(duì)html的要求越來(lái)越大，人們需要更好的使用體驗(yàn)，于是出現(xiàn)了一些表現(xiàn)化的標(biāo)簽如<u></u>、<i></i>以及一些體現(xiàn)表現(xiàn)的屬性與屬性值如align="center"等。
- 隨著時(shí)間的推移，html既要體現(xiàn)結(jié)構(gòu)，又要用于表現(xiàn)，導(dǎo)致3個(gè)問(wèn)題：1.html變得越來(lái)越臃腫；2.頁(yè)面缺乏結(jié)構(gòu)性，降低了網(wǎng)頁(yè)的可訪問(wèn)性。3。頁(yè)面維護(hù)越來(lái)越困難。
- 在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體驗(yàn)
image.png
<head>
<meta charset="utf-8">
<style type="text/css"> /* type="text/css" 常省略，因?yàn)檫@是默認(rèn)值。*/
h2{
text-align: center; /*設(shè)置文本水平居中對(duì)齊*/
color: red; /*文本顏色：紅色*/
font-family: "微軟雅黑"; /* 字體族：微軟雅黑 */
}
p{
text-align: center;
color: blue;
font-size: 20px; /* 字體大?。?0像素 */
}
small{
color: orange;
}
</style>
</head>
<body>
<h2>靜夜思游子吟</h2>
<p><small>作者：孟郊</small></p>
<p>慈母手中線，游子身上衣。</p>
<p>臨行密密縫，意恐遲遲歸。</p>
<p>誰(shuí)言寸草心，報(bào)得三春暉。</p>
<h2>江城子·乙卯正月二十日夜記夢(mèng)</h2>
<p><small>作者:蘇軾</small></p>
<p>十年生死兩茫茫，不思量，自難忘。</p>
<p>千里孤墳，無(wú)處話凄涼。</p>
<p>縱使相逢應(yīng)不識(shí)，塵滿面，鬢如霜。</p>
<p>夜來(lái)幽夢(mèng)忽還鄉(xiāng)，小軒窗，正梳妝。</p>
<p>相顧無(wú)言，惟有淚千行。</p>
<p>料得年年腸斷處，明月夜，短松岡。</p>
</body>
注：
- <style></style>其實(shí)在HTML任意部分都可以，只是習(xí)慣在</head>上方。
- <style></style>遵循HTML規(guī)范，有開始和結(jié)束標(biāo)簽。
- <style></style>里面的語(yǔ)句則遵循的是CSS語(yǔ)句規(guī)范，基本為：選擇器 { 屬性1：屬性值1；屬性2：屬性值2； }
- CSS語(yǔ)句的注釋格式為：/* 注釋的內(nèi)容 */
CSS和HTML的關(guān)系
- HTML負(fù)責(zé)結(jié)構(gòu)
- CSS負(fù)責(zé)表現(xiàn)
本節(jié)課來(lái)看，CSS的優(yōu)點(diǎn)
- 結(jié)構(gòu)和表現(xiàn)分離
- 代碼簡(jiǎn)潔統(tǒng)一
CSS還有很多優(yōu)點(diǎn)，隨著學(xué)習(xí)的深入，大家將會(huì)深刻體會(huì)到。
練習(xí)
1.自行完成本文的HTML部分和CSS部分。
2.思考，如何僅僅讓 “夜來(lái)幽夢(mèng)忽還鄉(xiāng)，小軒窗，正梳妝?！?字體顏色變成粉紅色（pink）
