今天學習css第二天學習了 複合選擇器、emmet語法、元素的顯示模式、背景圖片、

複合選擇器

包括後代選擇器、子元素選擇器、並集選擇器、連結偽類選擇器、focus偽類選擇器、
1.後代選擇器
語法規範
元素1. 元素2{ 屬性
元素一是父級
元素二可以是子級也可以是孫級
為了程式碼的優化，理論上巢狀儘量不超過3-4層
2.子元素選擇器
選擇元素1 裡面的所有直接後代(子元素) 元素2
元素1 和 元素2 可以是任意基礎選擇器
3.並集選擇器
元素1,元素2
選擇多組標籤, 同時為他們定義相同的樣式
通常用於集體宣告
4.偽類選擇器
用於向某些選擇器新增特殊的效果
連結偽類選擇器
a:link
正常連結樣式
a:visited
已經訪問過的連結樣式
a:hover
滑鼠懸停時的連結樣式
a:active
滑鼠點選未放開時的連結樣式
當四個連結偽類全都書寫的時候一定要按照 LVHA 的循順序宣告
因為 a 連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式
:focus 偽類選擇器
用於選取獲得焦點的表單元素
input:focus
5.交集選擇器
標籤1.Class(#Id) {樣式宣告}
選擇類名為Class(或id值為Id)的標籤1

顯示模式

1.塊級元素
常見的塊元素有

~

、

、

背景

背景
background-color
定義了元素的背景顏色
background-color:顏色值;
一般情況下元素背景顏色預設值是 transparent（透明）
background-color:transparent;
background-image
描述了元素的背景影像
background-image : none | url (url)
none
無背景圖
預設值
url
使用絕對或相對地址指定背景影像
路徑不要加引號
background-repeat
描述背景影像平鋪
background-repeat: repeat | no-repeat | repeat-x | repeat-y
引數值
repeat
背景影像在縱向和橫向上平鋪
預設值
no-repeat
背景影像不平鋪
repeat-x
背景影像在橫向上平鋪
repeat-y
背景影像在縱向上平鋪
background-position
描述圖片在背景中的位置
background-position: x y;
引數值
length
百分數 | 由浮點數字和單位識別符號組成的長度值
position
top | center | bottom | left | center | right 方位名詞
引數是方位名詞
如果指定的兩個值都是方位名詞，則兩個值前後順序無關，比如 left top 和 top left 效果一致
如果只指定了一個方位名詞，另一個值省略，則第二個值預設居中對齊
引數是精確單位
如果引數值是精確座標，那麼第一個肯定是 x 座標，第二個一定是 y 座標
如果只指定一個數值，那該數值一定是 x 座標，另一個預設垂直居中
引數是混合單位
如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是 x 座標，第二個值是 y 座標
background-attachment（瞭解）
設定背景影像是否固定或者隨著頁面的其餘部分滾動
background-attachment : scroll | fixed
引數
fixed
背景影像固定
scroll
背景影像隨物件內容滾動
複合寫法
background: 背景顏色 背景圖片地址 背景平鋪 背景影像滾動 背景圖片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
特點: 沒有順序
預設值
background: transparent none repeat scroll 0 0（top left） ;
背景影像半透明
background: rgba(0, 0, 0, 0.3);
最後一個引數是 alpha 透明度，取值範圍在 0~1之間
背景半透明是指盒子背景半透明，盒子裡面的內容不受影響

三大特性

三大特性
層疊性
優先順序同等的情況下 ：如果樣式衝突,採取 “就近原則”
繼承性
text-，font-，line-這些元素開頭的可以繼承，以及color屬性
子元素可以繼承父元素的樣式
行高的繼承
line-height: 100%;
行高取值為百分比時,先與父元素字型大小進行計算,再繼承給子元素
line-height: 1.5;
行高取值不寫單位時,先繼承給子元素,再與子元素的字型大小進行計算
優先順序
當同一個元素指定多個選擇器，就會有優先順序的產生
權重(從小到大)
繼承
權重 “0,0,0,0”
瀏覽器預設樣式
萬用字元選擇器
權重 “0,0,0,0”
標籤選擇器
權重 “0,0,0,1”
類選擇器,偽類選擇器
權重 “0,0,1,0”
id選擇器
權重 “0,1,0,0”
行內樣式表
權重 “1,0,0,0”
!important
權重最高的
權重會疊加，但是不進位
權重高的優先順序高
權重一樣,則看層疊性

今天綜合案例

小米商城

手機 電話卡 電視 盒子 筆記本 平板 出行 穿戴 智慧 路由器 健康 兒童 耳機 音響

五彩導航