不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!
第13章 CSS代码缩写
13-1 盒子型代码简写
1.如果top、right、bottom、left的值相同,如下代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
2.如果top和bottom值相同、left和right的值相同,如下代码:
margin:10px 20px 10px 20px;
可缩写为:
margin:10px 20px;
3.如果left和right的值相同,如下面代码:
margin:10px 20px 30px 20px;
可以缩写为:
margin:10px 20px 30px;
13-2 颜色值缩写
例1:
p{color:#000000;}
可以缩写为:
p{color:#000;}
例2:
p{color:#336699;}
可以缩写为:
p{color:#369;}
13-3 字体缩写
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"黑体",sans-serif;
}
以上代码可以缩写为:
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意:
1.使用这一简写方式至少需要指定 font-size 和 font-family 属性,其他属性如果不写,则自动使用默认值。
2.缩写时,font-size 与line-height 中间要加入"/"。
网友评论