一 .背景
1 . background-color 背景色
| 值 | 描述 |
|---|---|
| color_name | 規定顏色值為顏色名稱的背景顏色（比如 red）。 |
| hex_number | 規定顏色值為十六進制值的背景顏色（比如 #ff0000）。 |
| rgb_number | 規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）。 |
| transparent | 默認。背景顏色為透明。 |
2 . background-image 背景圖像
| 值 | 描述 |
|---|---|
| none | 默認值。不顯示背景圖像。 |
| url('URL') | 指向圖像的路徑。 |
3 . background-repeat 背景重復
| 值 | 描述 |
|---|---|
| repeat | 默認。背景圖像將在垂直方向和水平方向重復。 |
| repeat-x | 背景圖像將在水平方向重復。 |
| repeat-y | 背景圖像將在垂直方向重復。 |
| no-repeat | 背景圖像將僅顯示一次。 |
4 . background-position 背景定位
| 值 | 描述 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
如果您僅規定了一個關鍵詞，那么第二個值將是"center"。 默認值：0% 0%。 |
| x% y% | 第一個值是水平位置，第二個值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您僅規定了一個值，另一個值將是 50%。 |
| xpos ypos | 第一個值是水平位置，第二個值是垂直位置。 左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。 如果您僅規定了一個值，另一個值將是50%。 您可以混合使用 % 和 position 值。 |
5 . background-attachment 背景關聯
| 值 | 描述 |
|---|---|
| scroll | 默認值。背景圖像會隨著頁面其余部分的滾動而移動。 |
| fixed | 當頁面的其余部分滾動時，背景圖像不會移動。 |
| inherit | 規定應該從父元素繼承 background-attachment 屬性的設置。 |
6 .CSS3背景
6.1 background-size 規定背景圖片的尺寸。
| 值 | 描述 |
|---|---|
| length | 設置背景圖像的高度和寬度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置為 "auto"。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。 背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 |
6.2 background-origin 規定背景圖片的定位區域。
| 值 | 描述 |
|---|---|
| padding-box | 背景圖像相對于內邊距框來定位。 |
| border-box | 背景圖像相對于邊框盒來定位。 |
| content-box | 背景圖像相對于內容框來定位。 |
6.3 background-clip 規定背景的繪制區域。
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到邊框盒。 |
| padding-box | 背景被裁剪到內邊距框。 |
| content-box | 背景被裁剪到內容框。 |
二 .文本
1 . text-indent縮進文本
| 值 | 描述 |
|---|---|
| length | 定義固定的縮進。默認值：0。可為負值。 |
| % | 定義基于父元素寬度的百分比的縮進。 |
| inherit | 規定應該從父元素繼承 text-indent 屬性的值。 |
注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。
提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。
2 .text-align 水平對齊
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊。默認值：由瀏覽器決定。 |
| right | 把文本排列到右邊。 |
| center | 把文本排列到中間。 |
| justify | 實現兩端對齊文本效果。 |
| inherit | 規定應該從父元素繼承 text-align 屬性的值。 |
vertical-align 設置元素的垂直對齊方式
top/bottom/middle 此屬性除了table支持的比較完善其他標簽支持的并不是太好，不建議使用此屬性
一般用于做表格，比如課程表
3 .word-spacing 字（單詞）間隔
| 值 | 描述 |
|---|---|
| normal | 默認。定義單詞間的標準空間。其默認值與設置值為 0 是一樣的。 |
| length | 定義單詞間的固定空間。屬性接受一個正長度值或負長度值。 例:word-spacing: -0.5em; |
4 .letter-spacing 字母間隔
letter-spacing 屬性與 word-spacing 的區別在于，字母間隔修改的是字符或字母之間的間隔。
| 值 | 描述 |
|---|---|
| normal | 默認。規定字符間沒有額外的空間。 |
| length | 定義字符間的固定空間（允許使用負值）。 |
5 .text-transform 字符轉換
| 值 | 描述 |
|---|---|
| none 默認 | 定義帶有小寫字母和大寫字母的標準的文本。 |
| capitalize | 文本中的每個單詞以大寫字母開頭。 |
| uppercase | 定義僅有大寫字母。 |
| lowercase | 定義無大寫字母，僅有小寫字母。 |
作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 完成這個修改。
6 . text-decoration 文本裝飾
| 值 | 描述 |
|---|---|
| none 默認 | 定義標準的文本。 |
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
| blink | 定義閃爍的文本。 |
7 .direction 文本方向
| 值 | 描述 |
|---|---|
| ltr | 默認。文本方向從左到右。 |
| rtl | 文本方向從右到左。 |
注釋：對于行內元素，只有當 [unicode-bidi 屬性]設置為 embed 或 bidi-override 時才會應用 direction 屬性。
8 .color 用于設置文本的顏色
可以是名稱的關鍵字 red;
可以是GRB數字，color：#ffffff
可以寫成RGB（a,a,a）;
reba(b,b,b,a)；a表示透明度 范圍0~1
9 .line-height 行間距
| 值 | 描述 |
|---|---|
| normal | 瀏覽器默認為正常行距 |
| length | 由浮點數字和耽誤標識符組成的長度值，允許為負值。 設置數值越大，文本段落中間的行距越大。 |
10 .CSS3 文本效果
10.1 text-shadow 向文本添加陰影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊的距離。 |
| color | 可選。陰影的顏色。 |
10.2 word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。
| 值 | 描述 |
|---|---|
| normal | 只在允許的斷字點換行（瀏覽器保持默認處理）。 |
| break-word | 在長單詞或 URL 地址內部進行換行。 |
三.字體
1 .font-family 指定字體系列
在safari中不好用
mac系統下默認 微軟雅黑
win默認宋體
在win下字體的讀取時從客戶端讀取的
font-face 從服務器端加載字體,主要針對win系統
2 .font-style 字體風格
| 值 | 描述 |
|---|---|
| normal | 默認值。瀏覽器顯示一個標準的字體樣式。 |
| italic | 瀏覽器會顯示一個斜體的字體樣式。 |
| oblique | 瀏覽器會顯示一個傾斜的字體樣式。 |
3 .font-variant 字體變形
| 值 | 描述 |
|---|---|
| normal | 默認值。瀏覽器會顯示一個標準的字體。 |
| small-caps | 瀏覽器會顯示小型大寫字母的字體。 |
4 .font-weight 字體加粗
| 值 | 描述 |
|---|---|
| normal | 默認值。定義標準的字符。 |
| bold | 定義粗體字符。 |
| bolder | 定義更粗的字符。 |
| lighter | 定義更細的字符。 |
| 100~900 | 定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。 |
5 .font-size 字體大小
1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設置字體大小時，em 的值會相對于父元素的字體大小改變。
在網頁中一般最小的是12px；一般默認是16px。
CSS3字體
在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
四.列表
1 .list-style-type 設置列表項標記的類型。
| 值 | 描述 |
|---|---|
| none | 無標記。 |
| 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, 等。) |
2 .list-style-position 設置在何處放置列表項標記。
| 值 | 描述 |
|---|---|
| inside | 列表項目標記放置在文本以內，且環繞文本根據標記對齊。 |
| outside | 默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。 |
3 .ist-style-image 使用圖像來替換列表項的標記。 默認none。
五.表格
| 值 | 描述 |
|---|---|
| border-collapse | 設置是否把表格邊框合并為單一的邊框。 |
| border-spacing | 設置分隔單元格邊框的距離。 |
| caption-side | 設置表格標題的位置。 |
| empty-cells | 設置是否顯示表格中的空單元格。 |
| table-layout | 設置顯示單元、行和列的算法。 |
六.CSS3邊框
1 .box-shadow 向方框添加一個或多個陰影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
2 .border-radius 設置所有四個 border-*-radius 屬性的簡寫屬性。
| 值 | 描述 |
|---|---|
| length | 定義圓角的形狀。 |
| % | 以百分比定義圓角的形狀。 |
3 .border-image 設置所有 border-image-* 屬性的簡寫屬性。
| 值 | 描述 |
|---|---|
| border-image-source | 用在邊框的圖片的路徑。url() |
| border-image-slice | 圖片邊框向內偏移。 |
| border-image-width | 圖片邊框的寬度。 |
| border-image-outset | 邊框圖像區域超出邊框的量。 |
| border-image-repeat | 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 |
Una_Bella
辛苦勞作 轉載請注明出處 O(∩_∩)O~
關于學習IT的 網址頁(更新中...)
