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

常用CSS样式属性

(本文由上课课件整理排版而出)

 

 

       边框样式属性

  • border-width属性

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

描述

thin

定义细的边框。

medium

默认。定义中等的边框。

thick

定义粗的边框。

length

允许您自定义边框的宽度。

inherit

规定应该从父元素继承边框宽度。

 

常用CSS样式属性———量大管饱_第1张图片

  • 注意:如果不设置“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 lefttop center
  • top rightcenter left
  • center centercenter right
  • bottom leftbottom 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 ;”。

注意:

1IE8以及更早的IE浏览器不支持一个标签多个背景图像。

2、该样式属性的属性值也可设置为inherit,即继承父标签background样式属性的设置,但是IE7以及更早的IE浏览器不支持"inherit"IE8需要!DOCTYPEIE9支持"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

定义更细的字符。

  • 100200300400
  • 500600700800900

定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold

inherit

规定应该从父标签继承字体的粗细

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

 

font-size样式属性:

设置字体大小,该属性有多个值:

描述

  • xx-smallx-smallsmall
  • mediumlargex-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

定义闪烁的文本。注意:IEChrome Safari 不支持 “blink” 属性值

inherit

规定应该从父标签继承 text-decoration 属性的值。

 

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

 

 列表样式

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

描述

none

无标记。

disc

标记是实心圆。无序列表默认值

circlesquare

分别标记为空心圆、实心方块

decimal

标记是数字。有序列表默认值

decimal-leading-zero

0开头的数字标记。(01, 02, 03, 等,直至到10及其以上的数字。)。注意:Internet Explorer 浏览器不支持该样式属性值

lower-romanupper-roman

小写罗马数字(i, ii, iii, iv, v, 等。)、大写罗马数字(I, II, III, IV, V, 等。)

lower-alphaupper-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"。

你可能感兴趣的:(前端)