CSS常见属性

CSS常见属性

颜色

color属性定义文本颜色。

常见用法：

1. color: green

2. color: #ff6600

3. 简写式color: #f60

4. color: rgb(255,255,255)

5. color: rgba(255,255,255,1)

---

字体

1. font-size (字体大小)

   • px (固定值)
   • % (父元素的百分比)
   • smaller (比父元素更小)
   • larger (比父元素更大)
   • inherit (继承父元素的)

2. font-family (字体名称)

   用法：font-family: 微软雅黑,serif
   用,隔开多个字体，当字体不存在的时候直接使用下一个。

3. font-weight (字体加粗)

   • normal (默认值)
   • bold (粗)
   • bolder (更粗)
   • lighter (更细)
   • 100-900 (整百数。400=normal, 700=bold)

4. font-style (字体样式)

   • normal (正常)
   • italic (斜体)
   • oblique (倾斜)
   • inherit (继承)

5. font-variant (小型大写字母显示文本)

   • normal (标准)
   • small-caps (小型大写字母显示文本)
   • inherit (继承)

---

背景

1. background-color (背景颜色)

2. background-image (背景图片)

   用法：background-image:url(图片路径)

3. background-repeat (背景重复)

   • repeat (重复平铺满)
   • repeat-x (向X轴重复)
   • repeat-y (向Y轴重复)
   • no-repeat (不重复)

4. background-position (背景位置)

   • 横向：left、center、right
   • 纵向：top、center、bottom
   • 用数值表示

5. 简写方式

   • background: 背景颜色 url(图像) 重复 位置

     e.g. background:#60 url(images/bg.jpg) no-repeat top center

---

文本属性

1. text-align (横向排列)

   • left
   • center
   • right

2. line-height (行高)

   • %基于字体大小的百分比行高
   • 固定数值

3. text-indent (首行缩进)

   • %父元素的百分比
   • px
   • inherit

4. letter-spacing (字符间距)

   • normal （默认）
   • length 具体数值（可为负）
   • inherit

5. word-spacing (单词间距)

   • normal
   • px
   • inherit

6. direction (文本方向)

   • ltr 从左到右(默认值)
   • rtl 从右到左
   • inherit

7. text-transform (文本大小写)

   • normal (默认)
   • capitalize (每个单词以大写字母开头)
   • uppercase (大写)
   • lowercase (小写)
   • inherit

---

边框

1. border-style (边框风格)

   • 统一风格(简写)

   • 单独定义某一方向

     1. border-top-style
     2. border-left-style
     3. border-bottom-style
     4. border-right-style

   • 属性：

     1. none (无)
     2. solid (直线)
     3. dashed (虚线)
     4. dotted (点状)
     5. double (双线)
     6. groove (凸槽)
     7. ridge (垄状边框)
     8. inset
     9. outset
     10. inherit

     P.S. 其中6.7.8.9依托border-color的属性值

2. border-width (边框宽度)

   • 统一风格

   • 单独定义某一方向：

     1. border-top-width
     2. border-left-width
     3. border-bottom-width
     4. border-right-width

   • 属性值

     1. thin (细)
     2. medium (中等)
     3. thick (粗)
     4. px
     5. inherit

3. border-color (边框颜色)

   • 统一风格

   • 单独风格：

     1. border-top-color
     2. border-left-color
     3. border-bottom-color
     4. border-right-color

   • 属性值的四种情况：

     1. 一个值：(上下左右)
     2. 两个值：(上下) (左右)
     3. 三个值：(上)(左右)(下)
     4. 四个值：(上)(右)(下)(左)

4. 简写方式

   border: 样式 宽度 颜色

   e.g. border: solid 2px #f60

---

列表

1. list-style-type (标记的类型)

   • none (无)
   • d�isc (默认，实心圆)
   • circle (空心圆)
   • square (实心方块)
   • decimal (数字)
   • decimal-leading-zero (0开头数字)
   • lower-roman (小写罗马数字)
   • upper-roman (大写罗马数字)
   • lower-alpha (小写英文字母)
   • upper-alpha (大写罗马字母)
   • lower-greek (小写希腊字母)
   • lower-latin (小写拉丁字母)
   • upper-latin (大写拉丁字母)
   • hebrew (传统的希伯来编号)
   • armenian (传统的亚美尼亚编号)
   • georgian (传统的乔治亚编号)
   • 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...)

2. list-style-position (标记的位置)

   • inside

     列表项目标记放置在文本以内，且环绕文本根据标记对齐

   • outside

     默认值，保持标记位于文本的左侧。列表项目标记防止在文本意外，且环绕文本不根据标记对齐

   • inherit

3. list-style-image (设置图像列表标记)

   • url
   • none
   • inherit

4. 简写方式

   list-style: square inside url(图片路径)