CSS总结——2

常见属性

1. 颜色属性

4种形式：

• color green

• color: #ff6600（16位进制）
  简写式: color #f60

• color: rgb（255,255,255） 红、绿、蓝每个取值范围0——255

• color: rgba（255,255,255,1）红、绿、蓝、透明度

  
  
  

2. font-size字体属性

• px
  设定一个固定的值

• %
  父元素的百分比

• smaller
  比父元素小

• larger
  比父元素大

• inherit
  继承父元素的

 1）font-family 定义字体

     body{ font-family: "Microsoft Yahei" ，serif ;}

    可以使用 “, ” 隔开，以确保的那个字体不存在的时候直接使用下一个

 2）font-weight 定义字体粗细

       400 = normal（默认值）       700 = bold（粗）     bolder（更粗）    lighter（更细）

    取值范围100-900的整百数

 3）font-style 定义字体样式

    normal  正常（标准）    italic  斜体    oblique 倾斜   inherit  继承

 4）font-variant 小型大写字母

    

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

3. text-decoration

         none   默认    underline   下划线    overline    上划线line-through    中间线（删除线）       blink    闪烁     inherit    继承

---

4. 背景属性

 1）重复 background-repeat

  repeat    重复平铺满   repeat-x  向y轴重复   repeat-y  向x轴重复   no-repeat   不重复

 2）位置 background-position

• 横向（left，center，right）

• 纵向（top，center，bottom）

    或者用数值来表示。

---

  简写方式

        background:背景颜色 url（图像） 重复 位置        background:#f60 url(images/bg.gif) no-repeat center

---

5. 文本属性

 1）text-align 横向对齐

      left、      center      right

 2）line-height 行高

• %
  基于字体大小的百分比行高

• 固定数值

 3）text-indent 缩进

 父元素的百分比  px固定值 inherit继承

 4）word-spacing 单词间距（针对英文）

• normal 标准间距
• px 固定值
• inherit 继承

  5）direction 文本方向

     意思是文本开始显示的位置变了，不是字的位置。
     如，abc 不会反写cba 只是会在右边写abc。

      ltr   从左到右 默认值       rtl   从右到左     inherit 继承

 6）text-transform 文本大小写（针对英文）

        capitalize  字母开头大写         upppercase  大写         lowercase   小写         inherit     从父元素继承

6. 边框属性

 1）border-style 边框风格

    可单独设置四个方向的边框
    border-（top/bottom/left/right）-style

样式属性值：

• none 无边框
• solid 直线边框
• dashed 虚线边框
• dotted 点状边框
• double 双线边框
• groove 凸槽边框
• ridge 垄状边框
• inset inset边框
• outset ourset边框
• inherit 继承

  其中groove、ridge、inset、outset的效果，取决于border-color的值

 2）border-width 边框宽度

 属性：

• thin 细边框
• medium 中等边框
• thick 粗边框
• px固定值的边框
• inherit 继承

 3）border-color 边框颜色

四种情况：

• 一个值 （上，下，左，右）
• 两个值 （上下）（左右）
• 三个值 （上）（左，右）（下）
• 四个值 （上）（右）（下）（左）

 7. 列表属性

 1）list-style-type 标记类型

• none 无标记

• disc 实心圆（默认）

• circle 空心圆

• square 实心方块

• decimal 数字

• decimal-leading-zero 0开头的数字标记 （01，02等）

• lower-roman 小写罗马数字

• upper-roman 大写罗马数字

• lowed-alpha 小写英文字母

• upped-alpha 大写英文字母

 2）list-style-position 标记位置

• inside：列表标记放置在文本内

• outside：默认值，标记位于文本的左侧

• inherit 继承

 3）list-style-image 图像列表标记

• URL：图像路径

• none 无图像显示 （默认）

• inherit 从父元素中继承

 简写：

 list-style:square inside url(image/01.gif)