css 简写技巧

Posted 2020-09-30

一些css  简写技巧

1.font 的简写  font 有可选选项和必选选项 如 font-style ， font -weight , font-variant ，可写可不写， 但如果写的话必须前置 放到 font-size 和 font-family 前面。 而必选的  font-family 　　必须放到最后面 

p{
 font-style:italic;
 font-weight:bold;
 font-variant:small-caps;
 font-size :12px;
 font-family:Arial;   
}
可以简写成 
p{
font:italic bold small-caps 12px Arial;
}

　2 background 的简写

.div{
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top right;
}
简写成
.div{
background: #000 url(images/bg.gif) no-repeat fixed top right;
}

　

3.border 

.div{
border-width: 1px;
border-style: solid;
border-color: #000;
}
简写成
.div{
border:1px solid #000
}

 4.list-style

li{
list-style-type:disc;
list-style-position:inside;
list-style-image:url(‘a.png‘);
}
简写成
li{
list-style:disc inside url(‘a.png);
}

 5.margin padding 

.div{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
简写成
.div{
margin:1px , 2px ,3px ,4px;//从top 开始的顺时针 
}
//margin：5px 10px; 上下5px 左右10px
//margin：1px 2px 3px ;上边距1px  左右2px 下边距3px
//padding 以此类推