1. 程式人生 > >你不知道的CSS常用屬性(不斷更新,未完待續)

你不知道的CSS常用屬性(不斷更新,未完待續)

顏色

  1. HEX(16進位制色:color:#FFF000)。
  2. RGB(紅綠藍:color:rgb(255,255,0)或color:rgb(100%,100%,20%))。
  3. RGBA(紅綠藍透明度:color:rgba(255,255,0,0.5)。
  4. HSL(CSS3有效,H:色調,S:飽和度,L:亮度。color:hsl(360,100%,50%))。
  5. HSLA(和HSL相似,A表示Alpha透明度,取值0~1之間)。
  6. 全透明:color:transparent。
  7. filter:alpha(opacity:20)),只適用於早期的IE瀏覽器。

字型

  1. 字型大小(absolute-size):xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large。
  2. 字型大小(relative-size):相對於父標籤中字型尺寸進行調節:smaller、larger。
  3. 字型大小(percentage):百分比指定文字大小。
  4. 字型大小(length):長度值指定文字大小。
  5. 字型名稱:font-family:one、two、three。優先順序從前向後,如果系統中沒有當前字型,則往後尋找。

文字屬性

white-space:設定元素中空白的處理方式
  1. normal,預設。
  2. pre,保留空格,當文字超出邊界時不換行。
  3. nowrap,不保留空格,強制在同一行內顯示所有文字,直到文字結束或者碰到br標籤。
  4. pre-wrap,保留空格,當文字碰到邊界時換行。
  5. pre-line,不保留空格,保留文字的換行,當文字碰到邊界時換行。
direction:規定文字的方向
  1. ltr、rtl,文字從左到右和右到左。
vertical-align:文字所在行高的垂直對齊方式
  1. baseline,預設。
  2. sub,垂直對齊文字的下標,和標籤一樣的效果。
  3. super,垂直對齊文字的上標,和標籤一樣的效果。
  4. top,物件的頂端與所在容器的頂端對齊。
  5. text-top,物件的頂端與所在行文字的頂端對齊。
  6. middle,元素物件給予基線對齊。
  7. bottom,物件的底端與所在行的文字底部對齊。
  8. text-bottom,物件的底端與所在行文字的底端對齊。
text-indent:文字縮排。
letter-spacing:新增字母之間的空白。
word-spacing:新增每個單詞之間的空白。
text-transform:屬性控制文字的大小寫
  1. capitalize:文字中的每個單詞以大寫字母開頭。
  2. uppercase:全部大寫。
  3. lowercase:全部小寫。

text-overflow:文字溢位樣式

  1. clip:修剪文字。
  2. ellipsis:顯示省略號…代表被修剪的文字。
  3. string:使用給定的字串來代表被修剪的文字。

text-shadow:左右,上下,虛化,顏色;

word-wrap:break-word;自動換行。

列表屬性

list-style
  1. list-style-type:none去除、decimal-leading-zero;02、square方框、circle空心圓、upper-aph、disc實心圓。
  2. list-style-image:將影象設定為列表項標誌。
  3. list-style-position:inside、outside,列表項標誌的位置。

邊框屬性

border-radius簡寫
  1. 1個引數:四角。
  2. 2個引數:左上右下,左下右上。
  3. 3個引數:左上,左下右上,右下。
  4. 4個引數:左上、右上、右下、左下(順時針)