常用CSS样式属性———量大管饱

常用CSS样式属性

（本文由上课课件整理排版而出）

       边框样式属性

• border-width属性

  • 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度， 该属性有多个值：

值 描述 thin 定义细的边框。 medium 默认。定义中等的边框。 thick 定义粗的边框。 length 允许您自定义边框的宽度。 inherit 规定应该从父元素继承边框宽度。

• 注意：如果不设置“border-style” 属性或者将其设置为none或hidden属性值，则“border-width” 属性不会起作用；边框样式是 none，边框宽度实际上会重置为 0；不允许指定负长度值；任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit”属性值。

• border-style属性

  • 用于设置元素所有边框的样式，或者单独地为各边设置边框样式，该属性有多个值：

值 描述 none 定义无边框。默认值 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。

• 注意：只有当这个值不是 none或者hidden 时边框才可能出现；Internet Explorer （包括 IE8）浏览器都不支持"inherit" 或 "hidden"属性值。

• border-color属性

  • 用于设置一个元素的所有边框颜色，或者为4个边框分别设置不同的颜色， 该属性有多个值：

值 描述 color_name 规定颜色值为颜色名称的边框颜色（比如 red）。 hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 transparent 默认值。边框颜色为透明。 inherit 规定应该从父元素继承边框颜色

• 注意：Internet Explorer 6（以及更早的版本）不支持"transparent"属性值；IE7 以及更早版本的浏览器不支持 "inherit"属性值，IE8 需要 !DOCTYPE才会支持"inherit"属性值，IE9 支持 "inherit""inherit"属性值；边框的样式不能为 none 或 hidden，否则边框不会出现；把 border-style 属性声明到 border-color 属性之前，元素必须在改变其颜色之前获得边框。

• 边框简写属性

  • 从上、右、下、左四个边框的角度，分别设置该边框的宽度、样式和颜色属性：

属性 描述 border-top 简写属性，用于将上边框的所有属性设置到一个声明中 border-right 简写属性，用于将右边框的所有属性设置到一个声明中 border-bottom 简写属性，用于将下边框的所有属性设置到一个声明中 border-left 简写属性，用于将左边框的所有属性设置到一个声明中 border 简写属性，用于将四个边框的所有属性设置到一个声明中

• 注意：

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，否则看不到效果，该属性有多个值：

值 描述 color_name 规定颜色值为颜色名称的轮廓颜色（比如 red）。 hex_number 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。 invert 默认值。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 inherit 规定应该从父标签继承轮廓颜色的设置。

注意：只有规定了 !DOCTYPE，IE8才支持 outline-color样式 属性。

  

outline-style样式属性：设置轮廓线的样式，该属性有多个值：

none 默认值。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父标签继承轮廓样式的设置。

注意：只有规定了 !DOCTYPE，IE8才支持 outline-style属性。

 

outline-width样式属性：

设置轮廓线的宽度，使用该样式属性时必须设定outline-style样式属性的属性值不能 none，否则看不到效果（如果outline-style为 none，宽度实际上会重置为 0），轮廓线的宽度不能为负数，该属性有多个值：

值 描述 thin 规定细轮廓。 medium 默认值。规定中等的轮廓。 thick 规定粗的轮廓。 length 允许您规定轮廓粗细的值。 inherit 规定应该从父标签继承轮廓宽度的设置。

 注意：只有规定了 !DOCTYPE，IE8才支持 outline-width属性

outline样式属性：用于在一个声明中设置所有的所有的轮廓线样式属性（即outline-color、outline-style和outline-width），且该样式属性设置属性值时不需要设置所有轮廓线样式属性所对应的属性值，但需要按照outline-color、outline-style和outline-width顺序进行排列，中间用空格隔开。

注意：只有规定了 !DOCTYPE，IE8才支持 outline属性。

      

内容溢出样式属性

• overflow样式属性    标签内容超过了指定标签的高度就会出现内容溢出，
  • 当标签中的内容溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：

值 描述 visible 默认值。所溢出内容不会被修剪，会呈现在元素框之外。 hidden 所溢出内容会被修剪，并且该内容是不可见的。 scroll 所溢出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果所溢出内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。

• 注意：IE浏览器不支持"inherit"属性值 。

• overflow-x样式属性

• 当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：

值 描述 visible 不裁剪内容，可能会显示在内容框之外。 hidden 裁剪内容 - 不提供滚动机制。 scroll 裁剪内容 - 提供滚动机制。 auto 如果溢出框，则应该提供滚动机制。 no-display 如果内容不适合内容框，则删除整个框。 no-content 如果内容不适合内容框，则隐藏整个内容。

• 注意：IE8浏览器及其以前的IE浏览器不支持该样式属性；no-display和no-content两个属性值目前没有浏览器支持

• overflow-y样式属性

  当标签中的内容y方向溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：

值 描述 visible 不裁剪内容，可能会显示在内容框之外。 hidden 裁剪内容 - 不提供滚动机制。 scroll 裁剪内容 - 提供滚动机制。 auto 如果溢出框，则应该提供滚动机制。 no-display 如果内容不适合内容框，则删除整个框。 no-content 如果内容不适合内容框，则隐藏整个内容。

• 注意：IE8浏览器及其以前的IE浏览器不支持该样式属性 ；no-display和no-content两个属性值目前没有浏览器支持。

      

背景样式

background-color样式属性：设置标签背景颜色，该样式属性有多个属性值：

值 描述 color_name 颜色值为颜色名称的背景颜色（比如 red）。 hex_number 颜色值为十六进制值的背景颜色（比如 #ff0000）。 rgb_number 颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 transparent 默认值。背景颜色为透明。 inherit 规定应该从父标签继承 background-color 属性的设置

   注意：

1、该样式属性设置的背景颜色会填充标签的内容、内边距和边框区域，扩展到标签边框的外边界（但不包括外边距）；

2、 Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；

 

background-image样式属性：

设置标签背景图片，该样式属性有多个属性值：

值 描述 url('URL') 指向图像的路径。 none 默认值。不显示背景图像。 inherit 规定应该从父标签继承 background-image 属性的设置。

注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；

 

 background-repeat样式属性：

设置标签背景图片重复模式，该样式属性有多个属性值：

值 描述 repeat 默认值。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父标签继承 background-repeat 属性的设置。

注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；

 

background-attachment样式属性：

设置标签背景图片是否随着页面的其余部分的滚动而滚动，该样式属性有多个属性值：

值 描述 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父标签继承 background-attachment 属性的设置。

注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；

 

background-position样式属性：

设置标签背景图片位置，为了保证该样式属性在Firefox和Opera浏览器中正常工作，需要将background-attachment样式属性设置为 “fixed”， background-position样式属性有多个属性值：

值 描述 top left、top center、 top right、center left、 center center、center right、 bottom left、bottom center、 bottom right 如果仅规定了一个关键词，那么第二个值将是"center"。默认值为0% 0%。 x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。 xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

注意：Internet Explorer（包括 IE8）浏览器不支持属性值 "inherit"；

 

background-origin样式属性：

设置background-position样式属性设定的背景图片相对于什么位置来定位，此时background-attachment 样式属性的属性值不能为 "fixed"，否则background-origin样式属性没有效果，background-origin样式属性有多个值：

值 描述 padding-box 默认值。背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。

background-clip样式属性：

指定背景绘制区域，该属性有多个值：

值 描述 border-box 默认值。背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。

注意：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。

 

 background-size样式属性：

设置单张背景图片的尺寸，默认值为auto，该属性有多个值：

值 描述 length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父标签的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 cover 背景图片等比例缩放。把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意：背景图像的某些部分也许无法显示在背景定位区域中。 contain 背景图片等比例缩放。把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

注意：只有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样式属性：设定字体的风格，该属性有多个值：

值 描述 normal 默认值。显示标准的字体风格。 italic 显示斜体的字体风格。 oblique 显示倾斜的字体风格。 inherit 规定应该从父标签继承字体样式。

 注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

font-variant样式属性：

设定是否以小型大写字母（即将所有的小写字母转换为大写，但是所有使用小型大写字体的字母与其余文本相比其字体尺寸更小）的字体显示文本，该属性有多个值：

值 描述 normal 默认值。显示标准的字体。 small-caps 显示小型大写字母的字体。 inherit 规定应该从父标签继承 font-variant 属性的值。

注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

font-weight样式属性：

设置字体的粗细，该属性有多个值：

值 描述 normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100、200、300、400、 500、600、700、800、900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 inherit 规定应该从父标签继承字体的粗细

注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

font-size样式属性：

设置字体大小，该属性有多个值：

值 描述 xx-small、x-small、small、 medium、large、x-large、 xx-large 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。 smaller 把 font-size 设置为比父标签更小的尺寸。 larger 把 font-size 设置为比父标签更大的尺寸。 length 把 font-size 设置为一个固定的值。 % 把 font-size 设置为基于父标签的一个百分比值。 inherit 规定应该从父标签继承字体尺寸。

     注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

font-family样式属性：

设置字体系列，使用逗号分割每种字体，该属性有多个值：

值 描述 family-name generic-family 用于某个标签的字体族名称或/及类族名称的一个优先表。 默认值：取决于浏览器。 inherit 规定应该从父标签继承字体系列

注意：

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样式属性：设置字符间距，样式属性值可以为负值，但这时字符之间更加“拥挤”，该属性有多个值：

值 描述 normal 默认值。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父标签继承 letter-spacing 属性的值。

注意：

 1、Internet Explorer浏览器不支持属性值 "inherit"。

            

  line-height样式属性：

设置行间距（即行高），不能为负值，该属性有多个值：

值 描述 normal 默认值。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父标签继承 line-height 属性的值。

注意：

Internet Explorer浏览器不支持属性值 "inherit"。

放在padding后面讲解

 

text-align样式属性：

设置标签内文本的水平对齐方式，该属性有多个值：

值 描述 left 把文本排列到左边。默认值：如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父标签继承 text-align 属性的值。

注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

text-transform样式属性：

设置文本的大小写，该属性有多个值：（废止）

值 描述 none 默认值。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父标签继承 text-transform 属性的值

     注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

text-indent样式属性：

设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边，该属性有多个值：

 

值 描述 length 定义固定的缩进。默认值：0。 % 定义基于父标签宽度的百分比的缩进。 inherit 规定应该从父标签继承 text-indent 属性的值。

         注意：Internet Explorer浏览器不支持属性值 "inherit"。

text-decoration样式属性：

设定文本装饰（比如是否有下划线及划线显示的位置，但不包括对字体设置显示颜色，字体颜色的设置通过color样式属性设置），该属性有多个值：

值 描述 none 默认值。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。注意：IE、Chrome 或 Safari 不支持 “blink” 属性值 inherit 规定应该从父标签继承 text-decoration 属性的值。

         注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

 列表样式

 list-style-type样式属性：设置列表项标记的类型，该属性有多个值：

值 描述 none 无标记。 disc 标记是实心圆。无序列表默认值 circle、square、 分别标记为空心圆、实心方块 decimal 标记是数字。有序列表默认值 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等，直至到10及其以上的数字。)。注意：Internet Explorer 浏览器不支持该样式属性值 lower-roman、upper-roman 小写罗马数字(i, ii, iii, iv, v, 等。)、大写罗马数字(I, II, III, IV, V, 等。) lower-alpha、upper-alpha 小写英文字母(a, b, c, d, e, 等。)、大写英文字母(A, B, C, D, E, 等。) lower-greek 小写希腊字母(alpha, beta, gamma, 等。) 。注意：Internet Explorer 浏览器不支持该样式属性值 lower-latin 小写拉丁字母(a, b, c, d, e, 等。) 。注意：Internet Explorer 浏览器不支持该样式属性值 upper-latin 大写拉丁字母(A, B, C, D, E, 等。)。 注意：Internet Explorer 浏览器不支持该样式属性值 hebrew 传统的希伯来编号方式 armenian 传统的亚美尼亚编号方式。 注意：Internet Explorer 浏览器不支持该样式属性值 georgian 传统的乔治亚编号方式(an, ban, gan, 等。) 。 注意：Internet Explorer 浏览器不支持该样式属性值 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, 等。（日文片假名）

        注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

list-style-position样式属性：

设置列表项标记相对于列表项内容的位置，该属性有多个值：

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

 注意：Internet Explorer浏览器不支持属性值 "inherit"。

 

list-style-image样式属性：

将列表项标记设定为指定的图片，一般和一个 “list-style-type”样式属性一起使用，以防图片不可用，该属性有多个值：

URL 图像的路径。 none 默认值。无图形被显示。 inherit 规定应该从父标签继承 list-style-image 属性的值。

注意： 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伪列，如下：

属性 描述 :active 向被激活的标签添加样式。 :focus 向拥有键盘输入焦点的标签添加样式。 :hover 当鼠标悬浮在标签上方时，向标签添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子标签添加样式。 :lang 向带有指定 lang 属性的标签添加样式。

  注意：如果:link、:visited、:hover和:active一起使用，为了产生预期的效果，在 CSS 定义中，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后。

      

光标形状样式

cursor样式属性用于设定光标的显示形状，该属性有多个值：

值 描述 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认值。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右（东）移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 n-resize 此光标指示矩形框的边缘可被向上（北）移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 s-resize 此光标指示矩形框的边缘可被向下移动（南）。 w-resize 此光标指示矩形框的边缘可被向左移动（西）。 text 此光标指示文本。 wait 此光标指示程序正忙（通常是一只表或沙漏）。 help 此光标指示可用的帮助（通常是一个问号或一个气球）。

  注意：

  1、Opera 9.3 和 Safari 3 不支持 url 值。

  2、Internet Explorer浏览器不支持属性值 "inherit"。