背景、邊框、列表和複雜選擇器、css優先順序和權重計算！
阿新 • • 發佈：2018-12-25
邊框和背景屬性
- 邊框內容簡要
| 問題 | 解決方案 |
|---|---|
| 為元素邊框新增屬性 | 使用border-width、border-style、border-color屬性 |
| 為元素盒子的某一條邊應用屬性 | 使用border-top-width、border-top-style、border-bottom-color等 |
| 建立邊框圓角 | border-radius簡寫屬性或某條邊的屬性等 |
| 定義背景 | background-color、background-image等 |
| 定義背景影象位置 | background-position屬性 |
| 定義背景圖充滿容器模式 | background-size屬性 |
| 定義盒子陰影 | box-shadow屬性，注意如果使用多層屬性值，可以實現多層次陰影效果 |
- 基本邊框樣式border-style
| 值 | 效果 |
|---|---|
| none | 沒有效果 |
| solid | 實線邊框 |
| dashed | 破折線式邊框 |
| dotted | 圓點線式邊框 |
| double | 雙邊框 |
| groove | 槽線式邊框 |
| inset | 使元素內容具有內嵌效果 |
| outset | 使元素內容具有外凸效果 |
| ridge | 嵴線邊框 |
看對單條邊的邊框樣式引用
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
- 邊框圓角處理 border-radius
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
border: medium solid black;
border-top: solid 10px;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
- 如果用影象左邊框呢？
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
width: 167px;
line-height: 67px;
-webkit-border-image: url(bordergrid.png) 30 / 50px;
-moz-border-image: url(bordergrid.png) 30 / 50px;
-o-border-image: url(bordergrid.png) 30 / 50px;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit
</p>
</body>
</html>
- 然後便是背景的應用啦！！！
要說到背景的應用，我想最多應該是用於雪碧圖的單個影象的定位和div引用圖片背景，div繼續新增各種內容進行協同顯示吧！尤其輪播圖、商品展示等應用非常多！
比如說這張圖：如何準確顯示需要顯示的部分呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.showlogo{
width: 70px;
height: 70px;
background: url("triathlon.png") no-repeat;
background-position: -70px 0px;
}
</style>
</head>
<body>
<div class="showlogo"></div>
<p>騎車俱樂部</p>
</body>
</html>
接下來是列表
- HTML列表標籤
| 標籤 | 說明 |
|---|---|
| ol | 定義有序列表 |
| ul | 定義無序列表 |
| li | 定義列表專案 |
| dl | 定義自定義列表 |
| dt | 定義列表專案 |
| dd | 定義列表描述 |
- 有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各種有序列表</title>
</head>
<style>
ol,h4{
float: left;
}
</style>
<body>
<h4>編號列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大寫字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小寫字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>羅馬數字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小寫羅馬數字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
- 無序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各種無序列表</title>
<style>
ul,h4{
float: left;
}
</style>
</head>
<body>
<p>
<b>注意：</b> 在 HTML 4中 ul 屬性已廢棄，HTML5 已不支援該屬性，因此我們使用 CSS 代替來定義不同型別的無序列表如下：</p>
<h4>圓點列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圓圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
- 自定義列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定義列表</title>
</head>
<body>
<h4>一個自定義列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
- 對於這些列表來說有兩點是必須要注意的
1.列表的type控制，對於有序列表，type屬性是任然支援的，包含：“1”、“A”、“a”、“I”、“i”，但在 HTML 4.01 中，無序列表”compact” 和 “type” 屬性 已廢棄。HTML5 則不支援著兩個屬性，當然你也可以瞭解它以前包含什麼，“disc”、“ square”、“circle”。
2.列表很多樣式都是有預設值的，尤其自定義列表的dt和dd副標籤最為明顯，這時候要想不受瀏覽器自帶的樣式所影響，就要去看我上一次的筆記裡的樣式初始化了，對於列表自然是type和margin最為重要了，自己設定也是非常方便你的！
複雜選擇器
| 選擇器 | 說明 |
|---|---|
| [attr] | 選取定義了attr屬性，屬性值任意的元素 |
| [attr=”val”] | 選取定義了attr屬性，屬性值為val的元素 |
| [attr^=”val”] | 選取定義了attr屬性，屬性值為以val字串開頭的元素 |
| [attr$=”val”] | 選取定義了attr屬性，屬性值為以val字串結尾的元素 |
| [attr*=”val”] | 選取定義了attr屬性，屬性值為包含val字串的元素 |
| [attr~=”val”] | 選取定義了attr屬性，屬性值包含多個，其中一個為val的元素 |
| [attr|=”val”] | 選取定義了attr屬性，屬性值為以連字串分割的一串值，而第一個為val的元素 |
| <選擇器>,<選擇器> | 選取同時匹配所有選擇器的元素 |
| <選擇器> <選擇器> | 目標為匹配第一個選擇器的後代，然後匹配第二個選擇器 |
| <選擇器> > <選擇器> | 目標為匹配第一個選擇器的直接後代，然後匹配第二個選擇器 |
| <選擇器> + <選擇器> | 目標為匹配第一個選擇器的直接後代，然後匹配第二個選擇器 |
| ::first-line | 選取塊級元素首行 |
| ::first-letter | 選取塊級元素首字母 |
| ::before/::after | 選取元素之前或之後插入內容 |
| :nth-child(n) | 選取父元素的第n個子元素(這裡的n可以用公式代替，如：2n-1) |
| :nth-last-child(n) | 選取父元素的倒數第n個子元素 |
選擇器權重關係
- 重要原則
原則一： 繼承不如指定
原則二： #id > .class > 標籤選擇符
原則三：越具體越強大
原則四：標籤#id >#id ; 標籤.class > .class
CSS優先順序權重計演算法
- CSS優先順序包含四個級別（標籤內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數!
根據這四個級別出現的次數計算得到CSS的優先順序。
CSS優先順序的計算規則如下：
- 元素標籤中定義的樣式（Style屬性）,加1,0,0,0
- 每個ID選擇符(如 #id),加0,1,0,0
- 每個Class選擇符(如 .class)、每個屬性選擇符(如 [attribute=])、每個偽類(如 :hover)加0,0,1,0
- 每個元素選擇符（如p）或偽元素選擇符(如 :firstchild)等，加0,0,0,1
然後，將這四個數字分別累加，就得到每個CSS定義的優先順序的值，
然後從左到右逐位比較大小，數字大的CSS樣式的優先順序就高。 - 例子：
css檔案或 < style >樣式表中如下定義：
1. h1 {color: red;}
/* 一個元素選擇符，結果是0,0,0,1 */
2. body h1 {color: green;}
/* 兩個元素選擇符，結果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一個元素選擇符、一個Class選擇符，結果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一個元素選擇符，一個ID選擇符，結果是0,1,0,1 */
元素的style屬性中如下定義：
h1 {color: blue;}
/* 元素標籤中定義，一個元素選擇符，結果是1,0,0,1*/
如此以來，h1元素的顏色是藍色。
- 注意：
1、!important宣告的樣式優先順序最高，如果衝突再進行計算。
2、如果優先順序相同，則選擇最後出現的樣式。
3、繼承得到的樣式的優先順序最低。
- 結論是：
比較同一級別的個數，數量多的優先順序高，如果相同即比較下一級別的個數
important->內聯->ID->類->標籤|偽類|屬性選擇->偽物件->繼承->萬用字元->繼承