css內容樣式屬性

設置元素的最大高度、最小高度、最大寬度、最小寬度,用max-height、min-height、max-width、min-width。css

visibility:設置元素是否可見。visible和hidden。web

filter:alpha(opacity=70);-moz-opacity:0.7;-webkit-opacity: 0.7;-o-opacity: 0.7;-ms-opacity: 0.7;opacity: 0.7;算法

文本:api

  1. 使用 text-indent 屬性,元素首行縮進。通常來講,適用於全部的塊級元素,但沒法適用於行內元素和相似於圖片這樣的元素。能夠用%、固定值和負值、繼承(使用此值,父元素最好要padding相應值)。
  2. 使用text-align屬性,會影響一個元素中的文本行互相之間的對齊方式。(塊級和表元素居中要使用外邊距實現)。left、right 、center和<center>(不只影響文本,還會把整個元素居中)、justify(使文本的兩端都對齊,由用戶代理(而不是 CSS)來肯定兩端對齊文本如何拉伸,不一樣瀏覽器拉伸定義不一樣,若是 letter-spacing 屬性指定爲一個長度值,「用戶代理不能進一步增長或減小字符間的空間)、inherit(繼承)。
  3. word-spacing 屬性能夠改變字(單詞)之間的標準間隔。接受正值和負值。
  4. letter-spacing 屬性,字母間隔修改的是字符或字母之間的間隔。
  5. text-transform 屬性處理文本的大小寫。none、uppercase(小寫改成大寫)、lowercase(大寫改成小寫)和capitalize(只對每一個單詞的首字母大寫)。
  6. text-decoration文本裝飾。none、underline(下劃線)、overline(上劃線)、line-through(貫穿線)、blink(閃爍)。text-decoration 值會替換而不是累積起來。
    a:link a:visited {text-decoration: underline overline;}
  7. white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。normal(若是給定這個值,換行字符(回車)會轉換爲空格,一行中多個空格的序列也會轉換爲一個空格)、nowrap(防止元素中的文本換行,除非使用了一個 br 元素)、pre(瀏覽器將會注意額外的空格,甚至回車)、 pre-wrap (瀏覽器不只會保留空白符並保留換行符,還容許自動換行)和 pre-line(瀏覽器會保留換行符,並容許自動換行,可是會合並空白符)。
  8. direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。ltr 和 rtl兩個值。對於行內元素,只有當 unicode-bidi 屬性設置爲 embed (這個值對於雙向算法會打開附件的一層嵌套)或 bidi-override(會爲行內元素建立一個覆蓋) 時纔會應用 direction 屬性。
  9. line-height設置行間距。百分比(100%爲標準行高,即當前字體尺寸。大多數瀏覽器中默認行高大約是 110% 到 120%。)、像素值(大多數瀏覽器中默認行高大約是 20px。)和數值(默認行高大約是 1。1爲標準行高。)、normal、inherit。不容許使用負值。
  10. color:文本顏色
  11. background-color:文本背景顏色。

背景:(background)CSS 容許應用純色做爲背景,也容許使用背景圖像建立至關複雜的效果。瀏覽器

  1. background-color :設置背景色
  2. background-image:把圖像放入背景。p.flower {background-image: url(/i/eg_bg_03.gif);}
  3. background-repeat:在頁面上對背景圖像進行平鋪。repeat、repeat-x、repeat-y、no-repeat、inherit。
  4. background-position:改變圖像在背景中的位置。可使用關鍵字、像素值、百分比、負值,能夠混合使用 % 和 position 值。一般兩個值,一個水平方向,一個豎直方向。關鍵字:top、bottom、left、right 和 center(一般成對出現)。若是隻出現一個值,那麼第二值是center。像素值:規定了一個值,另外一個值將是50%。百分比:左上角是 0% 0%。右下角是 100% 100%。規定了一個值,另外一個值將是50%。
  5. background-attachment:設置背景圖像是否固定或者隨着頁面的其他部分滾動。scroll、fixed和inherit。
  6. background-size:規定背景圖片的尺寸。
  7. background-origin:規定背景圖片的定位區域。規定 background-position 屬性相對於什麼位置來定位。padding-box(背景圖像相對於內邊距框來定位)、border-box(相對於邊框盒來定位)和content-box(相對於內容框來定位)。
  8. background-clip:規定背景的繪製區域。border-box(背景被裁剪到邊框盒)、padding-box(被裁剪到內邊距框)和content-box(被裁剪到內容框)。

輪廓:(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的做用。ide

  1. outline-color:設置輪廓的顏色。
  2. outline-width:設置輪廓的寬度。
  3. outline-style:設置輪廓的樣式。輪廓線不會佔據空間,也不必定是矩形。
none 默認。定義無輪廓。
dotted 定義點狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實線輪廓。
double 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
groove 定義 3D 凹槽輪廓。此效果取決於 outline-color 值。
ridge 定義 3D 凸槽輪廓。此效果取決於 outline-color 值。
inset 定義 3D 凹邊輪廓。此效果取決於 outline-color 值。
outset 定義 3D 凸邊輪廓。此效果取決於 outline-color 值。
inherit 規定應該從父元素繼承輪廓樣式的設置。

字體:佈局

  1. font-family:
    • 兩種不一樣類型的字體系列名稱:
      • 通用字體系列 - 擁有類似外觀的字體系統組合(好比 "Serif" 或 "Monospace"\Sans-serif \Cursive\Fantasy)
      • 特定字體系列 - 具體的字體系列(好比 "Times" 或 "Courier"\Georgia )
      • 兩種字體結合解決用戶代理上沒有安裝字體的問題,font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;按順序優先使用。
    • 最經常使用的三種類型:直接中文;英文形式;unicode碼;
    中文名 英文名 Unicode
    Windows
    * 宋體  SimSun   \5B8B\4F53
    * 黑體  SimHei   \9ED1\4F53
    * 微軟雅黑  Microsoft YaHei   \5FAE\8F6F\96C5\9ED1
    微軟正黑體  Microsoft JhengHei   \5FAE\x8F6F\6B63\9ED1\4F53
    新宋體  NSimSun   \65B0\5B8B\4F53
    新細明體  PMingLiU   \65B0\7EC6\660E\4F53
    細明體  MingLiU   \7EC6\660E\4F53
    標楷體  DFKai-SB   \6807\6977\4F53
    仿宋  FangSong   \4EFF\5B8B
    楷體  KaiTi   \6977\4F53
    仿宋_GB2312  FangSong_GB2312   \4EFF\5B8B_GB2312
    楷體_GB2312  KaiTi_GB2312   \6977\4F53_GB2312
    Mac OS
    * 華文細黑  STHeiti Light [STXihei]   \534E\6587\7EC6\9ED1
    * 華文黑體  STHeiti   \534E\6587\9ED1\4F53
    華文楷體  STKaiti   \534E\6587\6977\4F53
    華文宋體  STSong   \534E\6587\5B8B\4F53
    華文仿宋  STFangsong   \534E\6587\4EFF\5B8B
    麗黑 Pro  LiHei Pro Medium   \4E3D\9ED1 Pro
    麗宋 Pro  LiSong Pro Light   \4E3D\5B8B Pro
    標楷體  BiauKai   \6807\6977\4F53
    蘋果麗中黑  Apple LiGothic Medium   \82F9\679C\4E3D\4E2D\9ED1
    蘋果麗細宋  Apple LiSung Light   \82F9\679C\4E3D\7EC6\5B8B
  2. font-style 屬性最經常使用於規定斜體文本。
    • normal - 文本正常顯示
    • italic - 文本斜體顯示。一種簡單的字體風格,對每一個字母的結構有一些小改動,來反映變化的外觀。
    • oblique - 文本傾斜顯示。正常豎直文本的一個傾斜版本。
  3. font-variant 屬性能夠設定小型大寫字母。
  4. font-weight 屬性設置文本的粗細。normal(400)、bold(700)、bolder、 lighter、inherit和數值(關鍵字 100 ~ 900 爲字體指定了 9 級加粗度)。
  5. font-size 屬性設置文本的大小。能夠是絕對或相對值。普通文本(好比段落)的默認大小是 16 像素 (16px=1em)。爲了在全部瀏覽器中,能夠顯示相同的文本大小,並容許全部瀏覽器縮放文本的大小,使用百分比和em結合的方式,body{font-size:100%;}h1{font-size:3.75em}。

連接:a:link,a:visited,a:hover,a:active字體

列表:(list-style)容許你放置、改變列表項標誌,或者將圖像做爲列表項標誌。url

  1.  list-style-image:對各標誌使用一個圖像。值爲url('/images/blueball.gif')。始終規定一個 "list-style-type" 屬性以防圖像不可用。
  2. list-style-position :設置在何處放置列表項標記。
    side 列表項目標記放置在文本之內,且環繞文本根據標記對齊。
    outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本之外,且環繞文本不根據標記對齊。
    inherit 規定應該從父元素繼承 list-style-position 屬性的值。
  3. list-style-type:設置列表項標記的類型。
    none 無標記。
    disc 默認。標記是實心圓。
    circle 標記是空心圓。
    square 標記是實心方塊。
    decimal 標記是數字。
    decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
    lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
    upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
    lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
    lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
    upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
    hebrew 傳統的希伯來編號方式
    armenian 傳統的亞美尼亞編號方式
    georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
    cjk-ideographic 簡單的表意數字
    hiragana 標記是:a, i, u, e, o, ka, ki, 等。(日文片假名)
    katakana 標記是:A, I, U, E, O, KA, KI, 等。(日文片假名)
    hiragana-iroha 標記是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
    katakana-iroha 標記是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

 表格:spa

  1. border-spacing :設置相鄰單元格的邊框間的距離(僅用於「邊框分離」模式separate)。若是定義一個 length 參數,那麼定義的是水平和垂直間距。若是定義兩個 length 參數,那麼第一個設置水平間距,而第二個設置垂直間距。不容許使用負值。
  2. caption-side :設置表格標題的位置。top和bottom。
  3. empty-cells :設置是否顯示錶格中的空單元格(僅用於「分離邊框」模式)。hide和show。
  4. tableLayout :用來顯示錶格單元格、行、列的算法規則。automatic(默認。列寬度由單元格內容設定)和fixed(列寬由表格寬度和列寬度設定)。固定佈局算法比較快,可是不太靈活,而自動算法比較慢,不過更能反映傳統的 HTML 表。
  5. border-collapse :設置表格的邊框是否被合併爲一個單一的邊框。
    separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
    collapse 若是可能,邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

display:規定元素應該生成的框的類型。

none 此元素不會被顯示。
block 此元素將顯示爲塊級元素,此元素先後會帶有換行符。
inline 默認。此元素會被顯示爲內聯元素,元素先後沒有換行符。
inline-block 行內塊元素。(CSS2.1 新增的值)
list-item 此元素會做爲列表顯示。
run-in 此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact CSS 中有值 compact,不過因爲缺少普遍支持,已經從 CSS2.1 中刪除。
marker CSS 中有值 marker,不過因爲缺少普遍支持,已經從 CSS2.1 中刪除。
table 此元素會做爲塊級表格來顯示(相似 <table>),表格先後帶有換行符。
inline-table 此元素會做爲內聯表格來顯示(相似 <table>),表格先後沒有換行符。
table-row-group 此元素會做爲一個或多個行的分組來顯示(相似 <tbody>)。
table-header-group 此元素會做爲一個或多個行的分組來顯示(相似 <thead>)。
table-footer-group 此元素會做爲一個或多個行的分組來顯示(相似 <tfoot>)。
table-row 此元素會做爲一個表格行顯示(相似 <tr>)。
table-column-group 此元素會做爲一個或多個列的分組來顯示(相似 <colgroup>)。
table-column 此元素會做爲一個單元格列顯示(相似 <col>)
table-cell 此元素會做爲一個表格單元格顯示(相似 <td> 和 <th>)
table-caption 此元素會做爲一個表格標題顯示(相似 <caption>)
inherit 規定應該從父元素繼承 display 屬性的值。


媒介類型:(Media Types)容許你定義以何種媒介來提交文檔。文檔能夠被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。

  @media 規則使你有能力在相同的樣式表中,使用不一樣的樣式規則來針對不一樣的媒介。

  {
  p.test {font-family:verdana,sans-serif; font-size:14px}
  }  @media screen

  註釋:媒介類型名稱對大小寫不敏感。

媒介類型 描述
all 用於全部的媒介設備。
aural 用於語音和音頻合成器。
braille 用於盲人用點字法觸覺回饋設備。
embossed 用於分頁的盲人用點字法打印機。
handheld 用於小的手持的設備。
print 用於打印機。
projection 用於方案展現,好比幻燈片。
screen 用於電腦顯示器。
tty 用於使用固定密度字母柵格的媒介,好比電傳打字機和終端。
tv 用於電視機類型的設備。
相關文章
相關標籤/搜索