CSS(三)：基本屬性

1.屬性選擇器

E[att]：選擇具有att屬性的E元素。

1 /* 獲取具有class屬性的p元素 */
2 p[class]{
3     color: red;
4 }
5 
6 <p class="a">class:a</p>

E[att="val"]：選擇具有att屬性且屬性值等於val的E元素。

1 /* 獲取class屬性的值為"a"的p元素 */
2 p[class="a"]{
3     color: red;
4 }
5 
6 <p class="a">class:a</p>

E[att~="val"]：選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素。

1 /* 獲取class屬性值里有以空格分隔的"a"的p元素 */
2 p[class~="a"]{
3     color: red;
4 }
5 
6 <p class="b a c">class:b a c</p>

E[att^="val"]：選擇具有att屬性且屬性值為以val開頭的字元串的E元素。

1 /* 獲取class屬性值以"a"開頭的p元素 */
2 p[class^="a"]{
3     color: red;
4 }
5 
6 <p class="abc">class:abc</p>

E[att$="val"]：選擇具有att屬性且屬性值為以val結尾的字元串的E元素。

1 /* 獲取class屬性值以"a"結尾的p元素 */
2 p[class$="a"]{
3     color: red;
4 }
5 
6 <p class="bca">class:bca</p>

E[att*="val"]：選擇具有att屬性且屬性值為包含val的字元串的E元素。

1 /* 獲取class屬性值包含"b"的p元素 */
2 p[class*="b"]{
3     color: red;
4 }
5 
6 <p class="abc">class:abc</p>

E[att|="val"]：選擇具有att屬性且屬性值為以val開頭並用連接符"-"分隔的字元串的E元素。

1 /* 獲取class屬性值以"a"開頭並用連接符"-"分隔的字元串的p元素 */
2 p[class|="a"]{
3     color: red;
4 }
5 
6 <p class="a-bc">class:a-bc</p>

2.CSS屬性

• font-family

font - family屬性指定一個元素的字體。

font-family 可以把多個字體名稱作為一個"回退"系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。

有兩種類型的字體系列名稱：

• family-name - 指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。
• generic-family - 通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

使用某種特定的字體系列（Geneva）完全取決於用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為後路。

註意： 每個值用逗號分開。

1 /* 設置p元素的字體 */
2 p{
3     font-family:"Times New Roman",Georgia,Serif;
4 }
5 
6 <p>Times New Roman</p>

• font-size

設置元素的字體大小。註意，實際上它設置的是字體中字元框的高度；實際的字元字形可能比這些框高或矮（通常會矮）。瀏覽器預設的字體大小一般為16px左右。

1 /* 設置p元素的字體大小為16px */
2 p{
3     font-size: 16px;
4 }
5 
6 <p>font-size: 16px</p>

• font-weight

設置文本的粗細，可取100~900的整百位的值，數字值 400 相當於 關鍵字 normal，700 等價於 bold。每個數字值對應的字體加粗必須至少與下一個最小數字一樣細，而且至少與下一個最大數字一樣粗。

1 /* 設置p元素的字體粗細為"bold" */
2 p{
3     font-weight: bold;
4 }
5 
6 <p>font-weight: bold</p>

• font-style

該屬性設置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。理論上講，用戶代理可以根據正常字體計算一個斜體字體。

1 /* 設置p元素的字體為斜體 */
2 p{
3     font-style: italic;
4 }
5 
6 <p>font-style: italic</p>

• font

font 簡寫屬性在一個聲明中設置所有字體屬性。

可設置的屬性是（按順序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，預設值將被插入，如果有預設值的話。

註意： line - height屬性設置行與行之間的空間。

1 /* 設置p元素的字體為斜體、加粗、大小16px、行高20px、微軟雅黑字體 */
2 p{
3     font: italic bold 16px/20px "微軟雅黑";
4 }
5 
6 <p>font: italic bold 16px/20px "微軟雅黑"</p>

• color

color 屬性規定文本的顏色。

這個屬性設置了一個元素的前景色（在 HTML 表現中，就是元素文本的顏色）；光柵圖像不受 color 影響。這個顏色還會應用到元素的所有邊框，除非被 border-color 或另外某個邊框顏色屬性覆蓋。

1 /* 設置p元素的文字顏色為紅色 */
2 p{
3     color: red;
4 }
5 
6 <p>color: red</p>

• text-decoration

text-decoration 屬性規定添加到文本的修飾。

註釋：修飾的顏色由 "color" 屬性設置。

這個屬性允許對文本設置某種效果，如加下劃線。如果後代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到後代元素中。

1 /* 設置p元素的文字修飾為下劃線 */
2 p{
3     text-decoration: underline;
4 }
5 
6 <p>text-decoration: underline</p>

• text-shadow

 text-shadow屬性連接一個或更多的陰影文本。屬性是陰影，指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。

可取值和說明如下：

1 /* 設置p元素的文字陰影向右和下各偏移3px，模糊距離為2px，顏色為紅色 */
2 p{
3     text-shadow: 3px 3px 2px red;
4 }
5 
6 <p>text-shadow: 3px 3px 2px red</p>

• width

width 屬性設置元素的寬度。

說明：這個屬性定義元素內容區的寬度，在內容區外面可以增加內邊距、邊框和外邊距。行內非替換元素會忽略這個屬性。

1 /* 設置p元素寬度為100px */
2 p{
3     width: 100px;
4 }
5 
6 <p>width: 100px</p>

• height

height 屬性設置元素的高度。

1 /* 設置p元素高度為100px */
2 p{
3     height: 100px;
4 }
5 
6 <p>height: 100px</p>

• margin 

margin簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1到4個值。塊級元素的垂直相鄰外邊距會合併，而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合併。同樣地，浮動元素的外邊距也不會合併。允許指定負的外邊距值。

取四個值時分別代表：上、右、下、左。

取三個值時分別代表：上、左右、下。

取兩個值時分別代表：上下、左右。

1 /* 設置p元素的外邊距按上右下左依次為：5px、10px、15px、20px */
2 p{
3     margin: 5px 10px 15px 20px;
4 }
5 
6 <p>margin: 5px 10px 15px 20px</p>

• padding

padding 簡寫屬性在一個聲明中設置所有填充屬性。該屬性可以有1到4個值。

padding屬性的順序規則和margin屬性一致。

1 /* 設置p元素的內邊距按上右下左依次為：5px、10px、15px、20px */
2 p{
3     padding: 5px 10px 15px 20px;
4 }
5 
6 <p>padding: 5px 10px 15px 20px</p>