本篇內(nèi)容:
- 1些举,字體屬性:(font)
- 2户魏,文本屬性: (text)
- 3绪抛,背景屬性:(background)
- 4,超鏈接屬性:(a:)
- 5笤休,列表屬性:(list)
- 6店雅,輪廓屬性:(Outline)
- 7贞铣,表格屬性:(table)
1辕坝,字體屬性:(font)
1.1酱畅,font-style:(字體風(fēng)格)
inherit; (繼承);
oblique;(偏斜體)
italic;(斜體)
normal;(正常)
1.2纺酸, font-weight:(文字粗細(xì))
100-900; (整百數(shù)值)
bold; (加粗)
bolder; (比加粗還要粗)
lighter; (細(xì)文字)
normal; (正常)
1.3,font-size:(字體大兴槲伞)
20px; (數(shù)值)
inherit;
medium;
large;
larger;
x-large;
xx-large;
small;
smaller;
x-small;
xx-small;
1.4, font-family:(字體類型)
font-family:“字體1”, "字體2"; 如果后面有多個(gè)參數(shù)以逗號(hào)隔開仗考,則后面的選項(xiàng)是前面的備選方案痴鳄,即第一個(gè)字體不存在的時(shí)候選擇第二個(gè)缸夹,如果第二個(gè)也不存在虽惭,依次選擇后面的字體"宋體";
常用字體: (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana
1.5, font-variant: (大寫字體或者正常字體)
normal 默認(rèn)值芽唇。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。
small-caps 瀏覽器會(huì)顯示小型大寫字母的字體研侣。
inherit 規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值庶诡。
合寫:font
合寫font的時(shí)候的順序參考:
/*1末誓,size必須放在family前面喇澡,并且必須放在style和weight兩個(gè)屬性后面*/
/*2殊校,style和weight可以省略为流,且這兩個(gè)屬性位置可以換*/
/*3,如果其他什么不對(duì)艺谆,可以看錯(cuò)誤提示*/
font:900 italic 20px "Athelas";
2,文本屬性: (text)
2.1琅催,color:(字體顏色)
color_name 規(guī)定顏色值為顏色名稱的顏色(比如 red)藤抡。
hex_number 規(guī)定顏色值為十六進(jìn)制值的顏色(比如 #ff0000)缠黍。
rgb_number 規(guī)定顏色值為 rgb 代碼的顏色(比如 rgb(255,0,0))。
inherit 規(guī)定應(yīng)該從父元素繼承顏色替饿。
2.2视卢,direction: (方向)
ltr 默認(rèn)据过。文本方向從左到右妒挎。
rtl 文本方向從右到左酝掩。
inherit 規(guī)定應(yīng)該從父元素繼承 direction 屬性的值庸队。
2.3,line-height: (行高)
normal 默認(rèn)竿拆。設(shè)置合理的行間距丙笋。
number 設(shè)置數(shù)字御板,此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距牛郑。
length 設(shè)置固定的行間距淹朋。
% 基于當(dāng)前字體尺寸的百分比行間距。
inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值数尿。
2.4惶楼,letter-spacing: (字符間距歼捐,指每個(gè)字母之間的間距窥岩,后面的word-spacing是指單詞之間的間距)
normal 默認(rèn)宰缤。規(guī)定字符間沒(méi)有額外的空間慨灭。
length 定義字符間的固定空間(允許使用負(fù)值)氧骤。
inherit 規(guī)定應(yīng)該從父元素繼承 letter-spacing 屬性的值筹陵。
2.5, text-align: (字符對(duì)齊)
left 把文本排列到左邊并思。默認(rèn)值:由瀏覽器決定宋彼。
right 把文本排列到右邊输涕。
center 把文本排列到中間慨畸。
justify 實(shí)現(xiàn)兩端對(duì)齊文本效果寸士。
inherit 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值。
2.6螟深,text-decoration:(字符裝飾)
none 默認(rèn)烫葬。定義標(biāo)準(zhǔn)的文本搭综。
underline 定義文本下的一條線兑巾。
overline 定義文本上的一條線蒋歌。
line-through 定義穿過(guò)文本下的一條線堂油。
blink 定義閃爍的文本。
inherit 規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值吱窝。
2.7院峡,text-indent:(字符縮進(jìn))
length 定義固定的縮進(jìn)照激。默認(rèn)值:0实抡。
% 定義基于父元素寬度的百分比的縮進(jìn)欢策。
inherit 規(guī)定應(yīng)該從父元素繼承 text-indent 屬性的值踩寇。
2.8,text-transform:(字符變形辣卒,用于控制元素中的字母大小寫)
none 默認(rèn)掷贾。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize 文本中的每個(gè)單詞以大寫字母開頭荣茫。
uppercase 定義僅有大寫字母想帅。
lowercase 定義無(wú)大寫字母,僅有小寫字母啡莉。
inherit 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值港准。
2.9, unicode-bidi: (設(shè)置文本方向)
2.10,white-space:(空白空間:設(shè)置元素中空白的處理方式)
normal 默認(rèn)浅缸。空白會(huì)被瀏覽器忽略魄咕。
pre 空白會(huì)被瀏覽器保留衩椒。其行為方式類似 HTML 中的 pre 標(biāo)簽。
nowrap 文本不會(huì)換行哮兰,文本會(huì)在在同一行上繼續(xù)毛萌,直到遇到
標(biāo)簽為止。pre-wrap 保留空白符序列奠蹬,但是正常地進(jìn)行換行朝聋。
pre-line 合并空白符序列,但是保留換行符囤躁。
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
2.11, word-spacing: (字間隔荔睹,屬性增加或減少單詞間的空白狸演,前面的letter-spacing是指每個(gè)字母之間的間距)
normal 默認(rèn)。定義單詞間的標(biāo)準(zhǔn)空間僻他。
length 定義單詞間的固定空間宵距。
inherit 規(guī)定應(yīng)該從父元素繼承 word-spacing 屬性的值。
3吨拗,背景屬性:(background)
3.1, background-attachment: (北京粘附:設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng))
scroll 默認(rèn)值满哪。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。
fixed 當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)劝篷,背景圖像不會(huì)移動(dòng)哨鸭。
inherit 規(guī)定應(yīng)該從父元素繼承 background-attachment 屬性的設(shè)置。
3.2, background-color: (背景顏色)
color_name 規(guī)定顏色值為顏色名稱的背景顏色(比如 red)娇妓。
hex_number 規(guī)定顏色值為十六進(jìn)制值的背景顏色(比如 #ff0000)像鸡。
rgb_number 規(guī)定顏色值為 rgb 代碼的背景顏色(比如 rgb(255,0,0))。
transparent 默認(rèn)哈恰。背景顏色為透明只估。
inherit 規(guī)定應(yīng)該從父元素繼承 background-color 屬性的設(shè)置志群。
3.3,background-image:(背景圖片)
url('URL') 指向圖像的路徑蛔钙。
none 默認(rèn)值锌云。不顯示背景圖像。
inherit 規(guī)定應(yīng)該從父元素繼承 background-image 屬性的設(shè)置吁脱。
3.4宾抓,background-position:(背景位置)
- 3.5,background-repeat:(背景重復(fù))
- repeat 默認(rèn)豫喧。背景圖像將在垂直方向和水平方向重復(fù)石洗。
- repeat-x 背景圖像將在水平方向重復(fù)。
- repeat-y 背景圖像將在垂直方向重復(fù)紧显。
- no-repeat 背景圖像將僅顯示一次讲衫。
- inherit 規(guī)定應(yīng)該從父元素繼承 background-repeat 屬性的設(shè)置。
4孵班,超鏈接屬性:(a:)
設(shè)置鏈接的樣式
能夠設(shè)置鏈接樣式的 CSS 屬性有很多種(例如 color, font-family, background 等等)
鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式
-
鏈接的四種狀態(tài):
- a:link - 普通的涉兽、未被訪問(wèn)的鏈接
- a:visited - 用戶已訪問(wèn)的鏈接
- a:hover - 鼠標(biāo)指針位于鏈接的上方
- a:active - 鏈接被點(diǎn)擊的時(shí)刻
實(shí)例
a:link {color:#FF0000;} /* 未被訪問(wèn)的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問(wèn)的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */
5,列表屬性:(list)
5.1篙程, list-style-image:(列表圖片樣式)
URL 圖像的路徑枷畏。
none 默認(rèn)。無(wú)圖形被顯示虱饿。
inherit 規(guī)定應(yīng)該從父元素繼承 list-style-image 屬性的值拥诡。
5.2, list-style-position:(列表位置樣式)
inside 列表項(xiàng)目標(biāo)記放置在文本以內(nèi)氮发,且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊渴肉。
outside 默認(rèn)值。保持標(biāo)記位于文本的左側(cè)爽冕。列表項(xiàng)目標(biāo)記放置在文本以外仇祭,且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。
inherit 規(guī)定應(yīng)該從父元素繼承 list-style-position 屬性的值颈畸。
5.3乌奇,list-style-type:(列表類型樣式)
6,輪廓屬性:(Outline)
6.1眯娱,outline-color:(輪廓顏色)
color_name 規(guī)定顏色值為顏色名稱的輪廓顏色(比如 red)礁苗。
hex_number 規(guī)定顏色值為十六進(jìn)制值的輪廓顏色(比如 #ff0000)。
rgb_number 規(guī)定顏色值為 rgb 代碼的輪廓顏色(比如 rgb(255,0,0))困乒。
invert 默認(rèn)寂屏。執(zhí)行顏色反轉(zhuǎn)(逆向的顏色)。可使輪廓在不同的背景顏色中都是可見迁霎。
inherit 規(guī)定應(yīng)該從父元素繼承輪廓顏色的設(shè)置吱抚。
6.2,outline-style:(輪廓樣式)
- 6.3考廉,outline-width:(輪廓寬度)
- thin 規(guī)定細(xì)輪廓秘豹。
- medium 默認(rèn)。規(guī)定中等的輪廓昌粤。
- thick 規(guī)定粗的輪廓既绕。
- length數(shù)值 允許您規(guī)定輪廓粗細(xì)的值。
- inherit 規(guī)定應(yīng)該從父元素繼承輪廓寬度的設(shè)置涮坐。
7凄贩,表格屬性:(table)
- 7.1, border-collapse: (邊框塌陷,設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框)
separate 默認(rèn)值袱讹。邊框會(huì)被分開疲扎。不會(huì)忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能捷雕,邊框會(huì)合并為一個(gè)單一的邊框椒丧。會(huì)忽略 border-spacing 和 empty-cells 屬性。
inherit 規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值救巷。
7.2壶熏,border-spacing:(表格邊框間距:設(shè)置分隔單元格邊框的距離)
length length
規(guī)定相鄰單元的邊框之間的距離。使用 px浦译、cm 等單位棒假。不允許使用負(fù)值。
如果定義一個(gè) length 參數(shù)管怠,那么定義的是水平和垂直間距淆衷。
如果定義兩個(gè) length 參數(shù),那么第一個(gè)設(shè)置水平間距渤弛,而第二個(gè)設(shè)置垂直間距。inherit 規(guī)定應(yīng)該從父元素繼承 border-spacing 屬性的值甚带。
7.3她肯,caption-side:(標(biāo)題位置)
top 默認(rèn)值。把表格標(biāo)題定位在表格之上鹰贵。
bottom 把表格標(biāo)題定位在表格之下晴氨。
inherit 規(guī)定應(yīng)該從父元素繼承 caption-side 屬性的值。
7.4碉输,empty-cells:(空白單元格是否顯示)
hide 不在空單元格周圍繪制邊框籽前。
show 在空單元格周圍繪制邊框。默認(rèn)。
inherit 規(guī)定應(yīng)該從父元素繼承 empty-cells 屬性的值枝哄。
7.5肄梨,table-layout:(表格布局算法)
automatic 默認(rèn)。列寬度由單元格內(nèi)容設(shè)定挠锥。
fixed 列寬由表格寬度和列寬度設(shè)定众羡。
inherit 規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。