常用CSS样式属性———量大管饱
常用CSS样式属性
（本文由上课课件整理排版而出）
边框样式属性
-
border-width属性
- 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度， 该属性有多个值：
|
|
|
- 注意：如果不设置“border-style” 属性或者将其设置为none或hidden属性值，则“border-width” 属性不会起作用；边框样式是 none，边框宽度实际上会重置为 0；不允许指定负长度值；任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit”属性值。
-
border-style属性
- 用于设置元素所有边框的样式，或者单独地为各边设置边框样式，该属性有多个值：
|
- 注意：只有当这个值不是 none或者hidden 时边框才可能出现；Internet Explorer （包括 IE8）浏览器都不支持"inherit" 或 "hidden"属性值。
-
border-color属性
- 用于设置一个元素的所有边框颜色，或者为4个边框分别设置不同的颜色， 该属性有多个值：
|
- 注意：Internet Explorer 6（以及更早的版本）不支持"transparent"属性值；IE7 以及更早版本的浏览器不支持 "inherit"属性值，IE8 需要 !DOCTYPE才会支持"inherit"属性值，IE9 支持 "inherit""inherit"属性值；边框的样式不能为 none 或 hidden，否则边框不会出现；把 border-style 属性声明到 border-color 属性之前，元素必须在改变其颜色之前获得边框。
-
边框简写属性
- 从上、右、下、左四个边框的角度，分别设置该边框的宽度、样式和颜色属性：
|
- 注意：
a、把边框的宽度、样式和颜色设置到一个声明中时，需要按照宽度、样式和颜色的顺序进行设置，允许不设置其中某个值（比如border:solid #ff0000; ）。
b、使用border设置边框属性时，border-width、border-style和border-color的值只能取一种，例如：{border:20px solid red;}是有效的，但是{border:20px 60px solid red;}、 {border:20px solid dotted red;}或{border:20px solid red green;}等等都是无效的。
c、IE7 以及更早版本的IE浏览器不支持值 “inherit”，IE8 需要 !DOCTYPE才能支持“inherit”属性值 ，IE9 支持 “inherit”属性值。
轮廓线样式属性
轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用。
outline-color样式属性：设置轮廓线的颜色，使用该样式属性时必须设定outline-style样式属性的属性值不能 none，否则看不到效果，该属性有多个值：
|
注意：只有规定了 !DOCTYPE，IE8才支持 outline-color样式 属性。
outline-style样式属性：设置轮廓线的样式，该属性有多个值：
|
注意：只有规定了 !DOCTYPE，IE8才支持 outline-style属性。
outline-width样式属性：
设置轮廓线的宽度，使用该样式属性时必须设定outline-style样式属性的属性值不能 none，否则看不到效果（如果outline-style为 none，宽度实际上会重置为 0），轮廓线的宽度不能为负数，该属性有多个值：
|
注意：只有规定了 !DOCTYPE，IE8才支持 outline-width属性
outline样式属性：用于在一个声明中设置所有的所有的轮廓线样式属性（即outline-color、outline-style和outline-width），且该样式属性设置属性值时不需要设置所有轮廓线样式属性所对应的属性值，但需要按照outline-color、outline-style和outline-width顺序进行排列，中间用空格隔开。
注意：只有规定了 !DOCTYPE，IE8才支持 outline属性。
内容溢出样式属性
- overflow样式属性 标签内容超过了指定标签的高度就会出现内容溢出，
- 当标签中的内容溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：
|
- 注意：IE浏览器不支持"inherit"属性值 。
-
overflow-x样式属性
-
当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：
|
- 注意：IE8浏览器及其以前的IE浏览器不支持该样式属性；no-display和no-content两个属性值目前没有浏览器支持
-
overflow-y样式属性
当标签中的内容y方向溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：
|
- 注意：IE8浏览器及其以前的IE浏览器不支持该样式属性 ；no-display和no-content两个属性值目前没有浏览器支持。
背景样式
background-color样式属性：设置标签背景颜色，该样式属性有多个属性值：
|
注意：
1、该样式属性设置的背景颜色会填充标签的内容、内边距和边框区域，扩展到标签边框的外边界（但不包括外边距）；
2、 Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；
background-image样式属性：
设置标签背景图片，该样式属性有多个属性值：
|
注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；
background-repeat样式属性：
设置标签背景图片重复模式，该样式属性有多个属性值：
|
注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；
background-attachment样式属性：
设置标签背景图片是否随着页面的其余部分的滚动而滚动，该样式属性有多个属性值：
|
注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；
background-position样式属性：
设置标签背景图片位置，为了保证该样式属性在Firefox和Opera浏览器中正常工作，需要将background-attachment样式属性设置为 “fixed”， background-position样式属性有多个属性值：
|
注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；
background-origin样式属性：
设置background-position样式属性设定的背景图片相对于什么位置来定位，此时background-attachment 样式属性的属性值不能为 "fixed"，否则background-origin样式属性没有效果，background-origin样式属性有多个值：
|
background-clip样式属性：
指定背景绘制区域，该属性有多个值：
|
注意：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。
background-size样式属性：
设置单张背景图片的尺寸，默认值为auto，该属性有多个值：
|
注意：只有IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
background样式属性：
用于在一个声明中设置所有的背景样式属性（即background-color、background-position、background-repeat、background-attachment和background-image），且该样式属性设置属性值时不需要设置所有背景样式属性所对应的属性值并且设置的属性值没有顺序要求，例如下面两行样式声明效果是一样的：“background:no-repeat fixed url(./bg.jpg) ;”和“background:url(./bg.jpg) no-repeat fixed ;”。
注意：
1、IE8以及更早的IE浏览器不支持一个标签多个背景图像。
2、该样式属性的属性值也可设置为inherit，即继承父标签background样式属性的设置，但是IE7以及更早的IE浏览器不支持"inherit"，IE8需要!DOCTYPE，IE9支持"inherit"。
3、设置背景时建议使用background样式属性，而不是分别使用单个样式属性，因为background样式属性在较老的浏览器中能够得到更好的支持并且需要键入的字母也更少
字体样式
font-style样式属性：设定字体的风格，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
font-variant样式属性：
设定是否以小型大写字母（即将所有的小写字母转换为大写，但是所有使用小型大写字体的字母与其余文本相比其字体尺寸更小）的字体显示文本，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
font-weight样式属性：
设置字体的粗细，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
font-size样式属性：
设置字体大小，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
font-family样式属性：
设置字体系列，使用逗号分割每种字体，该属性有多个值：
|
注意：
1、Internet Explorer浏览器不支持属性值 "inherit"。
2、如果浏览器不支持第一个字体则会尝试第二个字体；如果字体系列中的所有字体都不支持，则使用浏览器默认支持的字体
font样式属性：
用于在一个声明中设置所有的字体样式属性（即font-style、font-variant、font-weight、font-size/line-height和font-family），且该样式属性设置属性值时不需要设置所有字体样式属性所对应的属性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family顺序进行排列，中间用空格隔开。
注意：
1、font样式属性至少要指定字体大小和字体系列；
2、没有font-color样式属性，如果要设置字体的颜色需要使用color样式属性；
3、font样式属性的属性值也可设置为inherit，但Internet Explorer浏览器不支持属性值 "inherit"
文本样式
letter-spacing样式属性：设置字符间距，样式属性值可以为负值，但这时字符之间更加“拥挤”，该属性有多个值：
|
注意：
1、Internet Explorer浏览器不支持属性值 "inherit"。
line-height样式属性：
设置行间距（即行高），不能为负值，该属性有多个值：
|
注意：
Internet Explorer浏览器不支持属性值 "inherit"。
放在padding后面讲解
text-align样式属性：
设置标签内文本的水平对齐方式，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
text-transform样式属性：
设置文本的大小写，该属性有多个值：（废止）
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
text-indent样式属性：
设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
text-decoration样式属性：
设定文本装饰（比如是否有下划线及划线显示的位置，但不包括对字体设置显示颜色，字体颜色的设置通过color样式属性设置），该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
列表样式
list-style-type样式属性：设置列表项标记的类型，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
list-style-position样式属性：
设置列表项标记相对于列表项内容的位置，该属性有多个值：
|
注意：Internet Explorer浏览器不支持属性值 "inherit"。
list-style-image样式属性：
将列表项标记设定为指定的图片，一般和一个 “list-style-type”样式属性一起使用，以防图片不可用，该属性有多个值：
|
注意： Internet Explorer浏览器不支持属性值 "inherit"。
list-style样式属性：
用于在一个声明中设置所有的列表样式属性（即list-style-type、list-style-position和list-style-image），且该样式属性设置属性值时不需要设置所有列表样式属性所对应的属性值，未设置的列表样式属性会使用其默认值，但需要按照list-style-type、list-style-position和list-style-image顺序进行排列，中间用空格隔开。
注意：Internet Explorer浏览器不支持属性值 "inherit"。
超链接样式
CSS 伪类用于向某些选择器添加特殊的效果，伪类使用语法：
| 选择器:伪类 { declaration1; declaration2; … } |
CSS中有7个CSS伪列，如下：
|
注意：如果:link、:visited、:hover和:active一起使用，为了产生预期的效果，在 CSS 定义中，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后。
光标形状样式
cursor样式属性用于设定光标的显示形状，该属性有多个值：
|
注意：
1、Opera 9.3 和 Safari 3 不支持 url 值。
2、Internet Explorer浏览器不支持属性值 "inherit"。