html可以简写的属性,css有哪些缩写属性?

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

412d607cdd6ba565b27df4fa6d937f35.png

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

css有哪些缩写属性?

1、background

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

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

background-position

background-size

background-repeat

background-origincontent-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

左边距是 20pxmargin:10px 5px 15px;上边距是 10px

右边距和左边距是 5px

下边距是 15pxmargin:10px 5px;上边距和下边距是 10px

右边距和左边距是 5pxmargin:10px;所有四个边距都是 10px

10、padding

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

示例:padding:10px 5px 15px 20px;上填充是 10px

右填充是 5px

下填充是 15px

左填充是 20pxpadding:10px 5px 15px;上填充是 10px

右填充和左填充是 5px

下填充是 15pxpadding:10px 5px;上填充和下填充是 10px

右填充和左填充是 5pxpadding:10px;所有四个填充都是 10px

11、list-style

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

可以设置的属性(按顺序):list-style-type设置列表项标记的类型。

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

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值