H5學(xué)習(xí)之02css屬性(全)


本篇內(nèi)容:
  • 1些举,字體屬性:(font)
  • 2户魏,文本屬性: (text)
  • 3绪抛,背景屬性:(background)
  • 4,超鏈接屬性:(a:)
  • 5笤休,列表屬性:(list)
  • 6店雅,輪廓屬性:(Outline)
  • 7贞铣,表格屬性:(table)

1辕坝,字體屬性:(font)
Snip20170122_11.png
  • 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í)候的順序參考:

Snip20170123_12.png
/*1末誓,size必須放在family前面喇澡,并且必須放在style和weight兩個(gè)屬性后面*/
/*2殊校,style和weight可以省略为流,且這兩個(gè)屬性位置可以換*/
/*3,如果其他什么不對(duì)艺谆,可以看錯(cuò)誤提示*/
font:900 italic 20px "Athelas";
2,文本屬性: (text)
Snip20170123_13.png
  • 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)
Snip20170123_15.png
  • 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:(背景位置)

Snip20170123_16.png
  • 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)
Snip20170123_17.png
  • 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:(列表類型樣式)

Snip20170123_18.png
6,輪廓屬性:(Outline)
Snip20170123_19.png
  • 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:(輪廓樣式)

Snip20170123_20.png
  • 6.3考廉,outline-width:(輪廓寬度)
  • thin 規(guī)定細(xì)輪廓秘豹。
  • medium 默認(rèn)。規(guī)定中等的輪廓昌粤。
  • thick 規(guī)定粗的輪廓既绕。
  • length數(shù)值 允許您規(guī)定輪廓粗細(xì)的值。
  • inherit 規(guī)定應(yīng)該從父元素繼承輪廓寬度的設(shè)置涮坐。
7凄贩,表格屬性:(table)
Snip20170123_21.png
  • 7.1, border-collapse: (邊框塌陷,設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框)
表格邊框塌陷.gif
  • 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 屬性的值。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蓖租,一起剝皮案震驚了整個(gè)濱河市粱侣,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蓖宦,老刑警劉巖齐婴,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異稠茂,居然都是意外死亡柠偶,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門主慰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)嚣州,“玉大人,你說(shuō)我怎么就攤上這事共螺「秒龋” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵藐不,是天一觀的道長(zhǎng)匀哄。 經(jīng)常有香客問(wèn)我,道長(zhǎng)雏蛮,這世上最難降的妖魔是什么涎嚼? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮挑秉,結(jié)果婚禮上法梯,老公的妹妹穿的比我還像新娘。我一直安慰自己犀概,他們只是感情好立哑,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著姻灶,像睡著了一般铛绰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上产喉,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天捂掰,我揣著相機(jī)與錄音敢会,去河邊找鬼。 笑死这嚣,一個(gè)胖子當(dāng)著我的面吹牛鸥昏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播疤苹,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼互广,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了卧土?” 一聲冷哼從身側(cè)響起惫皱,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尤莺,沒(méi)想到半個(gè)月后旅敷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颤霎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年媳谁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片友酱。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晴音,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出缔杉,到底是詐尸還是另有隱情锤躁,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布或详,位于F島的核電站系羞,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏霸琴。R本人自食惡果不足惜椒振,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望梧乘。 院中可真熱鬧澎迎,春花似錦、人聲如沸选调。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)学歧。三九已至,卻和暖如春各吨,著一層夾襖步出監(jiān)牢的瞬間枝笨,已是汗流浹背袁铐。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留横浑,地道東北人剔桨。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像徙融,于是被迫代替她去往敵國(guó)和親洒缀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案欺冀? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,760評(píng)論 1 92
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,066評(píng)論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理树绩,服務(wù)發(fā)現(xiàn),斷路器隐轩,智...
    卡卡羅2017閱讀 134,714評(píng)論 18 139
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素饺饭;行內(nèi)(內(nèi)聯(lián)、inline-level)元素职车。 塊元素的...
    饑人谷_小侯閱讀 2,014評(píng)論 1 4
  • 三生三世十里桃花劇 你說(shuō)都是肥皂般的泡沫無(wú)聊 神話的幻想曲不能奢望 我認(rèn)真的看你的臉 桃花似的緋色霞暈 一圈圈瘫俊,開...
    蕭娜閱讀 467評(píng)論 6 6