柚子快報邀請碼778899分享:前端 CSS基礎(chǔ)
柚子快報邀請碼778899分享:前端 CSS基礎(chǔ)
1. CSS簡介
CSS
的全稱為:層疊樣式表
(
Cascading Style Sheets
)
。
CSS
也是一種標記語言,用于給
HTML
結(jié)構(gòu)設(shè)置樣式,例如:文字大小、顏色、元素寬高等等
簡單理解:
CSS
可以美化
HTML
,
讓
HTML
更漂亮。
核心思想:
HTML
搭建結(jié)構(gòu),
CSS
添加樣式,實現(xiàn)了:結(jié)構(gòu)與樣式的分離。
2. CSS的編寫位置
2.1 行內(nèi)樣式
寫在標簽的
style
屬性中,(又稱:內(nèi)聯(lián)樣式)。
你好
注意點:
1.
style
屬性的值不能隨便寫,寫要符合
CSS
語法規(guī)范,是
名
:
值
;
的形式。
2.
行內(nèi)樣式表,只能控制當(dāng)前標簽的樣式,對其他標簽無效。
缺點:
書寫繁瑣、樣式不能復(fù)用、并且沒有體現(xiàn)出:
結(jié)構(gòu)與樣式分離
的思想,不推薦大量使用,只
有對當(dāng)前元素添加簡單樣式時,才偶爾使用。
2.2 內(nèi)部樣式
寫在 html 頁面內(nèi)部,將所有的 CSS 代碼提取出來,單獨放在
注意點:
1.
標簽理論上可以放在
HTML
文檔的任何地方,但一般都放在
標簽
中。
2.
此種寫法:樣式可以復(fù)用、代碼結(jié)構(gòu)清晰。
缺點:
1.
并沒有實現(xiàn):結(jié)構(gòu)與樣式
完全分離
。
2.
多個
HTML
頁面無法復(fù)用樣式。
2.3 外部樣式
寫在單獨的
.css
文件中,隨后在
HTML
文件中引入使用。
新建一個擴展名為
.css
的樣式文件,存放?
CSS
代碼。
h1{
color: red;
font-size: 40px;
}
在
HTML
文件中引入
.css
文件。
注意點:
1.
標簽要寫在
標簽中。
2.
標簽屬性說明:
????????href
:引入的文檔來自于哪里。
????????rel
:
(
relation
:關(guān)系)說明引入的文檔與當(dāng)前文檔之間的關(guān)系。
3.
外部樣式的優(yōu)勢:樣式可以復(fù)用、結(jié)構(gòu)清晰、可觸發(fā)瀏覽器的緩存機制,提高訪問速
度 ,實現(xiàn)了
結(jié)構(gòu)與樣式的完全分離
。
最推薦使用。
3. 樣式表的優(yōu)先級
優(yōu)先級規(guī)則:行內(nèi)樣式 > 內(nèi)部樣式 = 外部樣式
1. 內(nèi)部樣式、外部樣式,這二者的優(yōu)先級相同。
2. 同一個樣式表中,優(yōu)先級也和編寫順序有關(guān)。
3.?
后面的會覆蓋前面的(簡記:
“
后來
者居上
”
)
分類優(yōu)點缺點使用頻率作用范圍
行內(nèi)樣式
優(yōu)先級最高1. 結(jié)構(gòu)與樣式未分離 2. 代碼結(jié)構(gòu)混亂 3. 樣式不能復(fù)用很低當(dāng)前標簽內(nèi)部樣式1. 樣式可復(fù)用 2. 代碼結(jié)構(gòu)清晰1. 結(jié)構(gòu)與樣式未徹底分離 2. 樣式不能多頁面復(fù)用一般當(dāng)前頁面外部樣式1. 樣式可多頁面復(fù)用 2. 代碼結(jié)構(gòu)清晰 3. 可觸發(fā)瀏覽器的緩存機制 4. 結(jié)構(gòu)與樣式徹底分離需要引入才能使用最高多個頁面
4. CSS語法規(guī)范
CSS
語法規(guī)范由兩部分構(gòu)成:
????????選擇器:找到要添加樣式的元素。
????????聲明塊:設(shè)置具體的樣式(
聲明塊
是由一個或多個
聲明
組成的),聲明的格式為:
屬性名: 屬性值;
備注
1
:最后一個聲明后的分號理論上能省略,但最好還是寫上。
備注
2
:選擇器與聲明塊之間,屬性名與屬性值之間,均有一個空格,理論上能省略,但最好
還是寫上。
注釋的寫法:
/* 給h1元素添加樣式 */
h1 {
/* 設(shè)置文字顏色為紅色 */
color: red;
/* 設(shè)置文字大小為40px */
font-size: 40px
}
5. CSS代碼風(fēng)格
展開風(fēng)格
——
開發(fā)時推薦,便于維護和調(diào)試。
h1 {
color: red;
font-size: 40px;
}
緊湊風(fēng)格
——
項目上線時推薦,可減小文件體積。
h1{color:red;font-size:40px;}
項目上線時,我們會通過工具將【展開風(fēng)格】的代碼,變成【緊湊風(fēng)格】,這樣可以減小文
件體積,節(jié)約網(wǎng)絡(luò)流量,同時也能讓用戶打開網(wǎng)頁時速度更快。
柚子快報邀請碼778899分享:前端 CSS基礎(chǔ)
推薦文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。