CSS中常用樣式和屬性有哪些

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

　　CSS樣式表：

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

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

　　第一種：選擇器{

　　樣式屬性聲明；

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

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

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

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

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

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

　　選擇器：

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

　　標(biāo)簽名{

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

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

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

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

　　樣式屬性聲明;...}

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

　　*{

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

　　如何使用CSS樣式

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

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

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

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

　　內(nèi)聯(lián)樣式：當(dāng)一個(gè)HTML文檔中的某個(gè)標(biāo)簽樣式與其他標(biāo)簽樣式不同或該文檔中的標(biāo)簽樣式與父標(biāo)簽樣式不統(tǒng)一時(shí)，講CSS樣式寫在HTML文檔某個(gè)標(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è)置寬度或單獨(dú)的為各邊邊框設(shè)置寬度

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

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

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

　　border-color屬性：用于設(shè)置一個(gè)元素所有邊框的顏色或?yàn)樗膫€(gè)邊框分別設(shè)置不同的顏色

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

　　邊框簡寫屬性：

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

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

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

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

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

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

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

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

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

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

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

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

　　背景樣式

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

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

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

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

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

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

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

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

　　字體樣式

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

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

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

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

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

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

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

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

　　文本樣式

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

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

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

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

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

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

　　列表樣式

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

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

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

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

　　超鏈接樣式

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

　　選擇器:偽類{

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

　　CSS中常用的偽列如下：

　?。簂ink向未被訪問的鏈接添加樣式

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

　?。篽over當(dāng)鼠標(biāo)懸浮在標(biāo)簽上時(shí)向標(biāo)簽添加樣式

　?。篴ctive向被激活的標(biāo)簽添加樣式

　?。篺ocus向擁有鍵盤輸入焦點(diǎn)的標(biāo)簽添加樣式

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

　　光標(biāo)樣式屬性

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

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