從HTML被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。
CSS的出現，拯救了混亂的HTML，當讓更加拯救了我們web開發(fā)者。 讓我們的網頁更加豐富多彩。
CSS的最大貢獻就是： 讓 HTML 從樣式中解脫苦海， 實現了 HTML 專注去做 結構呈現。 而樣式交給 CSS 后，你完全可以放心的洗洗睡了！
CSS(Cascading Style Sheets) 美化樣式
CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義，其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
type=“text/CSS” 在html5中可以省略， 寫上也比較符合規(guī)范， 所以這個地方可以寫也可以省略。
內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式，其基本語法格式如下：
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設置行內式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>
復習： link 是個單標簽哦
該語法中，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：
| 樣式表 | 優(yōu)點 | 缺點 | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
使用HTML時，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下：
1.選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區(qū)分。
可以用段落 和 表格的對齊的演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h4 {
color: deeppink;
}
p {
color: #036;
}
h3 {
color: green;
}
div {
color: orange;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>憶江南(1)</h3>
<div>唐.白居易</div>
<p>江南好，風景舊曾諳。(2) 日出江花紅勝火，春來江水綠如藍，(3) 能不憶江南。</p>
<h4>作者介紹</h4>
<p>白居易(772－846) ，字樂天，太原(今屬山西)人。唐德宗朝進士，元和三年(808)拜左拾遺，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又為蘇州(今屬江蘇)、同州(今屬陜西大荔)刺史。晚居洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人中的佼佼者，所作對后世影響甚大。</p>
<h4>注釋</h4>
<p>
(1)據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙凋五十四字，皆平韻。(2)諳(音安)：熟悉。(3)藍：藍草，其葉可制青綠染料。
</p>
<h4>品評</h4>
<p>此詞寫江南春色，首句“江南好”，以一個既淺切又圓活的“好”字，攝盡江南春色的種種佳處，而作者的贊頌之意與向往之情也盡寓其中。同時，唯因“好”之已甚，方能“憶”之不休，因此，此句又已暗逗結句“能不憶江南”，并與之相關闔。次句“風景舊曾諳”，點明江南風景之“好”，并非得之傳聞，而是作者出牧杭州時的親身體驗與親身感受。這就既落實了“好”字，又照應了“憶”字，不失為勾通一篇意脈的精彩筆墨。三、四兩句對江南之“好”進 行形象化的演繹，突出渲染江花、江水紅綠相映的明艷色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者善于著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽的作者對江南春色的無限贊嘆與懷念，又造成一種悠遠而又深長的韻味，把讀者帶入余情搖漾的境界中。</p>
</body>
</html>
聯系客服
