css有哪些缩写属性?

CSS 规范定义缩写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。

缩写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用缩写属性,Web 开发人员可以编写更简洁、更具可读性的样式表,节省时间和精力。

css有哪些缩写属性?

1、background

background:在一个声明中设置所有的背景属性。

以下属性可采用任何顺序,且都是可选属性:

  • background-color

  • background-position

  • background-size

  • background-repeat

  • background-origin

    • content-box(默认)

    • border-box(设置width和height时包含内边距和边框)

  • background-clip

  • background-attachment

  • background-image

    (顺便说一句,background-size设置百分数时,第一个数相对于父元素的width,第二个相对于父元素的height,如果只设置一个,第二个为auto)

2、border

border:在一个声明中设置所有的边框属性。

可设置的边框属性:

  • border-width:指定边框宽度

  • border-style:指定边框样式

  • border-color:指定边框颜色

顺序任意,除了border-style必须设置外,其余值可以省略为默认值。只能设置全局边框,可以用border-top、border-left等简写属性来覆盖修改局部

3、border-bottom

border-bottom:在一个声明中设置所有的下边框属性。

可设置的下边框属性:

  • border-bottom-width:指定底部边框宽度

  • border-bottom-style:指定底部边框样式

  • border-bottom-color:指定底部边框颜色

4、border-left

border-left:在一个声明中设置所有的左边框属性。

可设置的左边框属性:

  • border-left-width 规定左边框的宽度。

  • border-left-style 规定左边框的样式。

  • border-left-color 规定左边框的颜色。

5、border-right

border-right:在一个声明中设置所有的右边框属性。

可设置的右边框属性:

  • border-right-width 规定右边框的宽度。

  • border-right-style 规定右边框的样式。

  • border-right-color 规定右边框的颜色。

6、border-top

border-top:在一个声明中设置所有的上边框属性。

可设置的上边框属性:

  • border-top-width 规定上边框的宽度。

  • border-top-style 规定上边框的样式。

  • border-top-color 规定上边框的颜色。

7、outline

outline:在一个声明中设置所有的轮廓属性。

可设置的轮廓属性:

  • outline-color 规定边框的颜色。

  • outline-style 规定边框的样式。

  • outline-width 规定边框的宽度。

8、font

font:在一个声明中设置所有字体属性。

字体属性主要包括下面几个

  • font-style(字体样式):normal(正常)、italic(斜体)、oblique(倾斜);

  • font-variant (字体变化): normal(正常)、small-caps(小体大写字母);

  • font-weight (字体粗细):normal(正常)、bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);

  • font-size(字体大小):可通过多种不同单位(比如像素或百分比等)来设置, 如:12px,12pt,120��1em;

  • font-family(字体类型):“Arial”、“Times New Roman”等;

如果用 font 属性的话,就可以把几个样式进行简化,减少书写的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):

font:font-style | font-variant | font-weight | font-size/line-height | font-family

9、margin

margin:在一个声明中设置所有外边距属性。该属性可以有1到4个值。

示例:

margin:10px 5px 15px 20px;

  • 上边距是 10px

  • 右边距是 5px

  • 下边距是 15px

  • 左边距是 20px

margin:10px 5px 15px;

  • 上边距是 10px

  • 右边距和左边距是 5px

  • 下边距是 15px

margin:10px 5px;

  • 上边距和下边距是 10px

  • 右边距和左边距是 5px

margin:10px;

  • 所有四个边距都是 10px

10、padding

padding:在一个声明中设置所有内边距属性。该属性可以有1到4个值。

示例:

padding:10px 5px 15px 20px;

  • 上填充是 10px

  • 右填充是 5px

  • 下填充是 15px

  • 左填充是 20px

padding:10px 5px 15px;

  • 上填充是 10px

  • 右填充和左填充是 5px

  • 下填充是 15px

padding:10px 5px;

  • 上填充和下填充是 10px

  • 右填充和左填充是 5px

padding:10px;

  • 所有四个填充都是 10px

11、list-style

list-style:在一个声明中设置所有的列表属性。

可以设置的属性(按顺序):

  • list-style-type 设置列表项标记的类型。

  • list-style-position 设置在何处放置列表项标记。

  • list-style-image 使用图像来替换列表项的标记。

  • initial 将这个属性设置为默认值。

注:可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

更多web开发知识,请查阅 HTML中文网 !!

以上就是css有哪些缩写属性?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读