CSS(三)：基本屬性，css基本屬性

CSS(三)：基本屬性，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個長度值和一個可選的顏色值用逗號分隔開來。

可取值和說明如下：

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊的距離。
color	可選。陰影的顏色。

 

 

 

 

 

 

 

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>