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

本文介绍了CSS中的简写属性,如border、margin、padding、background、font和border-radius,通过使用这些简写属性,可以有效减少代码冗余,提高代码的可读性和项目效率。例如,border属性的简写形式可以将宽度、颜色和样式合并为一个声明,margin和padding的简写可以同时设置四个方向的值,background属性则能组合颜色、图片、重复和位置等。这些简写方式有助于编写更简洁、更具可读性的CSS样式表。

css代码冗余多了,项目代码看起来就像一个“粽子”,看着不舒服。css为我们提供了几个简写属性,利用好他们,可以提高代码可读性,减少代码体积,有着不小的好处。

e8cee8dd5b0c8ccde9264625fdaaad35.png

css中有哪些简写属性?

● border属性

● margin、padding属性

● background属性

● font属性

● border-radius属性

定义

简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性,可以编写更简洁、更具可读性的样式表,节省时间和精力。(推荐学习:CSS视频教程)

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

1、Border属性

对于 border 来说,宽度、颜色和类型是可以被简写到一个声明里的。比如:border-width: 1px;

border-style: solid;

border-color: #fff;

可以简写成:border: 1px solid #000;

2、Margin和Padding属性

margin 和 padding 值的简写版本类似。請看下面的 CSS 声明:margin-top: 10px;

margin-right: 5px;

margin-bottom: 10px;

margin-left: 5px;

padding-top: 10px;

padding-right: 5px;

padding-bottom: 10px;

padding-left: 5px;

和下面的声明是一样的(注意,值是从 top 顺时针开始的:top、right、bottom、接着是 left)margin: 10px 5px 10px 5px;

padding: 10px 5px 10px 5px;

3、Background属性background-color: #000;

background-image: url(images/bg.gif);

background-repeat: no-repeat;

background-position: top right;

可以简写成一行声明:background: #000 url(images/bg.gif) no-repeat top right;

4、Font属性font-style: italic;

font-weight: bold;

font-size: .8em;

line-height: 1.2;

font-family: Arial, sans-serif;

可以简写成下面的:font: italic bold .8em/1.2 Arial, sans-serif;

5、border-radius属性border-top-left-radius: 1em 5em;

border-top-right-radius: 1em 5em;

border-bottom-right-radius: 1em 5em;

border-bottom-left-radius: 1em 5em;

可以简写成下面的:border-radius: 1em/5em;

更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值