一些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 以此类推
时间: 2024-10-13 11:18:53