標籤：邊框 文獻 屬性 通用 狀態 偽類 特定 怎麼辦 設定字型
構成結構：選擇符（又稱為選擇qi器）｛聲明（屬性：值）；｝*****注意：大括弧，冒號，每個聲明後的分號。注釋：/*注釋內容寫在這裡*/
一。css樣式
css樣式寫的地方的不同分類：內聯式、嵌入式、外部式
內聯式：<p style="color:red">這裡文字是紅色。</p>
注意要寫在元素的開始標籤裡，不能寫在截至標籤中*****注意：=“”雙引號的存在，引號中的冒號存在。
嵌入式：<style type = "text/css">
span
{
color:red;
}
</sytel>*****注意：span沒有後部標籤，是單標籤。但是在後邊標註過程中的span是存在後標籤的、
外部式：<link href="base.css" rel="stylesheet" type="text/css" />
1、css樣式檔案名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標籤位置一般寫在<head>標籤之內。但不在<style>標籤內部。
*****標頭檔中用span標籤來實現。
三種css樣式的優先順序：內聯式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。
二。選取器
標籤選取器：例子
p{font-size:12px;line-height:1.6em;}*****注釋（字型大小；行間距）類別選取器：.（英文圓點開頭注意類選器名稱{css樣式代碼;}用class="類別選取器名稱"為標籤設定一個類，如下：<span class="stress">膽小如鼠</span>（這個時候類的名稱前不加英文圓點）ID選取器：1、為標籤設定id="ID名稱"，而不是class="類名稱"。2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。ID選取器和類別選取器的異同：相同點：可以應用於任何元素不同點：1、ID選取器只能在文檔中使用一次。與類別選取器不同，在一個HTML文檔中，ID選取器只能使用一次，而且僅一次。而類別選取器可以使用多次。2、可以使用類別選取器詞列表方法為一個元素同時設定多個樣式。（在class後邊用空格分開所選擇的類別選取器，使其具有不同的設定）我們可以為一個元素同時設多個樣式，但只可以用類別選取器的方法實現，ID選取器是不可以的（不能使用 ID 詞列表）。子選取器：選擇指定標籤元素的第一代子項目（只對第一代子項目有作用，對第二代無效）。如下樣本：.food>li{border:1px solid red;}包含（後代）選取器：加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：.first span{color:red;}總結：>作用於元素的第一代後代，空格作用於元素的所有後代。通用選取器：使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下舉例使用html中任意標籤元素字型顏色全部設定為紅色：* {color:red;}偽類別選取器：允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色：a:hover{color:red;} 其他標籤存在不相容問題，故不在此列出。分組選擇符：分組選擇符（，）h1,span{color:red;}*****注釋：選取器下部的標籤選擇，中間用空格隔開即可3.css的繼承，層疊和特殊性繼承：允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。border:1px solid red;此樣式不具有繼承性質邊框為1像素、紅色、實心邊框線，特殊性：標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。權值越高的選用其格式。層疊性：內聯樣式表（標籤內部）> 內建樣式表（當前檔案中）> 外部樣式表（外部檔案中）。就近原則的應用重要性：有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用!important來解決。p{color:red!important;}*****注意：!important要寫在分號的前面*****注釋：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，但記住!important優先順序樣式是個例外，權值高於使用者自己設定的樣式。css學習の第一彈—格式建立
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
