CSS書寫規範
開始就形成良好的書寫規範,是你專業化的開始。
空格規範
【強制】 選擇器 與 { 之間必須包含空格。
示例: .selector { }
【強制】 屬性名 與之後的 : 之間不允許包含空格, : 與 屬性值 之間必須包含空格。
示例:
font-size: 12px;
選擇器規範
【強制】 當一個 rule 包含多個 selector 時,每個選擇器聲明必須獨佔一行。
示例:
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建議】 選擇器的嵌套層級應不大於 3 級,位置靠後的限定條件應儘可能精確。
示例:
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規範
【強制】 屬性定義必須另起一行。
示例:
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
CSS 三大特性
層疊 繼承 優先級 是我們學習CSS 必須掌握的三個特性。
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理衝突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上,那麼這個時候一個屬性就會將另一個屬性層疊掉
比如先給某個標籤指定了內部文字顏色爲紅色,接着又指定了顏色爲藍色,此時出現一個標籤指定了相同樣式不同值的情況,這就是樣式衝突。
一般情況下,如果出現樣式衝突,則會按照CSS書寫的順序,以最後的樣式爲準。
-
樣式衝突,遵循的原則是就近原則。 那個樣式離着結構近,就執行那個樣式。
-
樣式不衝突,不會層疊
CSS最後的執行口訣: 長江後浪推前浪,前浪死在沙灘上。
CSS繼承性
所謂繼承性是指書寫CSS樣式表時,子標籤會繼承父標籤的某些樣式,如文本顏色和字號。想要設置一個可繼承的屬性,只需將它應用於父元素即可。
簡單的理解就是: 子承父業。
恰當地使用繼承可以簡化代碼,降低CSS樣式的複雜性。子元素可以繼承父元素的樣式(text-,font-,line-這些元素開頭的都可以繼承,以及color屬性)
定義CSS樣式時,經常出現兩個或更多規則應用在同一元素上,這時就會出現優先級的問題。
在考慮權重時,初學者還需要注意一些特殊的情況,具體如下:
繼承樣式的權重爲0。即在嵌套結構中,不管父元素樣式的權重多大,被子元素繼承時,他的權重都爲0,也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素,其行內樣式的權重非常高,可以理解爲遠大於100。總之,他擁有比上面提高的選擇器都大的優先級。
權重相同時,CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級,或者說排在最後的樣式優先級最大。
CSS定義了一個!important命令,該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近,!important都具有最大優先級。
總結優先級:
-
使用了 !important聲明的規則。
-
內嵌在 HTML 元素的 style屬性裏面的聲明。
-
使用了 ID 選擇器的規則。
-
使用了類選擇器、屬性選擇器、僞元素和僞類選擇器的規則。
-
使用了元素選擇器的規則。
-
只包含一個通用選擇器的規則。
-
同一類選擇器則遵循就近原則。
總結:權重是優先級的算法,層疊是優先級的表現
CSS 背景(background)
background-color | 背景顏色 |
---|---|
background-image | 背景圖片地址 |
background-repeat | 是否平鋪 |
background-position | 背景位置 |
background-attachment | 背景固定還是滾動 |
背景的合寫(複合屬性) | |
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 |
背景圖片(image)
語法:
background-image : none | url (url)
-
參數:
none : 無背景圖(默認的) url : 使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中(只有CSS3纔可以多背景)可以和 background-color 連用。 如果圖片不重複地話,圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪,則會覆蓋背景顏色。
小技巧: 我們提倡 背景圖片後面的地址,url不要加引號。
背景平鋪(repeat)
語法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景圖像在縱向和橫向上平鋪(默認的)
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時,默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
設置背景圖片時,默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
背景位置(position)
語法:
background-position : length || length background-position : position || position
參數:
length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位 position : top | center | bottom | left | center | right
說明:
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值爲:(0% 0%)。 如果只指定了一個值,該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。
注意:
-
position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。
-
如果和精確單位和方位名字混合使用,則必須是x座標在前,y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。
-
實際工作用的最多的,就是背景圖片居中對齊了。
背景附着
語法:
background-attachment : scroll | fixed
參數:
scroll : 背景圖像是隨對象內容滾動 fixed : 背景圖像固定
說明:
設置或檢索背景圖像是隨對象內容滾動還是固定的。
背景簡寫
background屬性的值的書寫順序官方並沒有強制標準的。爲了可讀性,建議大家如下寫:
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最後一個參數是alpha 透明度 取值範圍 0~1之間
注意: 背景半透明是指盒子背景半透明, 盒子裏面的內容不收影響。
導航欄案例
使用技巧:在一行內的盒子內,我們設定行高等於盒子的高度,就可以使文字垂直居中。
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
width: 200px;
height: 50px;
/* background-color: orange; */
display: inline-block; /* 把a 行內元素轉換爲行內塊元素 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我們設定行高等於盒子的高度,就可以使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消下劃線 文本裝飾 */
}
a:hover { /* 鼠標經過 給我們的鏈接添加背景圖片*/
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">專區說明</a>
<a href="#">申請資格</a>
<a href="#">兌換獎勵</a>
<a href="#">下載遊戲</a>
</body>
2019.3.7