CSS層級選擇器怎么設置

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

　　為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標簽就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔。

　　css基本語法

　　css的定義方法是：

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

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

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

　　1、內聯式：通過標簽的style屬性，在標簽上直接寫樣式。

　　2、嵌入式：通過style標簽，在網頁上創建嵌入的樣式表。

　　3、外鏈式：通過link標簽，鏈接外部樣式文件到頁面中。

　　1、標簽選擇器

　　標簽選擇器，此種選擇器影響范圍大，一般用來做一些通用設置，或用在層級選擇器中。

　　舉例：

　　2、類選擇器

　　通過類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。

　　舉例：

　　3、層級選擇器

　　主要應用在標簽嵌套的結構中，層級選擇器，是結合上面的兩種選擇器來寫的選擇器，它可與標簽選擇器結合使用，減少命名，同時也可以通過層級，限制樣式的作用范圍。

　　舉例：

　　width 設置元素（標簽）的寬度，如：width:100px;

　　height 設置元素（標簽）的高度，如：height:200px;

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

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

　　以上也可以拆分成四個邊的寫法，分別設置四個邊的：

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

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

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

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

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

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

　　float 設置元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;

　　color 設置文字的顏色，如： color:red;

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

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

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

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

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

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

　　text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px

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