CSS起源
web的衰落：
在web早期（1990-1993）,html是一個很局限的語言。幾乎完全由用于描述段落，超鏈接，列表和標(biāo)題的結(jié)構(gòu)化元素組成。隨著萬維網(wǎng)的出現(xiàn)（用戶交互體驗的加強(qiáng)），對html的要求越來越大，人們迫切需要html增加新的元素，去完成一個特定的功能
迫于壓力，html開始出現(xiàn)
<font>，<i> , <s>等標(biāo)簽。但是html是一種描述結(jié)構(gòu)的語言，也開始描述外在表現(xiàn)了。幾年之后這種隨便的做法暴露出嚴(yán)重的問題：1：由于html既寫結(jié)構(gòu)又寫樣式，導(dǎo)致頁面缺乏結(jié)構(gòu)性，降低了網(wǎng)頁的可訪問性。2：頁面維護(hù)越來越困難大救星Css
當(dāng)html中存斥著的表現(xiàn)標(biāo)記問題，W3c并沒有忽視。在1995年，w3c開始發(fā)布一種正在進(jìn)行的計劃（work-in-prrgress） 稱之為css
與html相比，
Css支持更豐富的文檔外觀，Css可以為任何元素的文本和背景設(shè)置顏色；允許在任何元素外圍設(shè)置邊框；允許改變文本的大小，裝飾（如下劃線），間隔，甚至可以確定是否顯示文本。
體驗CSS
- 用HTML完成
- 哪個標(biāo)簽有哪個屬性難以記憶
- 需求變更影響較大(例如像修改成功法則以下的文字顏色需要修改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完成
- 不用記憶哪些屬性屬于哪個標(biāo)簽
- 當(dāng)需求變更時我們不需要修改大量的代碼就可以滿足需求
- 在前端開發(fā)中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">
標(biāo)簽名稱{
屬性名稱: 屬性對應(yīng)的值;
...
}
</style>
注意點(diǎn):
style標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間(也就是必須和title標(biāo)簽是兄弟關(guān)系)
style標(biāo)簽中的type屬性其實(shí)可以不用寫, 默認(rèn)就是type="text/css"
設(shè)置樣式時必須按照固定的格式來設(shè)置.
key: value;其中:不能省略, 分號大多數(shù)情況下也不能省略(當(dāng)有多個屬性時, 最后一個可以省略)CSS怎么學(xué)?
-
CSS的學(xué)習(xí)一共分為兩大部分, 一個是CSS的屬性, 另一個是CSS選擇器. 也就是說著兩部分學(xué)完CSS就沒有別的東西了
學(xué)習(xí)交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038
