首页 > 代码库 > 胡说css框架
胡说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="http://www.mamicode.com/less/styles.css">
<script type="text/javascript" src="http://www.mamicode.com/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时就不容易陷入混乱
胡说css框架