CSS層級(jí)選擇器怎么設(shè)置

這篇文章主要介紹了CSS層級(jí)選擇器怎么設(shè)置的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS層級(jí)選擇器怎么設(shè)置文章都會(huì)有所收獲，下面我們一起來看看吧。

　　為了讓網(wǎng)頁元素的樣式更加豐富，也為了讓網(wǎng)頁的內(nèi)容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現(xiàn)樣式的標(biāo)簽就廢棄不用了，html只負(fù)責(zé)文檔的結(jié)構(gòu)和內(nèi)容，表現(xiàn)形式完全交給CSS，html文檔變得更加簡潔。

　　css基本語法

　　css的定義方法是：

　　選擇器 { 屬性：值； 屬性：值； 屬性：值；}

　　選擇器是將樣式和頁面元素關(guān)聯(lián)起來的名稱，屬性是希望設(shè)置的樣式屬性，每個(gè)屬性有一個(gè)或多個(gè)值。屬性和值之間用冒號(hào)，一個(gè)屬性和值與下一個(gè)屬性和值之間用分號(hào)，最后一個(gè)分號(hào)可以省略，代碼示例：

　　css引入頁面的方式有三種：

　　1、內(nèi)聯(lián)式：通過標(biāo)簽的style屬性，在標(biāo)簽上直接寫樣式。

　　2、嵌入式：通過style標(biāo)簽，在網(wǎng)頁上創(chuàng)建嵌入的樣式表。

　　3、外鏈?zhǔn)剑和ㄟ^link標(biāo)簽，鏈接外部樣式文件到頁面中。

　　1、標(biāo)簽選擇器

　　標(biāo)簽選擇器，此種選擇器影響范圍大，一般用來做一些通用設(shè)置，或用在層級(jí)選擇器中。

　　舉例：

　　2、類選擇器

　　通過類名來選擇元素，一個(gè)類可應(yīng)用于多個(gè)元素，一個(gè)元素上也可以使用多個(gè)類，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。

　　舉例：

　　3、層級(jí)選擇器

　　主要應(yīng)用在標(biāo)簽嵌套的結(jié)構(gòu)中，層級(jí)選擇器，是結(jié)合上面的兩種選擇器來寫的選擇器，它可與標(biāo)簽選擇器結(jié)合使用，減少命名，同時(shí)也可以通過層級(jí)，限制樣式的作用范圍。

　　舉例：

　　width 設(shè)置元素（標(biāo)簽）的寬度，如：width:100px;

　　height 設(shè)置元素（標(biāo)簽）的高度，如：height:200px;

　　background 設(shè)置元素背景色或者背景圖片，如：background:gold; 設(shè)置元素背景色為金色

　　border 設(shè)置元素四周的邊框，如：border:1px solid black; 設(shè)置元素四周邊框是1像素寬的黑色實(shí)線

　　以上也可以拆分成四個(gè)邊的寫法，分別設(shè)置四個(gè)邊的：

　　border-top 設(shè)置頂邊邊框，如：border-top:10px solid red;

　　border-left 設(shè)置左邊邊框，如：border-left:10px solid blue;

　　border-right 設(shè)置右邊邊框，如：border-right:10px solid green;

　　border-bottom 設(shè)置底邊邊框，如：border-bottom:10px solid pink;

　　padding 設(shè)置元素包含的內(nèi)容和元素邊框的距離，也叫內(nèi)邊距，如padding:20px;padding是同時(shí)設(shè)置4個(gè)邊的，也可以像border一樣拆分成分別設(shè)置四個(gè)邊：padding-top、padding-left、padding-right、padding-bottom。

　　margin 設(shè)置元素和外界的距離，也叫外邊距，如margin:20px;margin是同時(shí)設(shè)置4個(gè)邊的，也可以像border一樣拆分成分別設(shè)置四個(gè)邊：margin-top、margin-left、margin-right、margin-bottom。

　　float 設(shè)置元素浮動(dòng)，浮動(dòng)可以讓塊元素排列在一行，浮動(dòng)分為左浮動(dòng)：float:left; 右浮動(dòng)：float:right;

　　color 設(shè)置文字的顏色，如： color:red;

　　font-size 設(shè)置文字的大小，如：font-size:12px;

　　font-family 設(shè)置文字的字體，如：font-family:‘微軟雅黑’;為了避免中文字不兼容，一般寫成：font-family:‘Microsoft Yahei’;

　　font-weight 設(shè)置文字是否加粗，如：font-weight:bold; 設(shè)置加粗 font-weight:normal 設(shè)置不加粗

　　line-height 設(shè)置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px

　　text-decoration 設(shè)置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉

　　text-align 設(shè)置文字水平對齊方式，如text-align:center 設(shè)置文字水平居中

　　text-indent 設(shè)置文字首行縮進(jìn)，如：text-indent:24px; 設(shè)置文字首行縮進(jìn)24px

關(guān)于“CSS層級(jí)選擇器怎么設(shè)置”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS層級(jí)選擇器怎么設(shè)置”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。