從0開始學CSS（二）

CSS 字體

font-family 屬性font-family:value

規定文本的字體系列
font-family 規定元素的字體系列。
font-family 能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

p {
  font-family:"Times New Roman",Georgia,Serif;
}
複製代碼

• family-name 用於某個元素的字體族名稱或/及類族名稱的一個優先表。默認值：取決於瀏覽器。

font-size 屬性font-size:value

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%}
複製代碼

屬性可設置字體的尺寸。

• xx-small、x-small、small、medium、large、x-large、xx-large 把字體的尺寸設置爲不一樣的尺寸，從 xx-small 到 xx-large。 默認值：medium。
• smaller 把 font-size 設置爲比父元素更小的尺寸。
• larger 把 font-size 設置爲比父元素更大的尺寸。
• length 把 font-size 設置爲一個固定的值。
• % 把 font-size 設置爲基於父元素的一個百分比值。

font-weight 屬性font-weight=value

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
複製代碼

設置文本的粗細。

• normal 默認值。定義標準的字符。
• bold 定義粗體字符。
• bolder 定義更粗的字符。
• lighter 定義更細的字符。
• 100-900定義由粗到細的字符。400 等同於 normal，而 700 等同於 bold。

font-style 屬性font-style:value

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
複製代碼

定義字體的風格

• normal 默認值。瀏覽器顯示一個標準的字體樣式。
• italic 瀏覽器會顯示一個斜體的字體樣式。
• oblique 瀏覽器會顯示一個傾斜的字體樣式。

font-variant 屬性

p.small {
  font-variant:small-caps;
  }
複製代碼

設置小型大寫字母的字體顯示文本，這意味着全部的小寫字母均會被轉換爲大寫，可是全部使用小型大寫字體的字母與其他文本相比，其字體尺寸更小。

• normal 默認值。瀏覽器會顯示一個標準的字體。
• small-caps 瀏覽器會顯示小型大寫字母的字體。

CSS 文本

color 屬性color:value

body{color:red;}
複製代碼

規定文本的顏色。

• color_name 規定顏色值爲顏色名稱的顏色（好比 red）。
• hex_number 規定顏色值爲十六進制值的顏色（好比 #ff0000）。
• rgb_number 規定顏色值爲 rgb 代碼的顏色（好比 rgb(255,0,0)）。

direction屬性direction:value

boody{direction: rtl}  
複製代碼

規定文本的方向 / 書寫方向。

• ltr 默認。文本方向從左到右。
• rtl 文本方向從右到左。

letter-spacing屬性letter-spacing:value

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
複製代碼

設置字符間距。

• normal 默認。規定字符間沒有額外的空間。
• length 定義字符間的固定空間（容許使用負值）。

line-height屬性

p.small {line-height:90%}
p.big {line-height:200%}
複製代碼

設置行高。

• normal 默認。設置合理的行間距。
• number 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
• length 設置固定的行間距。
• % 基於當前字體尺寸的百分比行間距。

text-align屬性

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
複製代碼

規定文本的水平對齊方式。

• left 把文本排列到左邊。默認值：由瀏覽器決定。
• right 把文本排列到右邊。
• center 把文本排列到中間。
• justify 實現兩端對齊文本效果。

text-decoration屬性

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
複製代碼

規定添加到文本的裝飾效果。

• none 默認。定義標準的文本。
• underline 定義文本下的一條線。
• overline 定義文本上的一條線。
• line-through 定義穿過文本下的一條線。

text-indent屬性

p{text-indent:50px;}
複製代碼

規定文本塊首行的縮進。

• length 定義固定的縮進。默認值：0。
• % 定義基於父元素寬度的百分比的縮進。

text-transform屬性

h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}
複製代碼

控制文本的大小寫。

• none 默認。定義帶有小寫字母和大寫字母的標準的文本。
• capitalize 首字母大寫。
• uppercase 所有大寫。
• lowercase 所有小寫。

white-space屬性

p{white-space: nowrap}
複製代碼

規定如何處理元素中的空白。

• normal 默認。空白會被瀏覽器忽略。
• pre 空白會被瀏覽器保留。其行爲方式相似HTML 中的 <pre> 標籤。
• nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
• pre-wrap 保留空白符序列，可是正常地進行換行。
• pre-line 合併空白符序列，可是保留換行符。

word-spacing屬性

p{word-spacing:25px;}
複製代碼

設置單詞間距。

• normal 默認。定義單詞間的標準空間。
• length 定義單詞間的固定空間。

text-overflow屬性

div.test{
text-overflow:ellipsis;
}
複製代碼

規定當文本溢出包含元素時發生的事情。3

• clip 修剪文本。 測試
• ellipsis 顯示省略符號來表明被修剪的文本。

text-shadow屬性

h1{
text-shadow: 5px 5px 5px #FF0000;
}
複製代碼

向文本添加陰影。3

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

word-wrap屬性

p.test {word-wrap:break-word;}
複製代碼

容許對長的不可分割的單詞進行分割並換行到下一行。

• normal 只在容許的斷字點換行（瀏覽器保持默認處理）。
• break-word 在長單詞或 URL 地址內部進行換行。

CSS 邊框屬性

border-width屬性

border-width:thin medium thick 10px;
複製代碼

爲元素的全部邊框設置寬度，或者單獨地爲各邊邊框設置寬度。 只有當邊框樣式不是 none 時才起做用。若是邊框樣式是 none，邊框寬度實際上會重置爲 0。不容許指定負長度值。

• 上邊框是細邊框
• 右邊框是中等邊框
• 下邊框是粗邊框
• 左邊框是 10px 寬的邊框

border-style 屬性

border-style:dotted solid double dashed; 
複製代碼

用於設置元素全部邊框的樣式，或者單獨地爲各邊設置邊框樣式。只有當這個值不是 none 時邊框纔可能出現。

• 上邊框是點狀
• 右邊框是實線
• 下邊框是雙線
• 左邊框是虛線

border-color屬性

border-color:red green blue pink;
複製代碼

設置四條邊框的顏色。

• 上邊框是紅色
• 右邊框是綠色
• 下邊框是藍色
• 左邊框是粉色

border屬性

在一個聲明設置全部的邊框屬性。

能夠按順序設置以下屬性：
1. border-width
2. border-style
3. border-color

border-radius 屬性

border-radius:2em;
border-radius:10px;
複製代碼

元素添加圓角邊框

ul、li列表

list-style屬性

list-style:square inside url('/i/arrow.gif');
複製代碼

在一個聲明中設置全部的列表屬性。

能夠按順序設置以下屬性：
- list-style-type
- list-style-position
- list-style-image

list-style-image屬性

list-style-image:url("/i/arrow.gif");
複製代碼

將圖象設置爲列表項標記。

• URL 圖像的路徑。

list-style-position屬性

list-style-position:inside;
複製代碼

設置列表項標記的放置位置。

• inside 列表項目標記放置在文本之內，且環繞文本根據標記對齊。
• outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本之外，且環繞文本不根據標記對齊。

list-style-type屬性

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}
複製代碼

設置列表項標記的類型。

• disc 默認。標記是實心圓。
• circle 標記是空心圓。
• square 標記是實心方塊。
• decimal 標記是數字。
• decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
• lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
• upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
• lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
• upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
• lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
• lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
• upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
• hebrew 傳統的希伯來編號方式
• armenian 傳統的亞美尼亞編號方式
• georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
• cjk-ideographic 簡單的表意數字
• hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
• katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
• hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
• katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

表格（Table） 屬性

border-collapse 屬性

設置表格的邊框是否被合併爲一個單一的邊框，仍是象在標準的 HTML 中那樣分開顯示。

• collapse 若是可能，邊框會合併爲一個單一的邊框。
• separate 默認值。邊框會被分開。

border-spacing 屬性

設置相鄰單元格的邊框間的距離（僅用於"邊框分離"模式）。

• length length 規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不容許使用負值。
  • 若是定義一個 length 參數，那麼定義的是水平和垂直間距。
  • 若是定義兩個 length 參數，那麼第一個設置水平間距，而第二個設置垂直間距。

caption-side 屬性

設置表格標題的位置。

• top 默認值。把表格標題定位在表格之上。
• bottom 把表格標題定位在表格之下。

empty-cells 屬性

設置是否顯示錶格中的空單元格（僅用於"分離邊框"模式）。

• hide 不在空單元格周圍繪製邊框。
• show 在空單元格周圍繪製邊框。默認。

定位和浮動

position屬性 規定元素的定位類型。

• absolute 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom"` 屬性進行規定。
• relative 生成相對定位的元素，相對於其正常位置進行定位。 所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
• fixed生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
• static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

bottom屬性

設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left屬性

設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

right屬性

設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

top屬性

設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

z-index屬性

設置元素的堆疊順序。

vertical-align屬性

設置元素的垂直對齊方式。

• baseline 默認。元素放置在父元素的基線上。
• sub 垂直對齊文本的下標。
• super 垂直對齊文本的上標
• top 把元素的頂端與行中最高元素的頂端對齊
• text-top 把元素的頂端與父元素字體的頂端對齊
• middle 把此元素放置在父元素的中部。
• bottom 把元素的頂端與行中最低的元素的頂端對齊。
• text-bottom 把元素的底端與父元素字體的底端對齊。
• length
• %使用 "line-height" 屬性的百分比值來排列此元素。容許使用負值。

visibility屬性

規定元素是否可見。

• visible 默認值。元素是可見的。
• hidden 元素是不可見的。

clear屬性

規定元素的哪一側不容許其餘浮動元素。

• left 在左側不容許浮動元素。
• right 在右側不容許浮動元素。
• both 在左右兩側均不容許浮動元素。
• none 默認值。容許浮動元素出如今兩側。

cursor屬性

規定要顯示的光標的類型（形狀）。

• default 默認光標（一般是一個箭頭）
• auto 默認。瀏覽器設置的光標。
• crosshair 光標呈現爲十字線。
• pointer 光標呈現爲指示連接的指針（一隻手）
• move 此光標指示某對象可被移動。
• e-resize 此光標指示矩形框的邊緣可被向右（東）移動。
• ne-resize 此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
• nw-resize 此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
• n-resize 此光標指示矩形框的邊緣可被向上（北）移動。
• se-resize此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
• sw-resize 此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
• s-resize 此光標指示矩形框的邊緣可被向下移動（南）。
• w-resize 此光標指示矩形框的邊緣可被向左移動（西）。
• text 此光標指示文本。
• wait 此光標指示程序正忙（一般是一隻表或沙漏）。
• help 此光標指示可用的幫助（一般是一個問號或一個氣球）。

float屬性

規定框是否應該浮動。

• left 元素向左浮動。
• right元素向右浮動。
• none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。

clear 屬性

clear 屬性規定元素的哪一側不容許其餘浮動元素。

• left 在左側不容許浮動元素。
• right 在右側不容許浮動元素。
• both 在左右兩側均不容許浮動元素。
• none 默認值。容許浮動元素出如今兩側。

display屬性

規定元素應該生成的框的類型。

• none 此元素不會被顯示。
• block 此元素將顯示爲塊級元素，此元素先後會帶有換行符。
• inline 默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
• inline-block 行內塊元素。（CSS2.1 新增的值）

overflow屬性

規定當內容溢出元素框時發生的事情。

• visible 默認值。內容不會被修剪，會呈如今元素框以外。
• hidden 內容會被修剪，而且其他內容是不可見的。
• scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
• auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。