首頁(yè)技術(shù)文章正文

CSS是什么？CSS樣式規(guī)則

更新時(shí)間:2021年12月07日14時(shí)04分來(lái)源:傳智教育瀏覽次數(shù):

CSS是層疊樣式表( Cascading Style Sheets ) 的簡(jiǎn)稱(chēng)，有時(shí)我們也會(huì)稱(chēng)之為CSS 樣式表或級(jí)聯(lián)樣式表。 CSS 是也是一種標(biāo)記語(yǔ)言，最早CSS的出現(xiàn)，是為了補(bǔ)充HTML在頁(yè)面布局上的局限性，主要的使用場(chǎng)景就是美化網(wǎng)頁(yè)，用于設(shè)置HTML 頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。CSS 讓我們的網(wǎng)頁(yè)更加豐富多彩，布局更加靈活自如。

CSS 最大價(jià)值: 由HTML 專(zhuān)注去做結(jié)構(gòu)呈現(xiàn)，樣式交給CSS，實(shí)現(xiàn)了結(jié)構(gòu)( HTML ) 與樣式( CSS ) 相分離，讓前端開(kāi)發(fā)更簡(jiǎn)單。

使用HTML時(shí)，需要遵從一定的規(guī)范，CSS也是如此。要想熟練地使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行修飾，首先需要了解CSS樣式規(guī)則。CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器以及一條或多條聲明。

選擇器是用于指定CSS樣式的HTML標(biāo)簽，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式
屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)
屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小、文本顏色等
屬性和屬性值之間用英文“:”分開(kāi)
多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分

所有的樣式，都包含在 <style>標(biāo)簽內(nèi)，表示是樣式表。 <style>一般寫(xiě)到 </head>上方。

<head>
<style>
   h4 {
    color: blue;
    font-size: 100px;
   }
</style>
</head>

<head>
<style>
   h4 {
    color: blue;
    font-size: 100px;
   }
</style>
</head>

CSS的代碼風(fēng)格

1. 樣式格式書(shū)寫(xiě)

①緊湊格式

h3 { color: deeppink;font-size: 20px;}

②展開(kāi)格式

h3 {
    color: pink;
    font-size: 20px;
}

強(qiáng)烈推薦第二種格式，因?yàn)楦庇^。
2. 樣式大小寫(xiě)

h3 {
    color: pink;
}

H3 {
    COLOR: PINK;
}

強(qiáng)烈推薦樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫(xiě)字母，特殊情況除外。
3. 空格規(guī)范

H3 {
    color: pink; 
}

注意：①屬性值前面，冒號(hào)后面，保留一個(gè)空格
②選擇器（標(biāo)簽）和大括號(hào)中間保留空格
以下代碼書(shū)寫(xiě)風(fēng)格不是強(qiáng)制規(guī)范,在實(shí)際開(kāi)發(fā)中，符合實(shí)際開(kāi)發(fā)書(shū)寫(xiě)方式為前提。

猜你喜歡：

哪些css屬性可以繼承?哪些不可以繼承?

什么是CSS浮動(dòng)?有什么作用？

結(jié)構(gòu)化偽類(lèi)選擇器有哪些？CSS3新增選擇器

css link和@import的區(qū)別是什么?

傳智教育前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

上一篇：項(xiàng)目開(kāi)發(fā)中組件之間的數(shù)據(jù)共享【前端技術(shù)文章】 下一篇：網(wǎng)頁(yè)源代碼怎么看?查看網(wǎng)頁(yè)源代碼快捷鍵是什么?