易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS样式文件优化 更整洁而清晰


CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。CSS简写的最大好处就是能够显着减少
CSS文件的大小,其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一
个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。
  今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所
见即所得软件来编写CSS,使得代码过于臃肿。不过没关系,看过本文之后,你一能能掌握CSS代码优化的技
巧,今后让你的每一个CSS样式表都看起来整洁而简短吧。
  属性值为0,不必添加单位
  书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:
  padding: 10px 5px 0px 0px;
  试试这样吧:
  padding: 10px 5px 0 0;
  移除选择器
  选择器是你在为一些元素应用CSS样式时的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等
等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。
  div#logowrap
  尝试扔掉多余的选择器吧:
  #logowrap
  在这个例子中所谓的那个选择器就是div
  *总爱和你开玩笑
  要明智的使用*而避免它在整个CSS样式表中乱开玩笑,*是个通配符,你可以使用它来为你的设计部分
或全部进行一系列CSS声明。例如:
  * {
   margin: 0;
  }
  这个声明会将所有元素的margin值设置为0,同样的,为了严谨起见,你可以尝试这样设置:
  #menu * {
   margin: 0;
  }
  这样的声明是指将#menu下的所有元素的margin设为0。
  背景
  背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数,你可
能会写成:
  background-image: url(”logo.png”);
  background-position: top center;
  background-repeat: no-repeat;
  其实可以写成:
  background: url(logo.png) no-repeat top center;
  颜色
  颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数,他的简写方式是如果颜色值由成
对儿出现的三对而数字组成,你可以省略掉没对中的一个数字。
  #000000 可以写成 #000, #336699 可以写成 #369
  这种简写技巧只适用于成对出现的颜色值,其它颜色值不适用这种技巧,比如:


相关文档:

CSS 命名规范

CSS 命名规范
XHTML-CSS写作建议
所有的xhtml代码小写
属性的值一定要用双引号("")括起来,且一定要有值
每个标签都要有开始和结束,且要有正确的层次
空元素要有结束的tag或于开始的tag后加上"/"
表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
<h1> ......

DIV + CSS 入门

一、什么是DIV+CSS?
“DIV + CSS” 是最新WEB标准的一个典型的应用。
一般来说,网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)等。 结构主要包括例如DIV在内的一系列的HTML(XHTML)标签,表现主要包括CSS(层叠样式表:Cascading Style Sheets), 行为主要包括例如对象模 ......

CSS 绝对定位学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charse ......

CSS公用文件

由于各浏览器的默认CSS样式不一样,我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制,这里面也包括header和footer,其它CSS文件就通过@import url(”common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Ari ......

CSS实现圆角的 25 种技巧分享

原文地址:http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Ad ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号