CSS中常用樣式有哪些

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

景谷ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

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)：< link rel=”shortcut icon” 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)一個HTM L文檔中的某個標(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默認(rèn)值，定義無邊框；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:2px solid greenyellow;border-bottom:2px solid orange;

輪廓線樣式屬性：輪廓線是在標(biāo)簽邊框邊緣繪制一條線，該線不會占據(jù)空間，也不一定是矩形，主要起到突出標(biāo)簽的作用
outline-color樣式屬性：設(shè)置輪廓線的顏色，使用該樣式屬性時必須設(shè)定outline-style樣式屬性的屬性值不能為none，否則看不到效果
outlin-style樣式屬性：設(shè)置輪廓線的樣式，該屬性有多個值（none默認(rèn)值，定義無輪廓；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默認(rèn)值，所溢出內(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（’URL’）指向圖片的路徑；none默認(rèn)值，不顯示背景圖片
background-repeat樣式屬性：設(shè)置標(biāo)簽背景圖片重復(fù)模式，該樣式屬性有多個屬性值：repeat默認(rèn)值，背景圖片將在水平和垂直方向重復(fù)；repeat-x背景圖片將在水平方向重復(fù)；repeat-y背景圖片將在垂直方向重復(fù)；no-repeat背景圖片將僅顯示一次
background-attachment樣式屬性：設(shè)置標(biāo)簽背景圖片是否隨著
頁面其余部分的滾動而滾動，該樣式屬性有多個屬性值：scroll默認(rèn)值，背景圖片會隨著頁面其余部分的滾動而滾動；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默認(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è)置字體系列，使用逗號分割每種字體，如果瀏覽器不支持第一個字體則會嘗試第二個字體；如果字體系列中的所有字體都不支持，則使用瀏覽器默認(rèn)支持的字體
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è)置字符間距，樣式屬性值可以為負(fù)，但這時字符之間更加擁擠
line-height樣式屬性：設(shè)置行間距（即行高），不能為負(fù)值
text-align樣式屬性：設(shè)置標(biāo)簽內(nèi)文本的水平對齊方式，該屬性有多個值：left把文本排到左邊；right把文本排到右邊；center把文本排到中間；justify實現(xiàn)兩端對齊文本效果
text-transform樣式屬性：設(shè)置文本的大小寫，該屬性有多個值：none默認(rèn)值，定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本；capitalize文本中的每個單詞首字母大寫；uppercase定義僅有大寫字母；lowercase定義僅有小寫字母
text-indent樣式屬性：設(shè)定文本塊中首行文本的縮進，如果樣式屬性值為負(fù)值，則首行會被縮進到左邊
text-decoration樣式屬性：設(shè)定文本裝飾（比如是否有下劃線及劃線顯示的位置），該屬性有多個值：none默認(rèn)值，定義標(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默認(rèn)值，保持標(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)站標(biāo)題：CSS中常用樣式有哪些
本文路徑：http://bm7419.com/article0/pccdio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、云服務(wù)器、關(guān)鍵詞優(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)