1.初始化專案環境
CSS層疊樣式表
CSS簡介
CSS主要用來調節html標籤的各種樣式。
對於html大量的標籤，我們首先要有尋找標籤的能力，才能對各類標籤和各個標籤進行精準的修改。
所以CSS的學習主要分兩塊：
- 如何查詢標籤
- 如何調整樣式
css基礎語法結構
選擇器 {
樣式名1：樣式值1 樣式值2；
樣式名2：樣式值；
}
/*css的單行和多行註釋*/
匯入css的多種方式
-
head內的style標籤內部編寫（學習時使用便於對照）
<head> <style> div {color: blue} </style> </head> -
head內的link標籤引入（標準方式）
<head> <link rel="stylesheet" href="mycss.css"> </head> -
標籤內部通過style屬性直接編寫（內聯方式，不推薦）
<div style="color: blue">-div-</div>
CSS選擇器
css基本選擇器
一個標籤可以從標籤型別，id屬性和class屬性來劃分：
id屬性和class屬性的區別在於：
- id屬性同一個頁面的所有id值不能重複，id屬性只有一個值，更像是唯一標識。
- class屬性同一個頁面的所有的class可以用同一個值，且一個標籤可以有多個class值，更像是分門別類。
於是按照多種劃分方式，也催生了四種基本的選擇器：
| 基礎選擇器 | 語法 |
|---|---|
| 標籤選擇器 | div {樣式} |
| id選擇器 | #d1 {樣式} |
| 類選擇器 | .c1 {樣式} |
| 通用選擇器 | * {樣式} |
其中通用選擇器是指對頁面中所有標籤進行統一的樣式新增，通常是做一些簡單的樣式去除。
.c1{
color:blue
}
#d1{
background-color:pink
}
css組合選擇器
有時候，我們基本的選擇器並不能滿足我們的需求，如部落格頁面中，我們的文章內容都在一個id為context的div標籤下，其中有很多p標籤沒有id值和class屬性。
所以我們的訴求是找到#context下的p標籤進行操作。
於是有了組合選擇器，可以是任意基礎選擇器組合在一起。
| 組合選擇器 | 語法 | 含義 |
|---|---|---|
| 後代選擇器 | div p | div標籤下的所有p標籤 |
| 兒子選擇器 | div>p | div標籤下的第一層p標籤 |
| 毗鄰選擇器 | div+p | div標籤後緊挨的p標籤 |
| 弟弟選擇器 | div~p | div標籤後面所有p標籤 |
<div id="context">
<p>我是第一行</p>
<p>她是第二行 <span>[我行裡還有個span]</span></p>
<p>你是第三行</p>
<code>我是程式碼相關 不是p</code>
<p>他是第四行</p>
<p>汝乃第五行</p>
<div><p>我是p孫子</p></div>
</div>
<p>我是文章外的一行</p>
<p>你是文章外的第二行</p>
<span id="d2" class="c1 c3">我是span標籤</span>
以上面這段html頁面做實驗，分別測試四種組合選擇器的對比如下。
分組與巢狀
-
分組：對於多個選擇查詢的結果可以做統一樣式的處理
用逗號隔開的幾個選擇器統一新增樣式
-
巢狀：對於查詢到的所有標籤再巢狀一層屬性查詢
選擇器後緊貼類選擇器進行二次篩選
| 處理方式 | 語法 | 解釋 |
|---|---|---|
| 分組 | div,p,#d1 {樣式} | 多個選擇器的結果統一新增樣式 |
| 巢狀 | div.c1 | 一個結果選擇器結果下含有c1屬性的標籤新增樣式 |
| 綜合使用 | #d1 p.c2 | 查詢d1標籤的後代p標籤中有c2類屬性的新增樣式 |
屬性選擇器
標籤內是有屬性的，有預設屬性和自定義屬性，css可以通過標籤的屬性來進行查詢。
/*如果有username屬性則符合條件*/
[username] {}
/*username屬性的值為leethon則符合條件*/
[username='leethon']
/*擁有username屬性的div標籤，巢狀屬性查詢*/
div[username] {}
偽類選擇器
a標籤的四種狀態：
- 未訪問過的連結 -- link
- 滑鼠懸停在連結上 -- hover
- 選定連結時 -- active
- 已訪問過的連結 -- visited
a:link {
color: #FF0000
}
a:hover {
color: #FF00FF
}
a:active {
color: #0000FF
}
a:visited {
color: #00FF00
}
偽元素選擇器
給標籤的元素增加一些特殊的樣式，語法為
其他選擇器:偽元素選擇器
注意：在css中新增的內容包括文字，無法被正常選中，這可以應用隱藏一些文字內容的選中狀態。
-
first-letter
常用的給首字母設定特殊樣式：
p:first-letter { font-size: 48px; color: red; } -
before
在每個p標籤之前插入內容
p:before { content:"*"; color:red; } -
after
在每個p標籤之後插入內容
p:after { content:"[?]"; color:blue; }
選擇器優先順序
不同選擇器是可能篩選到同一個標籤的，所以多個選擇器對同一種樣式進行設定，應該生效哪一個呢？
-
對於同一種選擇器遵循就近原則
即內聯樣式最終生效，其次是head標籤中離標籤最近的樣式設定。
<head> <style> div {color: yellow} </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <div style="color: blue">-div-</div> </body> -
對於不同選擇器遵循就精準原則
除了內聯樣式外，id選擇器最終生效，其次是類選擇器，最後是標籤選擇器。
<style> #d1 {color:blue} id選擇器優先順序最高 .c1 {color:red} 類選擇器優先順序其次 div {color: yellow} 標籤選擇器優先順序最低 </style>
CSS樣式調節
字型樣式
| 樣式屬性 | 屬性值 | 含義 |
|---|---|---|
| font-size | 數字px | 字型大小畫素值 |
| font-weight | bold\normal\lighter | 自重 |
| color | 色盤、顏色名、rgb | 前景色，文字色 |
| text-align | left\center\right | 文字對齊 |
| text-decoration | none | 主要用於a標籤取消下劃線 |
| text-indent | 數字px | 首行縮排 |
關於color的取色方式
-
預設的顏色名
-
顏色代號#六個16進位制數
如
#FF00FF|#00FF00 -
rgb與rgba
rgb(0255,0255,0~255)表示三原色混合後的結果
rgba多一位引數表示透明度，範圍0~1
取色可以使用截圖工具或者取色盤：
背景屬性
| 樣式屬性 | 屬性值 | 含義 |
|---|---|---|
| background-color | 顏色值 | 背景色 |
| background-image | 圖片url | 背景圖片 |
| background-repeat | no-repeat\repeat-x | 背景圖片重複鋪蓋 |
| background-position | center center\100px -100px | 背景圖片位置調整 |
| background | 以上所有屬性值 | 統合背景屬性 |
div {
width: 800px; /*div標籤設定寬高*/
height: 800px;
background-color: red;
background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");
/*可以索引到圖片網頁地址*/
/*background-image: url("666.png"); 也可以是本地地址*/
background-repeat: no-repeat; /*不重複*/
/*background-repeat: repeat-x; 只有橫向重複*/
/*background-repeat: repeat-y; 只有縱向重複*/
background-position: center center; /*調整圖片居中到div標籤中*/
/*background: url("666.png") blue no-repeat center center; 所有屬性都可以用這一句完成*/
}