1、颜色属性

color：定义文本的颜色，几种写法：

  • color：green
  • color：#ff6600
  • color：#f60，简写式
  • color：rgb(255,255,255)，红(R)、绿(G)、蓝(B) 每个的取值范围0~255
  • color：rgba(255,255,255,1)，RGBA是代表Red（红） Green（绿） Blue（蓝）和 Alpha(透明度)

2、字体属性

  • font-size：字体大小，font-size:14px
  • font-family：定义字体，font-family:微软雅黑,serif;，可以使用“,”隔开，当字体不存在的时候直接使用下一个
  • font-weight：字体加粗，normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)、100、200、300~900

3、背景属性

  • background-color：背景颜色
  • background-image：背景图片
  • background-repeat：背景重复，repeat（重复平铺满）、repeat-x（向Y轴重复）、repeat-y（向Y轴重复）、no-repeat（不重复）
  • background-position：背景位置，横向（left,center,right）、纵向（top,center,bottom）

简写方式：

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

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

4、文本属性

  • text-align：横向排列，left，center，right
  • line-height：文本行高，%基于字体大小的百分比行高、数值来设置固定值
  • text-indent：首行缩进
  • letter-spacing：字符间距，normal（默认）、length（具体数值）、inherit（继承）

5、边框属性

边框风格 border-style

1）统一风格：border-style
2）单独风格：

  • border-bottom-style：下边边框样式
  • border-top-style：上边边框样式
  • border-left-style：左边边框样式
  • border-right-style：右边边框样式

3）边框风格样式的属性值

  • none：无边框
  • solid：直线边框
  • dashed：虚线边框
  • dotted：点状边框
  • double：双线边框
  • groove：凸槽边框（依托border-color的属性值）
  • ridge：垄状边框（依托border-color的属性值）
  • inset：inset边框（依托border-color的属性值）
  • outset：outset边框（依托border-color的属性值）
  • inherit：继承

边框宽度 border-width

1）统一风格：border-width：
2）单独风格：

  • border-top-width：上边边框宽度
  • border-bottom-width：下边边框宽度
  • border-left-width：左边边框宽度
  • border-right-width：右边边框宽度

3）边框宽度的属性值：

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

边框颜色 border-color

1）统一风格：border-color
2）单独风格

  • border-top-color：上边边框颜色
  • border-bottom-color：下边边框颜色
  • border-left-color：左边边框颜色
  • border-right-color：右边边框颜色

3）属性值

  • 颜色值的名称：red、green
  • RGB：rgb(255,255,0)
  • RGBA：rgba(255,255,0,0.1)
  • 十六位进制：#ff0、#ff0000
  • 继承inherit

4）属性值的四种情况

  • 一个值：border-color：（上、下、左、右）；
  • 两个值：border-color：（上下） （左右）；
  • 三个值：border-color:（上） （左、右） （下）;
  • 四个值：border-color：（上）（右）（下）（左）;

简写方式

1
border：solid 2px #f60

6、列表属性

标记的类型

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, 等。（日文片假名）

标记的位置

list-style-position，值：

  • inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
  • outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
  • inherit：规定应该从父元素继承 list-style-position 属性的值。

设置图像列表标记

list-style-image，URL图像的路径，值：

  • none：默认。无图形被显示。
  • inherit：规定应该从父元素继承 list-style-image 属性的值。

简写方式

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