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:(字體大?。?/p>

  • 20px; (數(shù)值)

  • inherit;

  • medium;

  • large;

  • larger;

  • x-large;

  • xx-large;

  • small;

  • smaller;

  • x-small;

  • xx-small;

  • 1.4, font-family:(字體類型)
    font-family:“字體1”, "字體2"; 如果后面有多個參數(shù)以逗號隔開,則后面的選項是前面的備選方案,即第一個字體不存在的時候選擇第二個,如果第二個也不存在,依次選擇后面的字體

  • "宋體";

  • 常用字體: (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana

  • 1.5, font-variant: (大寫字體或者正常字體)

  • normal 默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體。

  • small-caps 瀏覽器會顯示小型大寫字母的字體。

  • inherit 規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。

  • 合寫:font
    合寫font的時候的順序參考:

Snip20170123_12.png
/*1,size必須放在family前面,并且必須放在style和weight兩個屬性后面*/
/*2,style和weight可以省略,且這兩個屬性位置可以換*/
/*3,如果其他什么不對,可以看錯誤提示*/
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ù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。

  • length 設(shè)置固定的行間距。

  • % 基于當(dāng)前字體尺寸的百分比行間距。

  • inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。

  • 2.4,letter-spacing: (字符間距,指每個字母之間的間距,后面的word-spacing是指單詞之間的間距)

  • normal 默認(rèn)。規(guī)定字符間沒有額外的空間。

  • length 定義字符間的固定空間(允許使用負(fù)值)。

  • inherit 規(guī)定應(yīng)該從父元素繼承 letter-spacing 屬性的值。

  • 2.5, text-align: (字符對齊)

  • left 把文本排列到左邊。默認(rèn)值:由瀏覽器決定。

  • right 把文本排列到右邊。

  • center 把文本排列到中間。

  • justify 實(shí)現(xiàn)兩端對齊文本效果。

  • inherit 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值。

  • 2.6,text-decoration:(字符裝飾)

  • none 默認(rèn)。定義標(biāo)準(zhǔn)的文本。

  • underline 定義文本下的一條線。

  • overline 定義文本上的一條線。

  • line-through 定義穿過文本下的一條線。

  • 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 文本中的每個單詞以大寫字母開頭。

  • uppercase 定義僅有大寫字母。

  • lowercase 定義無大寫字母,僅有小寫字母。

  • inherit 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。

  • 2.9, unicode-bidi: (設(shè)置文本方向)

  • 2.10,white-space:(空白空間:設(shè)置元素中空白的處理方式)

  • normal 默認(rèn)??瞻讜粸g覽器忽略。

  • pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標(biāo)簽。

  • nowrap 文本不會換行,文本會在在同一行上繼續(xù),直到遇到
    標(biāo)簽為止。

  • pre-wrap 保留空白符序列,但是正常地進(jìn)行換行。

  • pre-line 合并空白符序列,但是保留換行符。

  • inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

  • 2.11, word-spacing: (字間隔,屬性增加或減少單詞間的空白,前面的letter-spacing是指每個字母之間的間距)

  • normal 默認(rèn)。定義單詞間的標(biāo)準(zhǔn)空間。

  • length 定義單詞間的固定空間。

  • inherit 規(guī)定應(yīng)該從父元素繼承 word-spacing 屬性的值。

3,背景屬性:(background)
Snip20170123_15.png
  • 3.1, background-attachment: (北京粘附:設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動)

  • scroll 默認(rèn)值。背景圖像會隨著頁面其余部分的滾動而移動。

  • fixed 當(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)來設(shè)置它們的樣式

  • 鏈接的四種狀態(tài):

    • a:link - 普通的、未被訪問的鏈接
    • a:visited - 用戶已訪問的鏈接
    • a:hover - 鼠標(biāo)指針位于鏈接的上方
    • a:active - 鏈接被點(diǎn)擊的時刻
  • 實(shí)例

a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;}    /* 鼠標(biāo)指針移動到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點(diǎn)擊的鏈接 */
5,列表屬性:(list)
Snip20170123_17.png
  • 5.1, list-style-image:(列表圖片樣式)

  • URL 圖像的路徑。

  • none 默認(rèn)。無圖形被顯示。

  • inherit 規(guī)定應(yīng)該從父元素繼承 list-style-image 屬性的值。

  • 5.2, list-style-position:(列表位置樣式)

  • inside 列表項目標(biāo)記放置在文本以內(nèi),且環(huán)繞文本根據(jù)標(biāo)記對齊。

  • outside 默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項目標(biāo)記放置在文本以外,且環(huán)繞文本不根據(jù)標(biāo)記對齊。

  • 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)(逆向的顏色)??墒馆喞诓煌谋尘邦伾卸际强梢姟?/p>

  • 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è)置表格的邊框是否被合并為一個單一的邊框)
表格邊框塌陷.gif
  • separate 默認(rèn)值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。

  • collapse 如果可能,邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

  • inherit 規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。

  • 7.2,border-spacing:(表格邊框間距:設(shè)置分隔單元格邊框的距離)

  • length length
    規(guī)定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負(fù)值。
    如果定義一個 length 參數(shù),那么定義的是水平和垂直間距。
    如果定義兩個 length 參數(shù),那么第一個設(shè)置水平間距,而第二個設(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)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容