一 、背景相关-属性（6）

• 背景颜色（ background-color ） ，设置背景颜色。
• 背景图像（ background-image ） ，设置网页背景图像。
• 重复（ background-repeat ） ，控制背景图像的平铺方式，有不重复（ no-repeat ）、重复（ repeat ，沿水平、垂直方向平铺）、横向重复（ repeat-X ，图像沿水平方向平铺）和纵向重复（ repeat-Y ，沿图像垂直方向平铺）等 4 种选择。
• 附加（ background-attachment ） ，用于控制背景图像是否会随页面的滚动而一起滚动。
  
  有固定（ fixd ，文字滚动时，背景图像保质固定）和滚动（ scroll ，背景图像随文字内容一起滚动）两种选择。
• 水平位置 / 垂直位置（ background-position ） ，确定背景图像的水平、垂直位置 。
  
  共有左对齐（ left ）、右对齐（ right ）、顶部（ top ）、底部（ bottom ）、居中（ center ）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等 6 种选择。

简写方法 background:#000 url(…) repeat fixed left top;

二 、字体相关-属性（8）

• 字体（ font-family ） ，设定时，需考虑浏览器中有无该字体。
• 大小（ font-size ）， 注意度量单位。
• 粗细（ font-weight ） ，除了 normal （正常）、 bold （粗体）、 bolder （特粗）、 lighter （细体）外，还有 9 种以像素为度量为单位的设置方式。
• 样式（ font-style ） ，也就是字型。
• 行高（ line-height ） ，就是行距。注意，行距只能以是字体大小值为
• 变形（ font-variant ） ，可以将正常文字一半尺寸后大写显示，但 IE 目前不支持这项属性。
• 大小写（ text-transform ） ，这项属性能轻而易举地控制字母大小写，有首字大写（ capitalize 、大写（ uppercase ）、小写（ lowercase ）和无（ none ，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等 4 种。
• 修饰（ text-decoration ） ，用于控制链接文本的显示形态，有下划线（ underline ）、无下划线（ overline ）、删除线（ line-through ）、闪烁（ blink ）和无（ none ，使上述效果均不会发生）等 5 种修饰方式。但 IE4 不支持文字闪烁。

三 、区块相关-属性（6）

• 单词间距（ word-spacing ）
  
  主要用于控制文字间相隔的距离。有正常（ normal ）和值（自定义间隔值）两种选择方式。
  
  当选择值时，可用的单位有英吋（ in ）、厘米（ cm ）、毫米（ mm ）、点数 (pt ）、 12pt 字 (pc ）、字体高（ em ）、字体 x 有高（ ex ）像素（ px ）。

• 加粗样式字母间距（ letter-spacing ）
  
  其作用与字符间距类似，也有正常（ normal ）和值（自定义间隔值）两种选择方式。

• 垂直对齐（ vertical-align ）
  
  控制文字或图像相对于其母体元素的垂直位置。如将一个 2×3 像素的 GIF 图像同其母体元素文字的顶部垂直对齐，则该 GIF 图像将在该行文字的顶部显示。
  
  共有基线（ baseline ，将元素的基准线同母体元素的基准线对 齐）、
  
  下标（ sub ，将元素以下标的形式显示） ,
  
  上标（ super ，将元素以上标的形式显示）、
  
  顶部（ top ，将元素顶部同最高的母体元素对齐）、
  
  文本顶对齐（ text-top ，将元素的顶部同母体元素文字的顶部对齐）、
  
  中线对齐（ middle ，将元素的中点同 母体元素的中点对齐）、
  
  底部（ bottom ，将元素的底部同最低的母体元素对齐）及值（自定义）等 9 种选择。

• 文本对齐」（ text-align ）
  
  设置块的水平对齐方式。
  
  共有左对齐（ left ）、右对齐（ right ）、居中（ center ）和均分（ justify ）等 4 种选择。

• 文字缩进」（ text-indent ）
  
  控制块的缩进程度。

• 空白间距（ white-space ）
  
  在 HTML 中，空格是被省略的；在 CSS 中则使用属性（ white-space ）控制空格的输入。
  
  共有正常（ normal ）、保留（ pre ）和不换行（ nowrap ）等 3 种选择。

四 、边框相关-属性（3）

• 宽（ border-width ） ，
  
  控制边框的宽度，其中分为 4 个属性： border-top-width 顶边框的宽度、 border-right-width 右边框的宽度、 border-bottom-width 底边框的宽度、 border-left-width 左边框的宽度。
• 颜色（ border-color ）
  
  设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如，

p{: #ff0000 #009900 #0000ff #55cc00}

浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。

• 样式（ border-style ）
  
  设定边框的样式，共有无（ none ）、虚线（ dotted ）、点划线线（ dotted ）、点划线（ dashed ）、实线（ solid ）、双线（ double ）、槽状（ grove ）、脊状（ ridge ）、凹陷（ inset ）和凸起（ outset ）等 9 种。

五、盒子相关-属性（6）

• 宽（ width ） ，确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。
• 高（ height ） ，确定盒子本身的高度。
• 浮动（ float ） ，设置块元素的浮动效果。
• 清除（ clear ） ，用于清除设置的浮动效果。
• 边距（ margin ） ，控制围绕边框的边距大小。
  
  其中包含 4 个属性： margin-top 控制上边距的宽度、 margin-right 控制右边距的宽度、 margin-bottom 控制下边距的宽度、 margin-left 控制左边距的宽度。
• 边界（ padding ） ，确定围绕块元素的空格填充数量，其中包含 4 个属性「 padding-top 控制上留白的宽度、 padding-right 控制右留白的宽度、 padding-bottom 控制下留白宽度、 padding-left 控制左留白的宽度。

六、列表相关-属性（3）

• 类型（ list-style-type ），确定列表每一项前使用的符号，
  
  共有圆点（ disc ）、圆圈 （ circle ）、方形（ square ）、数字（ decimal ）、小写罗马数字（ lower-roman ）、大写罗马数字（ upper-roman ）、小写字母（ lower-alpha ）和大写字母（ upper － alpha ）等 8 种。
• 项目图像（ list-style-image ）
  
  其作用是将列表前面的符号换为图形。
• 位置（ list-style-position ）
  
  用于描述列表位置，有内（ outside ）和外（ inside ）两种选择。

七、定位相关-属性（6）

• position有五个属性值

1.static：静态定位，没有特殊的定位规则，遵循正常的文档流对象

2.relative：相对定位，相对于元素自身进行定位

3.absolute:绝对定位，相对于最近的有定位的父元素进行定位

4.fixed：固定定位，相对于浏览器页面进行定位

5.sticky ：粘性定位，基于用户的滚动位置来定位

当然取值也可以为全局属性

6.inherit：继承父级的定位方式

7.unset：当前属性可继承则继承

8.initial：保持最初的定位

• Z 轴（ z-index ） ，
  
  用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为 0 时，元素在最下层，适用于绝对定位或相对定位的元素。

• 显示（ visibility ）
  
  使用该属性可将网页中的元素隐藏，共有继承（ inherit ，继承母体要素的可视性设置）、可见（ visible ）和隐藏（ hidden ）等 3 种选择。

• 溢出（ overflow ）
  
  在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一 日和尚撞一天钟起作用了。其中共有可见（ visible ，扩大面积以显示所有内容）、隐藏（ hidden ，隐藏超出范围的内容）、滚动（ scroll ，在 元素的右边显示一个滚动条）和自动（ auto ，当内容超出元素面积时，显示滚动条）等 4 种选择。

• 定位
  
  当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含 4 个子属性，分别是 「左」（属性名为「 left 」，控制元素左边的起始位置）、「上」（属性名为「 top 」，控制元素上面的起始位置）、 「宽」或「高」（与「盒子」类属性面板中「宽」或「高」的属性作用相同）。

• 剪辑（ clip ）
  
  当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为 rect(top right bottom left) ，即：
  
  rect(top right bottom left) ，属性值的单位为任何一种长度单位。

八、display相关-属性（4）

block块元素（div）

• 独占一行，设置了宽度后，后面剩余的宽度还是会占一行，只是不显示
• 在文档流中，块元素会独占一行，自上向下排列
• 在文档流中，默认宽度是父标签的100%，默认高度被内容撑开
• 支持所有css命令
• 属性display可以改变标签的标签的属性

inline内联元素（span）

• 不独占一行，后面可以继续跟同类型标签
• 在文档流中，内联元素只占自身大小，从左向右排列，如果一行中不不足以容纳，则会换到下一行，依旧自左向右排列
• 在文档流中，默认宽度被内容撑开，默认高度被内容撑开，不可设置宽高
• 支持左右的margin，不支持上下的margin
• 支持上下左右padding，垂直方向不会影响页面布局
• 可以设置边框，垂直方向不会影响页面布局
• 代码换行被解析
• 属性display可以改变标签的标签的属性

inline-block行内块元素

• 不独占一行
• 支持宽高
• 换行被解析了
• 不设置宽度的时候宽度由内容撑开
• 在IE6,IE7下不支持block标签
• 属性display可以改变标签的标签的属性

none

• 隐藏标签
• 不再占有位置
• visibility: hidden虽然会隐藏元素，但是位置会保留

display:inline-block，block，inline元素的区别:

display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

display :

inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align:

top;来使元素顶部对齐。

九、拓展-属性（3）

• 分页 ，其中两个属性的作用是为打印的页面设置分页符。
• 之前（ page-break-before ）；
• 之后（ page-break-after ）。
• 视觉效果 ，其中两个属性的作用是为网页中的元素施加特殊效果。 「
• 光标（ cusor ），可以指定在某个元素上要使用的光标形状，共有 15 种选择方式，分别代表鼠标在 Windows 操作系统中的各种形状。另外它还可以 指定指针图标的 URL 地址；
• 滤镜（ fiter ），可以为网页中元素施加各种奇妙的滤镜效果，共包含有 16 种滤镜。

十、 css属性代码大全

10.1 CSS文字属性：

color : #999999; /

文字颜色

/

font-family : 宋体,sans-serif; /

文字字体

/

font-size : 9pt; /

文字大小

/

font-style:itelic; /

文字斜体

/

font-variant:small-caps; /

小字体

/

letter-spacing : 1pt; /

字间距离

/

line-height : 200%; /

设置行高

/

font-weight:bold; /

文字粗体

/

vertical-align:sub; /

下标字

/

vertical-align:super; /

上标字

/

text-decoration:line-through; /

加删除线

/

text-decoration: overline; /

加顶线

/

text-decoration:underline; /

加下划线

/

text-decoration:none; /

删除链接下划线

/

text-transform : capitalize; /

首字大写

/

text-transform : uppercase; /

英文大写

/

text-transform : lowercase; /

英文小写

/

text-align:right; /

文字右对齐

/

text-align:left; /

文字左对齐

/

text-align:center; /

文字居中对齐

/

text-align:justify; /

文字分散对齐

/

vertical-align属性

vertical-align:top; /

垂直向上对齐

/

vertical-align:bottom; /

垂直向下对齐

/

vertical-align:middle; /

垂直居中对齐

/

vertical-align:text-top; /

文字垂直向上对齐

/

vertical-align:text-bottom; /

文字垂直向下对齐

/

10.2、CSS边框空白

padding-top:10px; /

上边框留空白

/

padding-right:10px; /

右边框留空白

/

padding-bottom:10px; /

下边框留空白

/

padding-left:10px; /*左边框留空白

10.3、CSS符号属性：

list-style-type:none; /

不编号

/

list-style-type:decimal; /

阿拉伯数字

/

list-style-type:lower-roman; /

小写罗马数字

/

list-style-type:upper-roman; /

大写罗马数字

/

list-style-type:lower-alpha; /

小写英文字母

/

list-style-type:upper-alpha; /

大写英文字母

/

list-style-type:disc; /

实心圆形符号

/

list-style-type:circle; /

空心圆形符号

/

list-style-type:square; /

实心方形符号

/

list-style-image:url(/dot.gif); /

图片式符号

/

list-style-position: outside; /

凸排

/

list-style-position:inside; /

缩进

/

10.4、CSS背景样式：

background-color:#F5E2EC; /

背景颜色

/

background:transparent; /

透视背景

/

background-image : url(/image/bg.gif); /

背景图片

/

background-attachment : fixed; /

浮水印固定背景

/

background-repeat : repeat; /

重复排列-网页默认

/

background-repeat : no-repeat; /

不重复排列

/

background-repeat : repeat-x; /

在x轴重复排列

/

background-repeat : repeat-y; /

在y轴重复排列

/


指定背景位置


background-position : 90% 90%; /

背景图片x与y轴的位置

/

background-position : top; /

向上对齐

/

background-position : buttom; /

向下对齐

/

background-position : left; /

向左对齐

/

background-position : right; /

向右对齐

/

background-position : center; /

居中对齐

/

10.5、CSS连接属性：

a /

所有超链接

/

a:link /

超链接文字格式

/

a:visited /

浏览过的链接文字格式

/

a:active /

按下链接的格式

/

a:hover /

鼠标转到链接

/


鼠标光标样式：


链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}

10.6、CSS框线一览表：

border-top : 1px solid #6699cc; /

上框线

/

border-bottom : 1px solid #6699cc; /

下框线

/

border-left : 1px solid #6699cc; /

左框线

/

border-right : 1px solid #6699cc; /

右框线

/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /

设置上框线top颜色

/

border-top-width :1px /

设置上框线top宽度

/

border-top-style : solid/

设置上框线top样式

/


其他框线样式


solid /

实线框

/

dotted /

虚线框

/

double /

双线框

/

groove /

立体内凸框

/

ridge /

立体浮雕框

/

inset /

凹框

/

outset /

凸框

/

10.7、CSS边界样式：

margin-top:10px; /

上边界

/

margin-right:10px; /

右边界值

/

margin-bottom:10px; /

下边界值

/

margin-left:10px; /

左边界值

/

10.8 、CSS 属性： 字体样式(Font Style)

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:“字体1”,“字体2”,“字体3”,…}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色 {color:数值;}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal;}

9 字 间 距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字体变形 {font-size-adjust:inherit|none}

14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

10.9、文本样式(Text Style)

1 行 间 距 {line-height:数值|inherit|normal;}

2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:数值|inherit}

4 水平对齐 {text-align:left|right|center|justify}

5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 书写方式 {writing-mode:lr-tb|tb-rl}

10.10、框架样式(Box Style)

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 补　　白 {padding:padding-top padding-right padding-bottom padding-left}

3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

宽度值： thin|medium|thick|数值

4 边框颜色 {border-color:数值 数值 数值 数值}　　数值：分别代表top、right、bottom、left颜色值

5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 边　　框 {border:border-width border-style color}

上 边 框 {border-top:border-top-width border-style color}

右 边 框 {border-right:border-right-width border-style color}

下 边 框 {border-bottom:border-bottom-width border-style color}

左 边 框 {border-left:border-left-width border-style color}

7 宽　　度 {width:长度|百分比| auto}

8 高　　度 {height:数值|auto}

9 漂　　浮 {float:left|right|none}

10 清　　除 {clear:none|left|right|both}

10.11、分类列表

1 控制显示 {display:none|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 图形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目录列表 {list-style:目录样式类型|目录样式位置|url}

7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}