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

站在用戶的角度思考問題，與客戶深入溝通，找到弓長嶺網(wǎng)站設(shè)計(jì)與弓長嶺網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋弓長嶺地區(qū)。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è)樣式屬性值組成，樣式屬性和樣式屬性值使用冒號(hào)分開；聲明之間使用分號(hào)間隔

注意：1.如果一個(gè)樣式屬性有多個(gè)樣式屬性值，則樣式屬性值之間用逗號(hào)間隔
2.在CSS中樣式屬性及其樣式屬性值對(duì)大小寫不敏感，且不忽略空格
3.如果屬性值由多個(gè)單詞組成，則建議使用單引號(hào)引起來

選擇器：

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

標(biāo)簽名{
    樣式屬性聲明1;    ...}

作用對(duì)象：HTML文檔中標(biāo)簽名與標(biāo)簽選擇器名相同的所有標(biāo)簽都會(huì)受影響
類選擇器：類選擇器以標(biāo)簽中class標(biāo)簽屬性的屬性值為選擇器名，其語法如下：

.class  標(biāo)簽屬性的屬性值{
    樣式屬性聲明1;    ...}

作用對(duì)象：class標(biāo)簽屬性的屬性值與類選擇器 . 后相同的標(biāo)簽都受影響，注意：class標(biāo)簽屬性不能與數(shù)字開頭
id選擇器：id選擇器以標(biāo)簽中的id標(biāo)簽屬性的屬性值為選擇器名，其語法如下：

#id 標(biāo)簽屬性的屬性值{
    樣式屬性聲明1;    ...}

作用對(duì)象：只有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è)選擇器組成，使用逗號(hào)分隔，其語法如下：

選擇器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)：< link rel=”shortcut icon” 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è)HTM L文檔中的某個(gè)標(biāo)簽樣式與 其他標(biāo)簽樣式不同或該文檔中的標(biāo)簽樣式與父標(biāo)簽樣式不統(tǒng)一時(shí)，講CSS樣式寫在HTML文檔某個(gè)標(biāo)簽的style標(biāo)簽屬性的屬性值中

CSS樣式優(yōu)先級(jí)

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

樣式插入方式優(yōu)先級(jí)：如果按照一般插入CSS樣式的順序（即先使用link插入外部樣式表，再使用style標(biāo)簽插入內(nèi)部樣式表，最后再在style標(biāo)簽屬性中插入內(nèi)聯(lián)樣式）來說，優(yōu)先級(jí)內(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:2px solid greenyellow;border-bottom:2px solid orange;

輪廓線樣式屬性：輪廓線是在標(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è)置所有輪廓線樣式屬性所對(duì)應(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（’URL’）指向圖片的路徑；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è)置所有背景樣式屬性所對(duì)應(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è)置字體系列，使用逗號(hào)分割每種字體，如果瀏覽器不支持第一個(gè)字體則會(huì)嘗試第二個(gè)字體；如果字體系列中的所有字體都不支持，則使用瀏覽器默認(rèn)支持的字體
font樣式屬性：用于在一個(gè)聲明中設(shè)置所有的字體樣式屬性，且該樣式屬性設(shè)置屬性值時(shí)不需要設(shè)置所有字體樣式屬性所對(duì)應(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)文本的水平對(duì)齊方式，該屬性有多個(gè)值：left把文本排到左邊；right把文本排到右邊；center把文本排到中間；justify實(shí)現(xiàn)兩端對(duì)齊文本效果
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)記相對(duì)于列表項(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è)置所有列表樣式屬性所對(duì)應(yīng)的屬性值，但需要按照list-style-type、list-style-position和list-style-image順序進(jìn)行排列，中間用空格隔開

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

選擇器:偽類{
    樣式屬性聲明1;    ...}

CSS中常用的偽列如下：
：link 向未被訪問的鏈接添加樣式
：visited 向已被訪問的鏈接添加樣式
：hover 當(dāng)鼠標(biāo)懸浮在標(biāo)簽上時(shí)向標(biāo)簽添加樣式
：active  向被激活的標(biāo)簽添加樣式
：focus  向擁有鍵盤輸入焦點(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)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：CSS中常用樣式有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://weahome.cn/article/dpppdc.html