這篇文章給大家分享的是有關(guān)CSS中常用樣式和屬性有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新都企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計，新都網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

CSS樣式表：

作用：設(shè)定如何顯示HTML標(biāo)簽

語法結(jié)構(gòu)：

第一種：選擇器{

樣式屬性聲明；

}說明：這種方式的CSS樣式表由選擇器及一條或多條聲明兩個部分組成；該種樣式表只能定義在style標(biāo)簽或css文件中，每個style標(biāo)簽或css文件可定義多個樣式表

第二種：style="樣式屬性聲明1;樣式屬性聲明2;..."說明：這種方式的CSS樣式表只由一條或多條聲明組成；該種樣式表只能定義在style標(biāo)簽屬性；HTML文檔中每個標(biāo)簽都有一個style標(biāo)簽屬性

無論使用哪一種方式定義CSS樣式表，樣式表中的樣式屬性聲明都由一個樣式屬性（非標(biāo)簽屬性，即樣式屬性不能當(dāng)標(biāo)簽屬性直接用在標(biāo)簽中）和一個樣式屬性值組成，樣式屬性和樣式屬性值使用冒號分開；聲明之間使用分號間隔

注意：1.如果一個樣式屬性有多個樣式屬性值，則樣式屬性值之間用逗號間隔

2.在CSS中樣式屬性及其樣式屬性值對大小寫不敏感，且不忽略空格

3.如果屬性值由多個單詞組成，則建議使用單引號引起來

選擇器：

標(biāo)簽選擇器：標(biāo)簽選擇器以HTML文檔中定義的標(biāo)簽名為選擇器名，其語法如下：

標(biāo)簽名{

樣式屬性聲明1;...}

作用對象：HTML文檔中標(biāo)簽名與標(biāo)簽選擇器名相同的所有標(biāo)簽都會受影響

類選擇器：類選擇器以標(biāo)簽中class標(biāo)簽屬性的屬性值為選擇器名，其語法如下：

.class標(biāo)簽屬性的屬性值{

樣式屬性聲明1;...}

作用對象：class標(biāo)簽屬性的屬性值與類選擇器.后相同的標(biāo)簽都受影響，注意：class標(biāo)簽屬性不能與數(shù)字開頭

id選擇器：id選擇器以標(biāo)簽中的id標(biāo)簽屬性的屬性值為選擇器名，其語法如下：

#id標(biāo)簽屬性的屬性值{

樣式屬性聲明1;...}

作用對象：只有id標(biāo)簽屬性的屬性值與id選擇器#后相同的標(biāo)簽才受影響。注意：id標(biāo)簽屬性的屬性值不能以數(shù)字開頭；id標(biāo)簽屬性的屬性值在HTML文檔中必需唯一，class標(biāo)簽屬性的屬性值可以不唯一

后代選擇器：

語法：父代選擇器1子父代選擇器2子父代選擇器3...子代選擇器{

樣式屬性聲明1;...

}

注意：選擇器之間用空格間隔

分組選擇器：如果HTML文檔多個CSS樣式表內(nèi)的部分樣式相同，則可以通過定義一個分組選擇器抽取出來以簡化CSS樣式代碼，該類選擇器的選擇器名由多個選擇器組成，使用逗號分隔，其語法如下：

選擇器1,選擇器2,選擇器3...{

樣式屬性聲明;...}

通配符選擇器：通配符選擇器等價于列出了HTML文檔中所有標(biāo)簽的一個分組選擇器，其語法如下：

*{

樣式屬性聲明1;...}

如何使用CSS樣式

在HTML中插入CSS樣式有三種方式：外部樣式表，內(nèi)部樣式表，內(nèi)聯(lián)樣式

外部樣式表：當(dāng)多個HTML文檔中某些標(biāo)簽的樣式規(guī)則相同時，為了實現(xiàn)這些樣式表的重用，同時也為了方便管理樣式1表，會將CSS樣式寫在css樣式文件中，載用link標(biāo)簽將該css文件引入到HTML文檔中

補充：link標(biāo)簽還用于設(shè)置HTML文檔頭部小圖標(biāo)，語法結(jié)構(gòu)：<linkrel=”shortcuticon”type=”image/x-icon”href=”圖片路徑”/>

內(nèi)部樣式表：當(dāng)一個HTML文檔中的樣式在其他HTML文檔中不具有共性，但本HTML文檔中的多個標(biāo)簽的樣式相同，這時為了實現(xiàn)這些樣式規(guī)則的重用，同時也為了方便管理樣式規(guī)則，則需要將CSS樣式直接寫在HTML文檔的style標(biāo)簽內(nèi)

內(nèi)聯(lián)樣式：當(dāng)一個HTML文檔中的某個標(biāo)簽樣式與其他標(biāo)簽樣式不同或該文檔中的標(biāo)簽樣式與父標(biāo)簽樣式不統(tǒng)一時，講CSS樣式寫在HTML文檔某個標(biāo)簽的style標(biāo)簽屬性的屬性值中

CSS樣式優(yōu)先級

選擇器優(yōu)先級：id選擇器>類選擇器>標(biāo)簽選擇器，且選擇器優(yōu)先級不考慮選擇器的先后順序

樣式插入方式優(yōu)先級：如果按照一般插入CSS樣式的順序（即先使用link插入外部樣式表，再使用style標(biāo)簽插入內(nèi)部樣式表，最后再在style標(biāo)簽屬性中插入內(nèi)聯(lián)樣式）來說，優(yōu)先級內(nèi)聯(lián)樣式>內(nèi)部樣式表>外部樣式表

常用CSS樣式屬性

邊框樣式屬性

border-width屬性：用于為元素的所有邊框設(shè)置寬度或單獨的為各邊邊框設(shè)置寬度

注意：如果不設(shè)置border-style屬性或?qū)⑵湓O(shè)置為none或hidden屬性值，則border-width屬性不會起作用，這時邊框?qū)挾葘嶋H上會重置為0

border-style屬性：用于設(shè)置元素所有邊框的樣式，或者單獨為各邊設(shè)置邊框樣式，該屬性有多個值（none默認值，定義無邊框；hidden與none相同；dotted定義點狀邊框；dashed定義虛線；solid定義實線）

注意：只有當(dāng)值不為none或hidden時才能出現(xiàn)

border-color屬性：用于設(shè)置一個元素所有邊框的顏色或為四個邊框分別設(shè)置不同的顏色

注意：把border-style屬性聲明到border-color屬性之前，元素需先獲得邊框再改變其顏色

邊框簡寫屬性：

注意：1.把邊框的寬度，樣式和顏色設(shè)置到一個聲明中，需要按照寬度，樣式，顏色的順序進行設(shè)置，允許不設(shè)置其中某個值

2.使用border設(shè)置邊框?qū)傩詴r，border-width，border-style，border-color的值只能取一種

border:2pxsolidgreenyellow;border-bottom:2pxsolidorange;

輪廓線樣式屬性：輪廓線是在標(biāo)簽邊框邊緣繪制一條線，該線不會占據(jù)空間，也不一定是矩形，主要起到突出標(biāo)簽的作用

outline-color樣式屬性：設(shè)置輪廓線的顏色，使用該樣式屬性時必須設(shè)定outline-style樣式屬性的屬性值不能為none，否則看不到效果

outlin-style樣式屬性：設(shè)置輪廓線的樣式，該屬性有多個值（none默認值，定義無輪廓；dotted定義點狀輪廓；dashed定義虛線輪廓；solid定義實線輪廓）

outline-width樣式屬性：設(shè)置輪廓線的寬度，使用該樣式屬性時必須設(shè)定outline-style樣式屬性的屬性值不能為none，否則看不到效果（如果outline-style為none，寬度實際上會重置為0）

outlilne樣式屬性：用于在一個聲明中設(shè)置所有的輪廓線樣式屬性（即顏色，樣式，寬度），且該樣式屬性設(shè)置屬性值時不需要設(shè)置所有輪廓線樣式屬性所對應(yīng)的屬性值，但需按照outline-color，outline-style，outline-width的順序進行排列，中間用空格隔開

內(nèi)容溢出樣式屬性：

overflow樣式屬性：當(dāng)標(biāo)簽中的內(nèi)容溢出標(biāo)簽時，用于設(shè)定如何處理溢出的內(nèi)容，該屬性有多個值：visible默認值，所溢出內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外；scroll所溢出內(nèi)容會被修剪，但瀏覽器會顯示滾動條以便查看其余的內(nèi)容；auto如果所溢出內(nèi)容被修剪，瀏覽器會顯示滾動條以便查看其余的內(nèi)容

overflow-x樣式屬性：當(dāng)標(biāo)簽中的內(nèi)容x方向溢出標(biāo)簽時，用于設(shè)定如何處理溢出的內(nèi)容

overflow-y樣式屬性：當(dāng)標(biāo)簽中的內(nèi)容y方向溢出標(biāo)簽時，用于設(shè)定如何處理溢出的內(nèi)容

背景樣式

background-color樣式屬性：設(shè)置標(biāo)簽背景顏色，該樣式屬性設(shè)置的背景顏色會填充背景的內(nèi)容，內(nèi)邊距和邊框區(qū)域，擴展到標(biāo)簽邊框的外邊界，但不包括外邊距

background-image樣式屬性：設(shè)置標(biāo)簽背景圖片，該樣式屬性有多個屬性值：url（&rsquo;URL&rsquo;）指向圖片的路徑；none默認值，不顯示背景圖片

background-repeat樣式屬性：設(shè)置標(biāo)簽背景圖片重復(fù)模式，該樣式屬性有多個屬性值：repeat默認值，背景圖片將在水平和垂直方向重復(fù)；repeat-x背景圖片將在水平方向重復(fù)；repeat-y背景圖片將在垂直方向重復(fù)；no-repeat背景圖片將僅顯示一次

background-attachment樣式屬性：設(shè)置標(biāo)簽背景圖片是否隨著

頁面其余部分的滾動而滾動，該樣式屬性有多個屬性值：scroll默認值，背景圖片會隨著頁面其余部分的滾動而滾動；fixed當(dāng)頁面的其余部分滾動時，背景圖片不會移動

background-position樣式屬性：隨著標(biāo)簽背景圖片的位置

background-size樣式屬性：設(shè)置單張背景圖片的尺寸，第一個值設(shè)置寬度，第二個值設(shè)置高度，如果只設(shè)置一個值，則第二個值會被設(shè)置為auto

background樣式屬性：用于在一個聲明中設(shè)置所有的背景樣式屬性，且該樣式屬性設(shè)置屬性值時不需要設(shè)置所有背景樣式屬性所對應(yīng)的屬性值且設(shè)置的屬性值沒有順序要求

字體樣式

font-style樣式屬性：設(shè)定字體的風(fēng)格（normal默認值，顯示標(biāo)準(zhǔn)的字體風(fēng)格；italic顯示斜體的字體風(fēng)格）

font-variant樣式屬性：設(shè)定是否以小型大寫字母的字體顯示文本（normal默認值，顯示標(biāo)準(zhǔn)的字體；small-caps顯示小型大寫字母的字體）

font-weight樣式屬性：設(shè)置字體的粗細（normal默認值，定義標(biāo)準(zhǔn)的字符；bold定義粗體字符；bolder定義更粗的字符；lighter定義更細的字符；值px直接設(shè)定）

font-size樣式屬性：設(shè)置字體大小

font-family樣式屬性：設(shè)置字體系列，使用逗號分割每種字體，如果瀏覽器不支持第一個字體則會嘗試第二個字體；如果字體系列中的所有字體都不支持，則使用瀏覽器默認支持的字體

font樣式屬性：用于在一個聲明中設(shè)置所有的字體樣式屬性，且該樣式屬性設(shè)置屬性值時不需要設(shè)置所有字體樣式屬性所對應(yīng)的屬性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family順序進行排列，中間用空格隔開。

注意：1.font樣式屬性至少要指定字體大小和字體系列；

2.沒有font-color樣式屬性，如果要設(shè)置字體的顏色需要使用color樣式屬性；

文本樣式

letter-spacing樣式屬性：設(shè)置字符間距，樣式屬性值可以為負，但這時字符之間更加擁擠

line-height樣式屬性：設(shè)置行間距（即行高），不能為負值

text-align樣式屬性：設(shè)置標(biāo)簽內(nèi)文本的水平對齊方式，該屬性有多個值：left把文本排到左邊；right把文本排到右邊；center把文本排到中間；justify實現(xiàn)兩端對齊文本效果

text-transform樣式屬性：設(shè)置文本的大小寫，該屬性有多個值：none默認值，定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本；capitalize文本中的每個單詞首字母大寫；uppercase定義僅有大寫字母；lowercase定義僅有小寫字母

text-indent樣式屬性：設(shè)定文本塊中首行文本的縮進，如果樣式屬性值為負值，則首行會被縮進到左邊

text-decoration樣式屬性：設(shè)定文本裝飾（比如是否有下劃線及劃線顯示的位置），該屬性有多個值：none默認值，定義標(biāo)準(zhǔn)的文本；underline定義文本下的一條線；overline定義文本上的一條線；line-through定義穿過文本的一條線

列表樣式

list-style-type樣式屬性：設(shè)置列表項標(biāo)記的類型

list-style-position樣式屬性：設(shè)置列表項標(biāo)記相對于列表項內(nèi)容的位置，該屬性有多個值：inside列表項目標(biāo)記放置在文本以內(nèi)；outside默認值，保持標(biāo)記位于文本的左側(cè)，列表項目標(biāo)記放置在文本以外

list-style-image樣式屬性：將列表項標(biāo)記設(shè)定為指定的圖片

list-style樣式屬性：用于在一個聲明中設(shè)置所有的所有的列表樣式屬性，且該樣式屬性設(shè)置屬性值時不需要設(shè)置所有列表樣式屬性所對應(yīng)的屬性值，但需要按照list-style-type、list-style-position和list-style-image順序進行排列，中間用空格隔開

超鏈接樣式

CSS偽類用于向某些選擇器添加特殊效果，偽類使用語法：

選擇器:偽類{

樣式屬性聲明1;...}

CSS中常用的偽列如下：

：link向未被訪問的鏈接添加樣式

：visited向已被訪問的鏈接添加樣式

：hover當(dāng)鼠標(biāo)懸浮在標(biāo)簽上時向標(biāo)簽添加樣式

：active向被激活的標(biāo)簽添加樣式

：focus向擁有鍵盤輸入焦點的標(biāo)簽添加樣式

注意：如果:link，:visited，:hover和:active一起使用，為了產(chǎn)生預(yù)期的效果，在CSS定義中需按照:link、:visited，:hover，:active的順序進行

光標(biāo)樣式屬性

cursor樣式屬性用于設(shè)定光標(biāo)的顯示形狀，該屬性有多個屬性值，其中pointer使光標(biāo)呈現(xiàn)為指示鏈接的指針

感謝各位的閱讀！關(guān)于“CSS中常用樣式和屬性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：CSS中常用樣式和屬性有哪些
URL標(biāo)題：http://jinyejixie.com/article14/jjpsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、電子商務(wù)、營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、標(biāo)簽優(yōu)化、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)