CSS 的起源
web 的衰落：
在 web 早期（1990-1993）html 是一個很局限的語言。幾乎完全由用于描述段落，超連結，清單和标題的結構化元素組成。随着網際網路的出現（使用者互動體驗的加強）對 html 的要求越來越大，人們迫切需要 html 增加新的元素，去完成一個特定的功能
迫于壓力，html 開始出現
<font>、<i>、<s>
等标簽。但是 html 是一種描述結構的語言，也開始描述外在表現了。幾年之後這種随便的做法暴露出嚴重的問題：
- 由于 html 既寫結構又寫樣式，導緻頁面缺乏結構性，降低了網頁的可通路性
- 頁面的維護越來越困難
大救星 css
- 當 html 中存斥着的表現标記問題，W3c 并沒有忽視。在1995年，w3c 開始釋出一種正在進行的計劃（work-in-prrgress） 稱之為 css
- 與 html 相比，
css 支援更豐富的文檔外觀，css 可以為任何元素的文本和背景設定顔色；允許在任何元素外圍設定邊框；允許改變文本的大小，裝飾（如下劃線），間隔，甚至可以确定是否顯示文本
體驗 CSS
- 用 HTML 完成
- 哪個标簽有哪個屬性難以記憶
- 需求變更影響較大(例如像修改成功法則以下的文字顔色需要修改4個地方)
<h1 align="center">
<font face="微軟雅黑" color="red">成功法則</font>
</h1>
<p align="center">
<font face="微軟雅黑" color="blue" size="5">遲到毀一生</font>
</p>
<p align="center">
<font face="微軟雅黑" color="blue" size="5">早退窮三代</font>
</p>
<p align="center">
<font face="微軟雅黑" color="blue" size="5">按時上下班</font>
</p>
<p align="center">
<font face="微軟雅黑" color="blue" size="5">必成高富帥</font>
</p> - 用 HTML + CSS 完成
- 不用記憶哪些屬性屬于哪個标簽
- 當需求變更時我們不需要修改大量的代碼就可以滿足需求
- 在前端開發中 CSS 隻有一個作用, 就是用來修改樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>體驗CSS</title>
<style type="text/css">
h1 {
text-align: center;
color: red;
font-family: "微軟雅黑";
}
p {
text-align: center;
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1>成功法則</h1>
<p>遲到毀一生</p>
<p>早退窮三代</p>
<p>按時上下班</p>
<p>必成高富帥</p>
</body>
</html> CSS 格式
- 格式：
<style type="text/css">
标簽名稱{
屬性名稱: 屬性對應的值;
...
}
</style> 注意點：
- style 标簽必須寫在 head 标簽的開始标簽和結束标簽之間(也就是必須和 title 标簽是兄弟關系)
- style 标簽中的 type 屬性其實可以不用寫, 預設就是 type="text/css"
- 設定樣式時必須按照固定的格式來設定，
key: value;
:
CSS 的學習一共分為兩大部分, 一個是 CSS 的屬性, 另一個是 CSS 選擇器. 也就是說着兩部分學完 CSS 就沒有别的東西了
![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)