css是什麼???
css=層疊樣式表 它是用來裝飾body中的內容(博主認爲 css可以比喻成“裝修”)
一、引入方式
1 外部樣式表 <link rel="stylesheet " href="css/style.css" />
2內部樣式表 <style>...</style>
3行間樣式 標籤的style 屬性<body style="background-color: #2AC845;">
4導入樣式 @import url(01.css)
二、語法規則
中文版
選擇器{
屬性: 屬性值;
屬性2: 屬性值2;
}
找到頁面上的元素{
改變什麼屬性:改變成什麼值;
}
對應代碼
div{
color:red;
}
.yellow{
color: yellow;
}
三、選擇器
①元素選擇器
命名規範
1 不能用中文或數字
2 以英文開頭,不能以數字開頭
3 要做到見名知意
4不能有空格
5駝峯命名法 如果是組合詞 從第二個單詞首字母大寫
② ID選擇器
頁面只能出現一次
③類選擇器
分類,同一個元素可以有多個,可以重複使用
接下來是一個具體實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color:red;
}
.yellow{
color: yellow;
}
#bule{
color: blue;
}
</style>
</head>
<body>
<div class="yellow" id="bule">我是第一個div</div>
<div>我是第二個div</div>
</body>
</html>
運行結果如下圖
重點來了
如果我做了一點點的改動,例如這樣
<div class="yellow">我是第一個div</div>
再改動一點呢?
<div>我是第一個div</div>
優先級
根據這個例子,我們很容易發現他們的優先級
id> 類 >元素(權重: 100 10 1)
行間樣式大於id
!important 比行間樣式要高(權重最高,一般不要使用)