08-CSS基礎-體驗CSS
08-CSS基礎-體驗CSS
CSS起源
- web的衰落:
- 在web早期(1990-1993),html是一個很侷限的語言。幾乎完全由用於描述段落,超連結,列表和標題的結構化元素組成。隨著全球資訊網的出現(使用者互動體驗的加強),對html的要求越來越大,人們迫切需要html增加新的元素,去完成一個特定的功能
- 迫於壓力,html開始出現<font>,<i> , <s>等標籤。但是html是一種描述結構的語言,也開始描述外在表現了。幾年之後這種隨便的做法暴露出嚴重的問題:1:由於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
</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;其中:不能省略, 分號大多數情況下也不能省略(當有多個屬性時, 最後一個可以省略)
- CSS怎麼學?
- CSS的學習一共分為兩大部分, 一個是CSS的屬性, 另一個是CSS選擇器. 也就是說著兩部分學完CSS就沒有別的東西了