首页 > Web开发 > 详细

组件化CSS--管理你整站的CSS文件

时间:2014-07-22 00:21:04      阅读:263      评论:0      收藏:0      [点我收藏+]


bubuko.com,布布扣

bubuko.com,布布扣

为什么要拆分样式文件?

更易于查找样式规则. 简化维护,方便管理. 还可以针对某一页面提供特定的样式.

bubuko.com,布布扣

为什么要添加桥接样式?

你可以随时添加或移除样式而不需要修改HTML 文档.

bubuko.com,布布扣

bubuko.com,布布扣

 

为什么要定义两种媒体类型?

NN4 不支持@import ,故识别不到桥接样式.

 

bubuko.com,布布扣

@import ‘header.css’;

@import ‘content.css’;

@import ‘footer.css’;

 

@imports 如何工作?

它将所有CSS 规则从一个文件导入到另外一个文件.@import 不能被老的

浏览器所识别.

 

 

bubuko.com,布布扣

对于 大型站点 来说,这是一个理想的概念.

 

bubuko.com,布布扣 bubuko.com,布布扣

bubuko.com,布布扣

Hack-free CSS

处理诸如IE 这样烦人的浏览器 的兼容性是我们最头疼的事儿之一.

很多朋友使用CSS Hack 来解决这些问题.

问题是当IE版本进行升级更替,改进对CSS的支持后,之前使用的hacks将会无效 !

你是怎么解决这个问题 的呢?

“我们要求你在不使用CSS hacks 的情况下更新你的页面.假如你想针对IE或者避开IE,你可以使用条件注释.”

条件注释 如何工作?

步骤一、针对IE,创建一个心得样式文件

bubuko.com,布布扣

步骤二、在HTML文档的开头添加条件注释 代码

bubuko.com,布布扣

只有指定的IE浏览器版本识别这个心的样式,其它的浏览器将会彻底忽略 它.

bubuko.com,布布扣

平常的浏览器识别:(非IE浏览器,如火狐、Chrome等等)

bubuko.com,布布扣

 

特定IE 版本识别:

bubuko.com,布布扣

举个例子, 大多数浏览器会将补白加进容器的宽度里,但是IE5 不会. 这种情况下,IE5 显示的是一个比较小的容器.

 

main.css (被包含IE5在内的所有浏览器识别):

#container{ width: 600px; padding: 100px;}

 

ie5.css (只有IE5识别):

#container {width: 800px; }

 

 

为什么条件注释是一个好的解决方案呢?

1.  No hacks
特定的CSS 规则仅出现在新的样式表里.

2.  文件分离
针对特定版本的IE 定义的样式脱离了主样式表,可以在IE 浏览器升级更新对属性支持时轻松移除这些文件.

3.  针对性
可对不同版本的IE 浏览器有针对性的进行相关属性的定义。

组件化CSS--管理你整站的CSS文件,布布扣,bubuko.com

组件化CSS--管理你整站的CSS文件

原文:http://www.cnblogs.com/ranzige/p/3858299.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!