菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
62
0

css中有哪些简写属性?

原创
05/13 14:22
阅读数 950

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;

发表评论

0/200
62 点赞
0 评论
收藏
为你推荐 换一批