CSS框架思维雏形与CSS文件精简

假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性比较多)当你所有工作已经做完时,你的上头告诉你,要把所有网站里的内容的样式缩写!而且要统一~样式里面所有的重复的没用的,都删,就象给所有样式脱了一层外套,让它越简单越好!　　这时你不用烦脑,很简单!来看看我是如何做的:
　　先观查你网站里经常用到的样式,重复性比较多的,把它写在共用的样式里!这个样式表里放的都是共有的,在任何html页面里只要能用到这个共用样式表里的样式,都可以把它链过去!
　　例如:
　　这是一些常用的属性在共用里写好,在子样式里就不用再去定义了。
　　Example Source Code
　　.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

绿茶给
.cls{
clear:both;clear:both;font-size:0;height:1px;overflow:hidden;margin:0px;border:0px; background-color:transparent; line-height:0px;zoom:1;
}
apatana


　　这个样式很重要，是我在网上看到的。加上这个样式，就不用给div定义高了。其作用主要是为了清除浮动。
　　未清除浮动，FF没能获取容器的高度，所以边框和背景会出错。外边距也跟着出错。可能布局也会受到强烈的干扰。主要是由于对浮动的理由不同所造成的。只要合理的嵌套与清除浮动，即可避免此问题。
　　Example Source Code
　　p{ margin:0px;padding:0px;margin-top:5px;}
　　form,h1,h2,h3,h4,h5,h6,h7 { margin:0px; padding:0px;}
　　ul,li{list-style:none;margin:0px;padding:0px;}
　　下面这个是浮动样式,在div+css里这个样式很常用：
　　Example Source Code
　　.fleft {float:left;}
　　.fright {float:right;}
　　.cleft{clear:left}
　　.cright{clear:right}
　　.cboth{clear:both}
　　下面这个是字体样式：
　　Example Source Code
　　.font_bold{ font-weight:bold;}
　　.font_14{font-size:14px;}
　　.font_red{ color:#FF3131;}
　　.font_blue{ color:#0000CC}
　　.font_gray{ color:#999;}
　　.font_10{ font-size:10px;}
这个是文字链接样式：

　　Example Source Code
　　a{color:#3a76ce;text-decoration:none;}
　　(这个是网站里,默认的凡是代链接的都是这个颜色)
　　a:hover{text-decoration:underline;}
　　(这个是网站里凡是代链接的样式表现形式,鼠标移上去出下划线)
　　下面这几个是自己随意定义的,网站里用的比较多的.如果有特殊的你可以在子样式里定义。
　　Example Source Code
　　a.red{color:#FF3131;}
　　a.gray{color:#656565;}
　　a.blue{color:#2C7FFF;}
　　a.xhx{ text-decoration:underline}
　　(这个是代下划线的,如果你的这个链接样式,在鼠标没有移上去时就有下划线时,就加上这个。
　　因为class="(这个里可以用多个样式)"
　　例如:<a class="red xhx" herf="#">您好</a>
　　这个样式就是红色的代下划线的.如果不加xhx那就是红色的不代下划线样式,只有鼠标移上去之后才会出下划线!
　　分开写,这样可以套用多个文字样式,这样重复性少很多!
　　下面这个是图片链接样式：
　　Example Source Code
　　img{vertical-align:middle; border:none;}
　　(写上这个图片会默认的在文字中间,要不然图片和文字会对不齐)
　　a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}
　　a.img45 img,img.img45 { border:1px solid #ccc; padding:1px;width:45px; height:45px;}
　　a.img60 img,img.img60 { border:1px solid #ccc; padding:1px;width:60px; height:60px;}
　　a.img90 img,img.img90 { border:1px solid #ccc; padding:1px;width:90px; height:90px;}
　　a.img150 img,img.img150 { border:1px solid #ccc; padding:1px;width:150px; height:150px;}
　　a.img260 img,img.img260 { border:1px solid #ccc; padding:1px;width:260px; height:260px;}
　　a.img300 img,img.img300 { border:1px solid #ccc; padding:1px;width:300px; height:300px;}
　　a:hover img.img20,a:hover img.img45,a:hover img.img60,a:hover img.img90,a:hover img.img150,a:hover img.img260,a:hover img.img300{border:1px solid #357CCA;padding:1px;}
　　a:hover{color:357CCA;padding:0px;}
　　比如你的图片大小比较多,你可以象我这样写,把图片大小的样式写义出来,然后在用到的时候直接用就可以
　　我定义这个是:图片代边框,而且边框里面与图片之间有一象索的距离.当鼠标移上去边框变颜色
　　Example Source Code
　　a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}
　　例如:这个,为什么后面有个(img.img20) ,这个是不代链接的,在图片后加上这个样式,图片上就会有边框而且不代链接a.img20 img,这个是给图片代链接用的<a class="img20">图片</a>这样图片就会代链接。
　　还有就是你网站里经常用到的框架比较多的把它写出来,写好后下边要做的工作就是把你写的这些样式，另做一个html页面,把你这些样式都在html页面里做出来,分好栏目!
　　例如:文字样式  文字链接样式  图片样式  框架样式  常用样式
　　都做好后,当你浏览时,页面显示的效果就是你写的样式的效果.这些工作做完后你就可以给你的网站进行修理了!
　　当你需要用到共有里的样式时,你就打开那个html页面,找相对应的那个样式!直接拿过去套用就可以了,不用再去css里找了!