-
CSS基础知识之精简代码
网络 2014/4/25 9:41:17精简CSS代码可以帮助减小样式文件的大小，使代码清晰，方便维护。
使用简写属性及默认值
.header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }/* 可以合并为一个 margin */.header { margin: 10px 20px 30px 40px; /* 4个值分别为 top right bottom left */}/* ========== 我是分割线 ========== */.nav-list { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 14px; font-family: Georgia, Serif; line-height: 24px; }/* 可以合并为一个 font */.nav-list { font: italic small-caps bold 14px/24px Georgia, Serif; }常用简写属性包括 animation、background、border、font、margin、padding、transition...
使用简写的 font 属性时至少要指定 font-size 和 font-family 属性，并且 font-size 必须位于 font-family 之前，
其他的属性(如font-weight,font-style,font-variant)如未指定将自动使用默认值，并且必须位于 font-size 之前，
line-height 必须位于 font-size 和 font-family 之间，并且和 font-size 用 “/” 分隔
省略了部分简写属性值的时候，缺失的部分就会使用该属性的默认值，
div { font: 14px Serif; }/* 相当于 */div { font: normal normal normal 14px/normal Serif; /* 1 */}/** * 1.此处缺失的 font-style/font-variant/font-weight/line-height * 都会被解析为默认值 normal,该默认值甚至会覆盖继承的值 * 这和下面的分开申明是有区别的 * 下面代码的 font-style/font-variant/font-weight/line-height 并没有申明， * 则会继承自父元素，也就是 inherit */div { font-family: Serif; font-size: 14px; }可以指定不带颜色的边框实现变化效果
a { border: 1px solid; /* 边框颜色默认和字体颜色一样 */ color: red; }a:hover { color: green; /* 字体颜色变化了，边框颜色也会跟着变化 */}过渡效果可以精简到只需要指定一个持续时间就可以了
transition: 0.4s; /* transition-duration 不指定的话默认为 0s，那就没有效果了 *//* 相当于 */transition: all 0.4s ease 0s;
background-position 的默认值为 0% 0%，
background-position: 0% 0%; /* 可以省略 */
如果只省略其中一个，省略掉的那一个会变成 50%/center，
background-position: 0%;/* 相当于 */background-position: 0% 50%;
有几个例外的简写属性省略了的部分并不会使用默认值，而是从已有的值复制（可以这么理解），
比如包括 border-color, border-style, border-width, border-radius, margin, padding...
这些属性的特点是一个属性通常有4个值分别对应4个不同的方向，
border-width: 1px; /* => */ border-width: 1px 1px 1px 1px; /* 复制3次 */margin: 10px 20px; /* => */ margin: 10px 20px 10px 20px; /* 复制1次 */padding: 10px 20px 30px; /* => */ padding: 10px 20px 30px 20px; /* 复制中间那个放在最后 */
有这么一种情况，就是多余地用默认值去覆盖默认值，比如
div { display: block; /* 根本没有意义 */}一个 div 本来默认的就是 block，再重新定义一遍起不了任何作用
合理利用继承
通常情况下，指定了样式的元素的后代会自动继承某些样式属性，比如 color
{:; }{:; }注意，有些元素会带有浏览器默认样式，比如 h1 的 font-size，该默认样式会覆盖掉继承值
常用可继承属性包括 color, font, text-align, text-indent...
也可以强制指定一个不能继承的属性实现继承效果
div { padding: inherit; /* 它自己继承了，但是它的后代依然是不能继承的 */}群组选择器
h1 {color: blue;}h2 {color: blue;}h3 {color: blue;}h4 {color: blue;}h5 {color: blue;}h6 {color: blue;}/* 这样更简单 */h1, h2, h3, h4, h5, h6 {color: blue;}十六进制RGB颜色值
如果每两位都相等，则可以简写
:;:;
使用具体数值的字体粗细
h2 { font-weight: 700; }p { font-weight: 400; }/* 相当于 */h2 { font-weight: bold; }p { font-weight: normal; }数字 400 等价于 normal，而 700 等价于 bold。
简化背景图片路径
背景图片路径可能会是这样，
background-image: url("../../images/bg.gif");背景图片和CSS文件分这么开起什么作用呢？两者本来就是密切相关的，
所以应该把背景图片文件夹和CSS文件放在同一目录下，那路径就会变成这样
background-image: url("images/bg.gif");简单多了，甚至图片文件夹根本没必要命名为复数型式，双引号也可以去掉，
background-image: url(img/bg.gif);
再进一步，
background-image: url(i/bg.gif);
虽然文件夹的名字已经没有语义了，但是，通常在这个目录下常用的也就两个文件夹而已，
一个图片文件夹，一个字体文件夹，还有可能会有一个放置其它文件的文件夹，都可以这样简化。
去掉 0 值的单位
margin: 0px;/* 为0的值带不带单位都是0 */margin: 0;
Firefox暂时不支持去掉为0的时间值的单位，也就是说
transition: color 0.5s linear 0; /* 当前 Firefox(28.0) 会忽略这条属性 */
与其这样，不如干脆就不指定这类值，通常情况下默认的值就是 0秒
transition: color 0.5s linear; /* 完事 */
去掉浮点数两端的0
div { background-color: rgba(0,0,0,0.3); opacity: 0.9}对于不透明度，去掉小数点前面的0也可以很好的理解，因为它不会大于1
div { background-color: rgba(0,0,0,.3); opacity: .9; }不过对于其它可能大于1的浮点值来说，也许会让其他人以为你是忘记了小数点前面的数，
transition: all .5s;
去掉ID选择器前面的限定符
ID本来就是唯一的，在前面加上元素限定和祖先元素通常情况下都是没有意义的
.container div#box { }/* 精简后 */#box{ }下面的内容多多少少有点喜新厌旧的意思了
去掉老旧浏览器兼容代码
body { text-align: center; }.container { margin: 0 auto; text-align: left; width: 960px; }/* 上面的代码是为了实现怪异模式下的 IE 以及 IE5.x 的块元素居中效果 */.container { margin: 0 auto; width: 960px; }请始终使用标准模式，如今IE6/7/8 都要面临淘汰了。
去掉多余的浏览器前缀
还在你的CSS代码中写一大堆浏览器厂商前缀吗？那你就out了！
.header { -webkit-border-radius: 5px; -moz-border-radius: 5px; /* 1 */ -ms-border-radius: 5px; /* 2 */ -o-border-radius: 5px; /* 3 */ border-radius: 5px; }/** * 1.新版本的 Firefox 已经不再支持 -moz-border-radius 属性， * 同时，从 Firefox 4.0 就开始支持标准的 border-radius 写法了。 * 2.IE 9+ 支持标准的 border-radius 写法，IE 8 及更低版本什么写法都不支持。 * 3.Opera 10.50+ 支持标准的 border-radius 写法 * 换芯后的 Opera 同时还支持 -webkit-border-radius 写法 */.header { -webkit-border-radius: 5px; border-radius: 5px; }/* 更进一步 */.header { border-radius: 5px; /* 4 */}/** * 4.另外 Android 2.1+, iOS 4.0+, Safari 5+ 均支持标准 border-radius 写法 */还有，就是压缩代码了！关于代码压缩的内容，就不在这里说了！
阅读(789) 分享(0)
上一篇: IIS6使用冒号上传漏洞
下一篇: 分析一下CDN技术与安全
