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

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

　　CSS樣式表：

　　作用：設定如何顯示HTML標簽

　　語法結構：

　　第一種：選擇器{

　　樣式屬性聲明；

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

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

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

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

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

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

　　選擇器：

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

　　標簽名{

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

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

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

　　.class標簽屬性的屬性值{

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

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

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

　　#id標簽屬性的屬性值{

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

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

　　后代選擇器：

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

　　樣式屬性聲明1;...

　　}

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

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

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

　　樣式屬性聲明;...}

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

　　*{

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

　　如何使用CSS樣式

　　在HTML中插入CSS樣式有三種方式：外部樣式表，內部樣式表，內聯樣式

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

　　補充：link標簽還用于設置HTML文檔頭部小圖標，語法結構：<linkrel=”shortcuticon”type=”image/x-icon”href=”圖片路徑”/>

　　內部樣式表：當一個HTML文檔中的樣式在其他HTML文檔中不具有共性，但本HTML文檔中的多個標簽的樣式相同，這時為了實現這些樣式規則的重用，同時也為了方便管理樣式規則，則需要將CSS樣式直接寫在HTML文檔的style標簽內

　　內聯樣式：當一個HTML文檔中的某個標簽樣式與其他標簽樣式不同或該文檔中的標簽樣式與父標簽樣式不統一時，講CSS樣式寫在HTML文檔某個標簽的style標簽屬性的屬性值中

　　CSS樣式優先級

　　選擇器優先級：id選擇器>類選擇器>標簽選擇器，且選擇器優先級不考慮選擇器的先后順序

　　樣式插入方式優先級：如果按照一般插入CSS樣式的順序（即先使用link插入外部樣式表，再使用style標簽插入內部樣式表，最后再在style標簽屬性中插入內聯樣式）來說，優先級內聯樣式>內部樣式表>外部樣式表

　　常用CSS樣式屬性

　　邊框樣式屬性

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

　　注意：如果不設置border-style屬性或將其設置為none或hidden屬性值，則border-width屬性不會起作用，這時邊框寬度實際上會重置為0

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

　　注意：只有當值不為none或hidden時才能出現

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

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

　　邊框簡寫屬性：

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

　　2.使用border設置邊框屬性時，border-width，border-style，border-color的值只能取一種

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

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

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

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

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

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

　　內容溢出樣式屬性：

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

　　overflow-x樣式屬性：當標簽中的內容x方向溢出標簽時，用于設定如何處理溢出的內容

　　overflow-y樣式屬性：當標簽中的內容y方向溢出標簽時，用于設定如何處理溢出的內容

　　背景樣式

　　background-color樣式屬性：設置標簽背景顏色，該樣式屬性設置的背景顏色會填充背景的內容，內邊距和邊框區域，擴展到標簽邊框的外邊界，但不包括外邊距

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

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

　　background-attachment樣式屬性：設置標簽背景圖片是否隨著

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

　　background-position樣式屬性：隨著標簽背景圖片的位置

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

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

　　字體樣式

　　font-style樣式屬性：設定字體的風格（normal默認值，顯示標準的字體風格；italic顯示斜體的字體風格）

　　font-variant樣式屬性：設定是否以小型大寫字母的字體顯示文本（normal默認值，顯示標準的字體；small-caps顯示小型大寫字母的字體）

　　font-weight樣式屬性：設置字體的粗細（normal默認值，定義標準的字符；bold定義粗體字符；bolder定義更粗的字符；lighter定義更細的字符；值px直接設定）

　　font-size樣式屬性：設置字體大小

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

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

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

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

　　文本樣式

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

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

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

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

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

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

　　列表樣式

　　list-style-type樣式屬性：設置列表項標記的類型

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

　　list-style-image樣式屬性：將列表項標記設定為指定的圖片

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

　　超鏈接樣式

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

　　選擇器:偽類{

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

　　CSS中常用的偽列如下：

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

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

　　：hover當鼠標懸浮在標簽上時向標簽添加樣式

　　：active向被激活的標簽添加樣式

　　：focus向擁有鍵盤輸入焦點的標簽添加樣式

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

　　光標樣式屬性

　　cursor樣式屬性用于設定光標的顯示形狀，該屬性有多個屬性值，其中pointer使光標呈現為指示鏈接的指針

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