CSS的属性与值

• 一 、背景相关-属性（6）
• 二 、字体相关-属性（8）
• 三 、区块相关-属性（6）
• 四 、边框相关-属性（3）
• 五、盒子相关-属性（6）
• 六、列表相关-属性（3）
• 七、定位相关-属性（6）
• 八、display相关-属性（4）
• block块元素（div）
• inline内联元素（span）
• inline-block行内块元素
• none
• display:inline-block，block，inline元素的区别:

• 10.1 CSS文字属性：
• 10.2、CSS边框空白
• 10.3、CSS符号属性：
• 10.4、CSS背景样式：
• 10.5、CSS连接属性：
• 10.6、CSS框线一览表：
• 10.7、CSS边界样式：
• 10.8 、CSS 属性： 字体样式(Font Style)
• 10.9、文本样式(Text Style)
• 10.10、框架样式(Box Style)
• 10.11、分类列表

一 、背景相关-属性（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}