请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 125|回复: 5

CSS代码缩写精简实例

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-27 22:58:34 | 显示全部楼层 |阅读模式

一些CSS属性允许使用一串值代替许多属性,值使用空格分开。

margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。

所以下面的代码:

p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}

可以写成:

p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起,例如:
p {
border: 1px red solid;
}

(同样可以运用到border-top,border-right等等)

如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。

字体属性同样可以使用font属性合并。

p {
font: italic bold 1em/1.5 courier;
}

(上面"/1.5"是 line-height的值)

把它们总结在一起,试下下面的代码:

p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}

推荐大家使用缩写形式,促进CSS代码的精简、优化!


回复

使用道具 举报

0

主题

944

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2016-3-12 15:26:23 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

1

主题

894

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2016-5-21 19:56:44 | 显示全部楼层
很不错的帖子,又学到了,力挺
回复 支持 反对

使用道具 举报

1

主题

1042

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2016-9-2 15:16:26 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

0

主题

843

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2018-9-14 11:00:35 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

0

主题

864

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2018-10-13 22:22:43 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-21 01:44 , Processed in 0.203308 second(s), 29 queries .

快速回复 返回顶部 返回列表