第4章 CSS3基礎
阿新 • • 發佈：2021-02-19
4.1 CSS 概述
4.1.1 CSS 簡介
■CSS 是 Cascading Style Sheet 的縮寫，翻譯為層疊樣式表或級聯樣式表，簡稱為“樣式表”。
4.1.2 CSS3 基本語法
<style type="text/css">
選擇器 {
屬性1：屬性值1;
屬性2：屬性值2;
……
}
</style>
CSS樣式的程式碼有以下規範：
（1）雖然CSS程式碼不區分大小寫，但推薦全用小寫。
（2）每條樣式規則用分號“；”隔開，通常寫為多行，簡單的規則也可以合併為一行。
（3）當CSS程式碼較多時，可以使用“/*……*/”新增必要的註釋，增加程式碼的可讀性。
4.1.3 樣式表的分類
■外部樣式表
■連結外部樣式
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>■匯入樣式表
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
■內嵌樣式表
<head> <style type=”text/css”> 選擇符 {樣式屬性：屬性值;......} 選擇符 {樣式屬性：屬性值;......} ...... </style> </head>
在實際應用中，為了充分利用CSS 3樣式表的優勢，建議使用“鏈入外部樣式表”或“匯入外部樣式表”的方式來設定。
■行內樣式表
<標籤名 style=”樣式屬性：屬性值;”>......</標籤名>
style屬性引號的內容類似於樣式表大括號中的內容。每個樣式屬性之間用分號間隔。
4.2 CSS 基本選擇器
4.2.1 標籤選擇器
<style type="text/css">
標籤名 {
屬性1：屬性值1;
屬性2：屬性值2;
……
}
</style>4.2.2 類選擇器
<style type="text/css"> .類名 { 屬性1：屬性值1; …… } </style>
<標籤名 class=“類名”>標籤內容</標籤名>4.2.3 ID 選擇器
■ID屬性作為HTML元素的唯一標識，要求頁面內不能有重複的ID標識屬性。在實際應用中常與<div>標籤配合使用，表示修飾對應ID標識的某個div區塊。
<style type="text/css">
#ID標識名 {
屬性1：屬性值1;
屬性2：屬性值2;
……
}
</style>
4.3 CSS 擴充套件選擇器
4.3.1 組合選擇器
■任何形式的選擇器都可以作為並集選擇器的一部分，使用選擇符組時，各選擇器用逗號連線。
4.3.2 包含選擇器
■包含選擇器也稱為後代選擇器。
4.3.3 交集選擇器
■其中，第一個必須是標籤選擇器，第二個必須是類選擇器或 id 選擇器。這兩個選擇器之間不能有空格，必須連續書寫。
4.3.4 偽類選擇器
標籤名:偽類名{
屬性：屬性值;
}
4.4 CSS 的特性
4.4.2 CSS3 層疊性和優先順序
■CSS樣式優先順序從高到低為：
（1）CSS3 的選擇符優先順序從高到低依次為：id 選擇符優先順序最高，其次是類選擇符，最後是元素選擇符。
（2）CSS3 的定義優先順序依照後定義優先的原則，依次為：優先順序最高的是內嵌樣式，其次是內部樣式表，鏈入外部樣式表和內部樣式表之間則根據定義的先後順序評定，即最後定義的優先順序高。
（覺得這篇筆記對你有點用的話，麻煩你為本筆記點贊，評論，分享或收藏，因為這將是我輸出更多筆記的動力，感謝！）