本篇內容:
- 1,字體屬性:(font)
- 2,文本屬性: (text)
- 3,背景屬性:(background)
- 4,超鏈接屬性:(a:)
- 5,列表屬性:(list)
- 6,輪廓屬性:(Outline)
- 7,表格屬性:(table)
1,字體屬性:(font)
1.1,font-style:(字體風格)
inherit; (繼承);
oblique;(偏斜體)
italic;(斜體)
normal;(正常)
1.2, font-weight:(文字粗細)
100-900; (整百數值)
bold; (加粗)
bolder; (比加粗還要粗)
lighter; (細文字)
normal; (正常)
1.3,font-size:(字體大小)
20px; (數值)
inherit;
medium;
large;
larger;
x-large;
xx-large;
small;
smaller;
x-small;
xx-small;
1.4, font-family:(字體類型)
font-family:“字體1”, "字體2"; 如果后面有多個參數以逗號隔開,則后面的選項是前面的備選方案,即第一個字體不存在的時候選擇第二個,如果第二個也不存在,依次選擇后面的字體"宋體";
常用字體: (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana
1.5, font-variant: (大寫字體或者正常字體)
normal 默認值。瀏覽器會顯示一個標準的字體。
small-caps 瀏覽器會顯示小型大寫字母的字體。
inherit 規定應該從父元素繼承 font-variant 屬性的值。
合寫:font
合寫font的時候的順序參考:
/*1,size必須放在family前面,并且必須放在style和weight兩個屬性后面*/
/*2,style和weight可以省略,且這兩個屬性位置可以換*/
/*3,如果其他什么不對,可以看錯誤提示*/
font:900 italic 20px "Athelas";
2,文本屬性: (text)
2.1,color:(字體顏色)
color_name 規定顏色值為顏色名稱的顏色(比如 red)。
hex_number 規定顏色值為十六進制值的顏色(比如 #ff0000)。
rgb_number 規定顏色值為 rgb 代碼的顏色(比如 rgb(255,0,0))。
inherit 規定應該從父元素繼承顏色。
2.2,direction: (方向)
ltr 默認。文本方向從左到右。
rtl 文本方向從右到左。
inherit 規定應該從父元素繼承 direction 屬性的值。
2.3,line-height: (行高)
normal 默認。設置合理的行間距。
number 設置數字,此數字會與當前的字體尺寸相乘來設置行間距。
length 設置固定的行間距。
% 基于當前字體尺寸的百分比行間距。
inherit 規定應該從父元素繼承 line-height 屬性的值。
2.4,letter-spacing: (字符間距,指每個字母之間的間距,后面的word-spacing是指單詞之間的間距)
normal 默認。規定字符間沒有額外的空間。
length 定義字符間的固定空間(允許使用負值)。
inherit 規定應該從父元素繼承 letter-spacing 屬性的值。
2.5, text-align: (字符對齊)
left 把文本排列到左邊。默認值:由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。
inherit 規定應該從父元素繼承 text-align 屬性的值。
2.6,text-decoration:(字符裝飾)
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。
inherit 規定應該從父元素繼承 text-decoration 屬性的值。
2.7,text-indent:(字符縮進)
length 定義固定的縮進。默認值:0。
% 定義基于父元素寬度的百分比的縮進。
inherit 規定應該從父元素繼承 text-indent 屬性的值。
2.8,text-transform:(字符變形,用于控制元素中的字母大小寫)
none 默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母,僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
2.9, unicode-bidi: (設置文本方向)
2.10,white-space:(空白空間:設置元素中空白的處理方式)
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標簽。
nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到
標簽為止。pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合并空白符序列,但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
2.11, word-spacing: (字間隔,屬性增加或減少單詞間的空白,前面的letter-spacing是指每個字母之間的間距)
normal 默認。定義單詞間的標準空間。
length 定義單詞間的固定空間。
inherit 規定應該從父元素繼承 word-spacing 屬性的值。
3,背景屬性:(background)
3.1, background-attachment: (北京粘附:設置背景圖像是否固定或者隨著頁面的其余部分滾動)
scroll 默認值。背景圖像會隨著頁面其余部分的滾動而移動。
fixed 當頁面的其余部分滾動時,背景圖像不會移動。
inherit 規定應該從父元素繼承 background-attachment 屬性的設置。
3.2, background-color: (背景顏色)
color_name 規定顏色值為顏色名稱的背景顏色(比如 red)。
hex_number 規定顏色值為十六進制值的背景顏色(比如 #ff0000)。
rgb_number 規定顏色值為 rgb 代碼的背景顏色(比如 rgb(255,0,0))。
transparent 默認。背景顏色為透明。
inherit 規定應該從父元素繼承 background-color 屬性的設置。
3.3,background-image:(背景圖片)
url('URL') 指向圖像的路徑。
none 默認值。不顯示背景圖像。
inherit 規定應該從父元素繼承 background-image 屬性的設置。
3.4,background-position:(背景位置)
- 3.5,background-repeat:(背景重復)
- repeat 默認。背景圖像將在垂直方向和水平方向重復。
- repeat-x 背景圖像將在水平方向重復。
- repeat-y 背景圖像將在垂直方向重復。
- no-repeat 背景圖像將僅顯示一次。
- inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
4,超鏈接屬性:(a:)
設置鏈接的樣式
能夠設置鏈接樣式的 CSS 屬性有很多種(例如 color, font-family, background 等等)
鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式
-
鏈接的四種狀態:
- a:link - 普通的、未被訪問的鏈接
- a:visited - 用戶已訪問的鏈接
- a:hover - 鼠標指針位于鏈接的上方
- a:active - 鏈接被點擊的時刻
實例
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點擊的鏈接 */
5,列表屬性:(list)
5.1, list-style-image:(列表圖片樣式)
URL 圖像的路徑。
none 默認。無圖形被顯示。
inherit 規定應該從父元素繼承 list-style-image 屬性的值。
5.2, list-style-position:(列表位置樣式)
inside 列表項目標記放置在文本以內,且環繞文本根據標記對齊。
outside 默認值。保持標記位于文本的左側。列表項目標記放置在文本以外,且環繞文本不根據標記對齊。
inherit 規定應該從父元素繼承 list-style-position 屬性的值。
5.3,list-style-type:(列表類型樣式)
6,輪廓屬性:(Outline)
6.1,outline-color:(輪廓顏色)
color_name 規定顏色值為顏色名稱的輪廓顏色(比如 red)。
hex_number 規定顏色值為十六進制值的輪廓顏色(比如 #ff0000)。
rgb_number 規定顏色值為 rgb 代碼的輪廓顏色(比如 rgb(255,0,0))。
invert 默認。執行顏色反轉(逆向的顏色)。可使輪廓在不同的背景顏色中都是可見。
inherit 規定應該從父元素繼承輪廓顏色的設置。
6.2,outline-style:(輪廓樣式)
- 6.3,outline-width:(輪廓寬度)
- thin 規定細輪廓。
- medium 默認。規定中等的輪廓。
- thick 規定粗的輪廓。
- length數值 允許您規定輪廓粗細的值。
- inherit 規定應該從父元素繼承輪廓寬度的設置。
7,表格屬性:(table)
- 7.1, border-collapse: (邊框塌陷,設置表格的邊框是否被合并為一個單一的邊框)
separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能,邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit 規定應該從父元素繼承 border-collapse 屬性的值。
7.2,border-spacing:(表格邊框間距:設置分隔單元格邊框的距離)
length length
規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。
如果定義一個 length 參數,那么定義的是水平和垂直間距。
如果定義兩個 length 參數,那么第一個設置水平間距,而第二個設置垂直間距。inherit 規定應該從父元素繼承 border-spacing 屬性的值。
7.3,caption-side:(標題位置)
top 默認值。把表格標題定位在表格之上。
bottom 把表格標題定位在表格之下。
inherit 規定應該從父元素繼承 caption-side 屬性的值。
7.4,empty-cells:(空白單元格是否顯示)
hide 不在空單元格周圍繪制邊框。
show 在空單元格周圍繪制邊框。默認。
inherit 規定應該從父元素繼承 empty-cells 屬性的值。
7.5,table-layout:(表格布局算法)
automatic 默認。列寬度由單元格內容設定。
fixed 列寬由表格寬度和列寬度設定。
inherit 規定應該從父元素繼承 table-layout 屬性的值。