Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
目錄
- 一、CSS和HTML
- 二、CSS的基本語法格式
- 三、CSS樣式設置
- （一）行內樣式
- （二）內嵌樣式
- （三）引用外部CSS文件
- 四、多重樣式優先級
- 結語
一、CSS和HTML
CSS，又稱為層疊樣式表，HTML標簽定義網頁的內容和結構，而CSS定義內容的樣式。通過CSS定義樣式，而不會改變網頁的內容和結構。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
二、CSS的基本語法格式
CSS代碼由選擇器和一條或多條聲明組成的，選擇器是需要改變樣式的 HTML 標簽，在CSS中由分號隔開每條代碼為聲明，且聲明是以大括號{}括起來的。
每條聲明由一個屬性名和一個屬性值組成，其格式為屬性名稱:屬性值;，注意這里聲明中的“:”和“;”不能漏掉。
例如下列中的選擇器是p，即以下的CSS樣式對所有的p標簽都生效。
可以通過/*注釋內容*/，來對CSS代碼進行注釋。
三、CSS樣式設置
（一）行內樣式
HTML中，如果要對一段文字顏色進行更改，需要對該標簽的style=""屬性進行設置，且行內樣式只能對當前某個標簽進行樣式設置。
例如，下列html代碼，設置文本顏色為藍色，文字大小為15像素：
運行結果如下：
（二）內嵌樣式
而CSS中，利用內嵌樣式，即將CSS代碼內嵌到HTML文件的<head></head>標簽內，通過內嵌樣式可以對多個標簽進行樣式設置。
例如，下列html代碼，也是一樣的文本，通過CSS代碼設置文本顏色為藍色，文字大小為15像素，head標簽內的style標簽中type="text/css"表示當前樣式是以CSS文本來規定的，其內部利用選擇器表示作用于所有的p標簽進行該樣式設置：
運行結果如下：
（三）引用外部CSS文件
若要將一種樣式引用到多個網頁時，可以直接定義一個單獨的css樣式表文件，然后在相應的html文件的head標簽內通過link標簽進行外部引用該文件，表示為<link rel="stylesheet" href="" />，其中rel屬性代表引用的文件類型，href屬性表示引用的鏈接文件名稱。
例如，下列代碼，定義一個css文件，設置文本顏色為藍色，文字大小為15像素：
然后，在index.html文件中引用該樣式表，即< link rel=“stylesheet” href="…/CSS/style.css" / >：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/style.css" /> </head><body><p>層疊樣式表是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。</p> </body></html>運行結果如下：
這種外部引用的方式將HTML代碼和CSS代碼分開的好處是可以方便更改樣式，且在多個HTML文檔即多個網頁中都可進行引用，不會顯得過于繁瑣，在維護時更加方便。
四、多重樣式優先級
以上三種添加CSS樣式的方式，它們是可以疊加的，疊加時優先級如下：
行內樣式>內嵌樣式>引用外部CSS文件>瀏覽器默認樣式
即如果定義了多種不同方式的CSS樣式設置，會根據其優先級顯示樣式。
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第二章 HTML语
- 下一篇： Web前端开发笔记——第三章 CSS语言