什么是CSS框架?比较牛的CSS框架有哪些?

html-css025

什么是CSS框架?比较牛的CSS框架有哪些?,第1张

简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。

Blueprint是比较早的，基于静态css的框架。但是现在有两个主要的动态css语言，LESS和SASS，给css提供了变量，mixin，运算符等功能，让写出模块化的css框架成为可能。

Bootstrap现在基本是欧美这里最流行的框架，基于LESS，最近升级2.0以后完全模块化，也不需要太多配置，很好用。这个框架对大部分元素的视觉细节都已经做得很完整，基本上你只需要写html，加几个class，就可以做出像模像样的页面了，做起prototype来嗷嗷快。不过这也是个缺点，因为用的人多了样式都长一个样... 当然，模块化的框架你要修改起来也是很方便的，基本上修改变量就可以了。

另一个比较流行的是基于SASS的Compass，这个框架包含了Blueprint作为其中的一个模块。需要注意的是这个框架和Ruby on Rails是高度整合的，用起来需要大量的命令行操作，比Bootstrap麻烦，但是在Rails开发人员里面用得比较多。

自己写个class样式覆盖到框架的样式位置就好了。

1.自定义图标替换ionic图标样式

<ion-item class="item item-complex my-complex item-icon-left item-icon-right">

<a class="item-content my-content" ng-click="goPage('archive', '个人信息')">

<i class="icon datum-img"></i>

<span style="font-size: 90%line-height:inherit">个人信息</span>

<i class="icon ion-ios-arrow-right msgText" style="font-size: 20px"></i>

</a>

</ion-item>1234567

.datum-img{/* 个人信息*/

background: url(../img/mine/datum.png) no-repeat center width: 20px height: 20px margin-top: 3px display: inline-block background-size: 100%}12345678

.my-complex .my-content{padding: 10px 0px 10px 0px}123

从代码中可以看到，.datum-img是使用自定义图标，宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格，而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。

总结：覆盖样式，1、先看下框架css的层次，2、依据框架层次自己写个不同名的class样式，样式内含有你需要覆盖的规格key要对，然后自己改想要的value。3、把自己写好的class样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。