H5學習之02css屬性(全)


本篇內容:
  • 1,字體屬性:(font)
  • 2,文本屬性: (text)
  • 3,背景屬性:(background)
  • 4,超鏈接屬性:(a:)
  • 5,列表屬性:(list)
  • 6,輪廓屬性:(Outline)
  • 7,表格屬性:(table)

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

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 規定顏色值為顏色名稱的顏色(比如 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)
Snip20170123_15.png
  • 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:(背景位置)

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

Snip20170123_18.png
6,輪廓屬性:(Outline)
Snip20170123_19.png
  • 6.1,outline-color:(輪廓顏色)

  • color_name 規定顏色值為顏色名稱的輪廓顏色(比如 red)。

  • hex_number 規定顏色值為十六進制值的輪廓顏色(比如 #ff0000)。

  • rgb_number 規定顏色值為 rgb 代碼的輪廓顏色(比如 rgb(255,0,0))。

  • invert 默認。執行顏色反轉(逆向的顏色)。可使輪廓在不同的背景顏色中都是可見。

  • inherit 規定應該從父元素繼承輪廓顏色的設置。

  • 6.2,outline-style:(輪廓樣式)

Snip20170123_20.png
  • 6.3,outline-width:(輪廓寬度)
  • thin 規定細輪廓。
  • medium 默認。規定中等的輪廓。
  • thick 規定粗的輪廓。
  • length數值 允許您規定輪廓粗細的值。
  • inherit 規定應該從父元素繼承輪廓寬度的設置。
7,表格屬性:(table)
Snip20170123_21.png
  • 7.1, border-collapse: (邊框塌陷,設置表格的邊框是否被合并為一個單一的邊框)
表格邊框塌陷.gif
  • 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 屬性的值。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,436評論 2 378

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,780評論 1 92
  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,079評論 0 1
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,823評論 18 139
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,033評論 1 4
  • 三生三世十里桃花劇 你說都是肥皂般的泡沫無聊 神話的幻想曲不能奢望 我認真的看你的臉 桃花似的緋色霞暈 一圈圈,開...
    蕭娜閱讀 475評論 6 6