胡说css框架

在学习CSS框架之前，为了在页面得到想要的样式，总是要不厌其烦的去写css,尤其在写一些在样式中大部分都相同，只有微小差别的CSS时，就会显得代码过于拥挤，而且在修改的时候也会比较容易别混乱的结构所困扰。当然为了解决这些问题，同时提高代码编写速度和效率，那么CSS中比较实用的三个框架就是很好的选择。
1.首先是960grid框架。他完善了HTML+CSS在不同浏览器不兼容的问题，它是无论在哪个浏览器中，都让其网页占据正中的960px的位置。
    1)在使用960grid框架时要注意引入两个960grid的CSS文件：Reset.css和text.css,它们的主要作用是为了消除浏览器间显示差异准备的，前者消除了html标签在各浏览器间的差异，而后者则主要针对的是字体。
    2)定义一个div大容器，放下整个页面，在这个容器里会网页的结构来划分12块或者16块。如：div class="container_12"></div>——12块。
<div class="container_12">
    <div class="grid_12"></div>-------这一块使用了一个12列的grid
</div>
    均匀分开网页：
    <div class="container_12">
            <div class="grid_3 first">第一块</div>
           <div class="grid_6 second">第二块</div>
            <div class="grid_3 three">第三块</div>
    </div>
我们可以很明确的看到，两个之间有将缺，因为平分了12列，每两列之间都会有一个留白，就是所谓的margin，在默认的情况下，每一列的左右都会留出10px的白，那么相邻的两列之间的margin就是20px；上述的空缺问题可以通过alpha是去除左边的margin以及omega是去除右边的margin；同时去除则一起写上去。
那如果我不想在同一行完成呢
尝试一下——
  <div class="clear"></div>
     为了清除它对身后的CSS设置影响，建议在每个横向DIV大块做完之后，都加上class="clear"进行收尾。例如：
    <div class="grid_3 first omega">第一块</div>
    <div class="clear"></div>
    <div class="grid_6 second alpha omega">第二块</div>
    <div class="clear"></div>
    <div class="grid_3 three alpha">第三块</div>
2.在less中可以通过定义变量来使得重复的工作变得简单；
    1)应用：<link rel="stylesheet/less" type="text/css" href="less/styles.css">
        <script type="text/javascript" src="js/less-1.7.1.js"></script>
    2)通过第三方工具将less文件转换成CSS文件（建议使用koala工具编译）
    3)style.less中:定义变量用关键字@
    @color:red;
        #header{
              height: 200px;
              width: 200px;
              background-color: @color;
            }
               p{
              color: @color;
            }
    4)Mixin--掺合模式；定义重复使用的模块。
        .set-init(@color:red,@size:10px){
                background-color: @color;
               font-size: @size;
            }

        #header{
              height: 200px;
             width: 200px;
              .set-init；//此处调用
            }
    5)内嵌规则；使得代码结构更加明确    
        <div id="header">
                <div>
                        <ul>
                             <li>登录</li>
                              <li>注册</li>
                    </ul>
                    </div>
                        <p>hello world</p>
            </div>
3)第三个是我比较喜欢使用的SASS：SASS是最早的CSS预处理语言，有比LESS更为强大的功能，不过其一开始的缩进式语法并不能为大众接受，不过由于强大的功能，还是有很多开发者选择了SASS。SASS 发展到现在有各种后缀名文件：sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。
    1）这里介绍SCSS的语法。同样需要第三方编译软件将SCSS文件转换成CSS文件。（koala）
    2）变量：$color:red;
        div{
              background-color: $color;
              height: 200px;
             width: 200px;
            }
    3）导入其它CSS文件：支持@import导入
在css中
1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
2，@import 是css2里面的，所以古老的ie5不支持。
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

@import先加载HTML加载CSS
link先加载CSS加载HTML

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

实验main.css main1.css mian.scss
页面文件
 <div id="main">
    </div>
main.scss
@import "main1.css";

main1.css
div {
    background-color: red;
    height: 200px;
    width: 200px;
}
    4）继承：子继父。
        #div{
              width: 200px;
              height: 200px;
             }

        #main{
             @extend #div;
              background-color: red;
              }
        #message{
              @extend #div;
              background-color: gray;
            }
    5）混入：例子中div为自取的引用名称
        @mixin  div{——注意这里声明的部位和之前有点区别
              width: 200px;
              height: 200px;
            }

        #main{
             @include div;——引用也有区别，这样用关键字是比less麻烦了还是更清晰呢
            }
        #message{
            @include div;
            }
    6）嵌套：与less没有太大的区别
        #main{
              width: 200px;
              height: 200px;
              background-color: grey;
              p{color: red;font-size: 14px}
              #message{
                    width: 50px;
                    height: 50px;
                    background-color: blanchedalmond;
                  }
              }


最后要说的就是工具始终是工具，我们要能使用工具，更要能脱离工具。在写CSS时要有一个清晰的全局思路，要理清前中后之间的关系。写的时候也要根据自己的思路去写，避免想到哪个写哪个，同时在取名字时也要注意意义的表达以及其与前后的照应，这样写CSS时就不容易陷入混乱