CSS基础知识之精简代码

当前位置 : 首页 > 网页制作 > CSS > CSS基础知识之精简代码

CSS基础知识之精简代码

来源: 作者: 时间:2016-01-25 10:01
精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护。使用简写属性及默认值复制代码 header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;} * 可以合
精简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;
有几个例外的简写属性省略了的部分并不会使用默认值,而是从已有的值复制(可以这么理解),
 
比如包括 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
 
复制代码
.content h1,
.content div,
.content p,
.content ul,
.content li {
  color: #666;
}
 
/* 这样更简单 */
.content {
  color: #666;
}
复制代码
注意,有些元素会带有默认样式,比如 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颜色值
 
如果每两位都相等,则可以简写
 
color: #ff3300;
 
/* 可以简化为,其代表的颜色是一样的 */
color: #f30;
 
 
 
 
使用具体数值的字体粗细
 
复制代码
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文件放在同一目录下,那路径就会变成这样
 
 
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.另外 2.1+, iOS 4.0+, Safari 5+ 均支持标准 border-radius 写法
 */
复制代码
 
Tag:
上一篇:html +CSS
下一篇:CSS定位 (div+css说起)
网友评论

<