CSS基礎【1】:體驗CSS
阿新 • • 發佈:2018-12-21
CSS起源
- web的衰落:在 web 早期(1990-1993),html是一個很侷限的語言。幾乎完全由用於描述段落,超連結,列表和標題的結構化元素組成。隨著全球資訊網的出現(使用者互動體驗的加強),對 html 的要求越來越大,人們迫切需要 html 增加新的元素,去完成一個特定的功能
- 迫於壓力,html 開始出現
<font>,<i> , <s>
等標籤。但是 html 是一種描述結構的語言,也開始描述外在表現了。幾年之後這種隨便的做法暴露出嚴重的問題:1:由於 html 既寫結構又寫樣式,導致頁面缺乏結構性,降低了網頁的可訪問性。2:頁面維護越來越困難 - 當 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只有一個作用,就是用來修改樣式
<style type="text/css"> h1 { text-align: center; color: red; font-family: "微軟雅黑"; } p { text-align: center; color: blue; font-size: 20px; } </style> <h1>成功法則</h1> <p>遲到毀一生</p> <p>早退窮三代</p> <p>按時上下班</p> <p>必成高富帥</p>
CSS格式
格式
<style type="text/css"> 標籤名稱 { 屬性名稱: 屬性對應的值; ... } </style>
注意點:
- style 標籤必須寫在 head 標籤的開始標籤和結束標籤之間(也就是必須和 title 標籤是兄弟關係)
- style 標籤中的 type 屬性其實可以不用寫,預設就是
type="text/css"
- 設定樣式時必須按照固定的格式來設定:
key: value;
其中:
不能省略,分號大多數情況下也不能省略(當有多個屬性時,最後一個可以省略)