CSS 概念及樣式表
時間：2023-08-29 23:00:01 | 來源：網(wǎng)站運營
時間：2023-08-29 23:00:01 來源：網(wǎng)站運營
CSS 概念及樣式表：
概念
css 全稱 cascading style sheets層疊式樣式表，是一種用來表現(xiàn) HTML 的文件樣式的計算機語言。
?作用：靜態(tài)地修飾網(wǎng)頁，并且可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
!CSS3 是 CSS 層疊樣式表技術(shù)的升級版本，于1999年開始制訂，2001年5月23日W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊 。
CSS 的組成
- 層疊式
css 中貫穿始終的加載特性: 層疊性 繼承性
2. 樣式
定義如何顯示 HTML 元素 文字文本 背景 盒模型 浮動 定位 其他
書寫位置
css 的代碼根據(jù)書寫位置不同分為四種書寫方式：內(nèi)聯(lián)式、內(nèi)嵌式、外聯(lián)式、導(dǎo)入式。
內(nèi)聯(lián)式，也被習(xí)慣叫做行內(nèi)式。
書寫位置：在 HTML 標(biāo)簽之上的 style 屬性中書寫 css 樣式。
所有的 css 樣式屬性總體組成標(biāo)簽的 style 屬性的屬性值。
<div style="width: 200px; height: 100px;"></div>缺點:
a、內(nèi)聯(lián)式必須寫在標(biāo)簽上，沒有完全脫離 HTML 標(biāo)簽。
b、 css 樣式代碼讓標(biāo)簽結(jié)構(gòu)繁重，不利于 HTML 結(jié)構(gòu)的解讀。
c、一個內(nèi)聯(lián)式的 css 代碼，只能給一個標(biāo)簽使用，如果多個標(biāo)簽有相同的樣式，同樣的 css 代碼需要書寫多次，增加代碼量。
因此，實際工作中不會使用內(nèi)聯(lián)式（行內(nèi)式）編寫 css 代碼。 (后端少量會用)
書寫位置：在 HTML 文件中，<head> 標(biāo)簽內(nèi)部有一個 <style> 標(biāo)簽。
<style> 標(biāo)簽書寫在< title> 標(biāo)簽后面，所有 css 代碼書寫在 <style> 標(biāo)簽內(nèi)部 。
<style> 標(biāo)簽有一個標(biāo)簽屬性叫做 type，屬性值是 ”text/css”(可不寫)
<style> body { background-color: rgb(105, 183, 228); }</style>優(yōu)點:
a、實現(xiàn)了結(jié)構(gòu)和樣式的初步分離，css 只負(fù)責(zé)樣式，HTML 負(fù)責(zé)結(jié)構(gòu)。
b、多個標(biāo)簽可以利用一段代碼設(shè)置相同的樣式，節(jié)省代碼量。
缺點:
a、結(jié)構(gòu)和樣式并沒有完全分離，代碼依舊書寫在 HTML 文件的<style>標(biāo)簽內(nèi)部。
b、css 樣式只能給一個 HTML 文件使用，不能夠被多個 HTML 文件同時利用。
c、在 HTML 中如果 css 代碼太多，會造成文件頭重腳輕。
外聯(lián)式 CSS，也可以叫做外鏈?zhǔn)?CSS、外部 CSS。
書寫位置：在一個單獨的擴展名為 .css 的文件中。
書寫語法：內(nèi)部代碼與內(nèi)嵌式樣式表中 <style> 標(biāo)簽內(nèi)部的代碼一樣的。需要通過選擇器去選中標(biāo)簽，添加對應(yīng)的樣式。
!注意：在 .css 文件中書寫時，不需要再加 <style> 標(biāo)簽
body { background-color: rgb(105, 183, 228); }引用:
外聯(lián)式樣式表必須引入到 HTML 文件中，才能正常進(jìn)行加載。
引入方式：在 HTML 中的 <head> 標(biāo)簽內(nèi)部使用 <link> 標(biāo)簽進(jìn)行引入。
<link> 標(biāo)簽屬性：
優(yōu)點:
①實現(xiàn)了 HTML 和 css 完全分離。
②多個 HTML 文件可以共用一個 css 文件，便于提取公共 css，減少代碼量。
③可以實現(xiàn)一個 css 變化，多個 HTML 頁面同時變化，減少工作量。
④一個 HTML 文件可以引入多個 css 文件，可以實現(xiàn)同一個頁面中 css 代碼分層。
書寫位置：在內(nèi)嵌式樣式表 <style> 標(biāo)簽內(nèi)部，或者在外聯(lián)式樣式表內(nèi)部，導(dǎo)入其
他的外部的 .css 文件。
導(dǎo)入方式：利用一條 @import url(路徑) 語句進(jìn)行引入。
<style> @import url(01.css); div{ border-color:#00f; }</style>缺點:
導(dǎo)入式樣式表的作用與外聯(lián)式樣式表基本相同。
但是由于導(dǎo)入式在瀏覽器中加載時，會在 HTML 結(jié)構(gòu)加載完畢后再進(jìn)行編譯，如果
網(wǎng)速比較慢時，會導(dǎo)致網(wǎng)頁出現(xiàn)沒有 css 樣式的效果，給用戶的體驗不好。
!實際工作中，較少使用導(dǎo)入式，推薦使用外聯(lián)式樣式表。
推薦
?小型案例：可以使用內(nèi)嵌式 CSS。
?實際工作、大型網(wǎng)站項目：推薦使用外聯(lián)式 CSS。
注: style標(biāo)簽和link標(biāo)簽可以寫在任意位置 但最好寫在前面(head標(biāo)簽內(nèi)部) 因為瀏覽器是從上到下逐行進(jìn)行渲染 所以為了保證頁面加載時,html元素渲染完就是有樣式 并且提高用戶體驗最好寫前面
在線咨詢
