胡说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时就不容易陷入混乱

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。