CSS中的常见属性

颜色属性

color属性定义文本的颜色

color:green

color:#ff6600

简写式:color:#f60

color:rgb(255,255,255)

    红(r)、绿(G)、蓝(B)每个的取值范围是0~255

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

    a是Alpha的色彩空间透明度取值范围为0~1

字体属性

font-size字体大小

    px:设置一个固定的值

    %:父元素的百分比

    smaller：比父元素更小

    larger:比父元素更大

    inherit:继承父元素的



font-family定义字体

    font-family:微软雅黑.serif;

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

font-weight字体加粗

    normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)

    100、200、300~900     400=normal，而700=bold



font-style字体样式

    italic 斜体

    oblique 倾斜

    inherit  继承



font-variant小型大写字母显示文本

    normal 标准

    small-caps 小型大写字母显示文本

    inherit  继承

背景属性

背景颜色  background-color



背景图片  background-image

    background-image:url(图片路径)

    background-image:none


背景重复  background-repeat

    repeat 重复平铺满

    repeat-x 向y轴重复

    repeat-y 向x轴重复

    no-repeat 不重复


背景位置  background-position

    横向(left,center,right)

    纵向(top,center,bottom)

    用数值来表示位置


简写方式

    background:背景颜色 url 重复 位置

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

文本属性

text-align 横向排列

    left , center , right

line-height 文本行高

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

    数值来设置固定值


text-indent 首行缩进

    px 固定值 ,默认0

    inherit 继承

letter-spacing 字符间距

    length 设置具体的数值(可以设置为负值)

    normal 默认

    inherit 继承

word-spacing 单词间距

    normal标准间距

    px固定值

    inherit继承



direction 文本方向

    ltr从左到右

    rtl从右到左

    inhert 继承


text-transform 文本大小写

    capitalize  每个单词以大写字母开头

    uppercas  定义仅有大写字母

    lowercase 定义无大写字母，仅有小写字母

    inherit  规定从父元素继承 text-transform属性的值

边框属性

边框风格 border-style

    统一风格（简写风格)

        border-style

    单独定义某一方向的边框样式

        border-bottom-style 下边边框样式

        border-top-style  上边边框样式

        border-left-style 左边边框样式

        border-right-style 右边边框样式


    边框风格样式的属性值

        none 无边框

        solid 直线边框

        dashed 虚线边框

        dotted 点状边框

        double 双线边框

        groovr 凸槽边框

        ridge 垄状边框

        inset inset边框

        outset outset边框

        inherit 继承
边框宽度 border-width

    统一风格   border-width

    单独风格

        border-bottom-width 下边边框宽度

        border-top-width  上边边框宽度

        border-left-width 左边边框宽度

        border-right-width 右边边框宽度

    边框宽度的属性值

        thin 细边框

        medium 中等边框

        thick 粗边框

        px  固定值得边框

        inherit  继承



边框颜色 border-color

    统一风格   border-color



    单独风格

        border-bottom-color 下边边框颜色

        border-top-color  上边边框颜色

        border-left-color 左边边框颜色

        border-right-color 右边边框颜色



    属性值

        RGB  rgb(255,255,255)

        RGBA rgba(255,255,255,1)

        十六进制  #ff0、#ff0000

        inherit  继承


    属性值得四种情况

        一个值   包含上下左右   boder-color:*

        两个值   包含上下或者左右  boder-color:* *

        三个值   包含上、（左右）、下 boder-color:* * *

        四个指   包含上、下、左、右   boder-color:* * * *






简写方式     

    border:solid 2px #f60

列表属性

标记的类型  list-style-type

    none 无标记

    disc 默认。标记是实心圆

    circle 标记是空心圆

    square 标记是实心方块

    decimal 标记是数字

    decimal-leading-zero 0开头的数字标记(01,02,03....)

    lower-roman  小写罗马数字(i,ii,iii。。。。)

    upper-roman  大写罗马数字(I,II,III、、、、)

    lower-alpha 小写英文字母

    upper-alpha 大写英文字母

    lower-greek  小写希腊字母

    lower-latin  小写拉丁字母

    uppper-latin  大写拉丁字母

    hebrew  传统的希伯来编号方式

    armenian  传统的亚美尼亚编号方式

    georgian  传统的乔治亚编号方式

    cjk-ideographic 简单的表意数字

    hiragana   标记是: a i u e o ka ki 等 (日文片假名)

    katakana   标记是: A I U  E O KA KI 等 (日文片假名)


    ...

标记的位置  list-style-position

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

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

    inherit 规定应该从复原速度继承list-style-positon属性的值

设置图像列表标记 list-style-image

    URL  图像的路径

    none  默认。无图像被显示

    inherit 继承

简写方式 list-style

    list-style:squre inside url('/i/arrow.jpg');