关于 css 编写的问题
关于 css 编写的问题 最近一直在做Css Lab，也一直在思考关于页面设计的技术问题，以前对Html+css+js的认识很片面，很多不知道，都是因为没有好好的去研究，去分析，去编写测试，今天主要说下关于Css编写的问题，希望大家多多留言，我是抛砖引玉。 Css和其他程序一样，都是有作用域这个概念，有全局、类局部作用这些方式。 举个例子： p{background:#f00;}/* 作用域 ：全局 */ .div p{color:#000;}/* 作用域：div类中*/ 介绍下Css几种编写方式和权重对比 1）标签：权值为0,0,0,1 2）类：权值为0,0,1,0 3）属性选择：权值为0,0,1,1 4）ID：权值为0,1,0,0 5）important的权值为最高1,0,0,0 提示： 大家可以手动编写几个例子，去发现规律，欢迎跟帖。 通常编写Css的时候，我们会遇到什么样的问题？下面是我总结的一些内容： 1、命名规则 相信大家在编写Css的时候，当项目比较大，内容比较多的时候，命名就是一件很头痛的事情，而且一个块里面要表现不同状态的样式 ，这是有掌握命名规则是一把利器，能让你工作起来事半功倍。大致如下：（转载自：http://www.cssforest.org/blog/index.php?id=143，大家可以去这里看，比较多的技术文章） 要避免当状态改变时名称失去意义，最常见的就是用于布局的类名，如“left”、“right”，当左边栏不再是左边栏的时候，“left”这个名就没有实际意义了。这与我们所推荐的“命名要有意义”就相违背了，使用序号就更加有问题了。好像没错，不过有好长一段 时间都有个问题让我很烦恼，如果一个页面中同个模块出现一次以上，而且细节还不一样，那后面出现的名称应该叫什么呢？难道“one”、“two”就不是序 号？其实我们要避免遇到的情况就是当状态（表现）改变时，对应定义的类名不会失去意义。 所谓的状态（表现）改变，有几种情况：HTML不变，样式定义改变。如果命名使用了表示某一状态的名称，如“red“、“font14“等，必定会引起定义与命名不符的情况，对后继的影响会造成比较大的影响。样式定义不变，HTML改变。HTML改变意味着类名可更换，也就是如果类名使用了表示某一状态的名称，反而更有利于修改。样式定义与HTML都改变。只需要考虑不要出现第一种情况的结果就可以了。 而实际情况并不是单纯的某一种情况，更多的时候是混杂着出现的。 规则 [ 模块前缀 ] _ 类型 _ ( 作用 | 状态 ) n _ [ 位置 n ] 图例说明：( 必选 )：必需存在。[ 可选 ]：可根据需要选择。|：多选一。n：可有多个。 名词说明： 模块前缀模块定义时使用的前缀。 类型定义类的内容类型。如输入框、文本、段落等等。 作用定义类的作用，用于对类型的补充。 状态定义类的状态，用于对类型的补充。 位置定义类所使用的位置，如首页、导航等等，不排除使用左、右这样的词，但应尽量避免。每项都可有自己的一个缩写表，同一名称的缩写尽量统一。所选用的单词应选择不过于具体表示某一状态（如颜色、大小等）的单词，以避免当状态改变时名称失去意义。由不以数字开头的小写字母（a-z）、数字（0-9）组成。确保类(.class)的重用性与对象(#id)的唯一性，id避免使用保留字。 例： 模块前缀：弹出 pop公共 global,gb标题 title,tit提示 hint菜单 menu信息 info预览 pvwTips tips导航 nav 类型：按钮 bt文本 tx段落 p图标 iconinput input颜色 color,c背景 bg边框 bor 作用：设置 set添加 add删除 del操作 op密码 pw导入 inc 状态：成功 suc失败 lost透明 tran 位置：公共 gb边框 bor段落 p弹出 pop标题 title,tit菜单 menu内容 cont导航 nav中文解释命名中文解释命名文本输入框.input_tx段落文本颜色.c_tx_p密码输入框.input_pw相册弹出的设置层.pop_set_photo登录密码输入框.input_pw_login日志设置成功提示.hint_suc_blogset文本颜色.c_tx公共提示.hint_gb问几个简单的问题，可以帮助我们完成命名：“什么类型的定义？”——是个输入框，input。“类型补充说明”——如果一个词说明不清楚，那么补充说明类型，文本输入框，input_tx。“在哪使用？”——定义要使用的位置在哪？首页的搜索文本输入框，input_search_index。 结合“模块化”相关的方法去定义，其实所需要定义的名称并不需要很多。 如：“hint_tx”表示提示模块的文字定义，“hit_tx_hint”表示提示里文字强调的定义，至于是改变颜色还是加粗，这个就看不同提示模块的需要了。 2、兼容性 兼容性算是一个非常大的问题，而且很让人烦心，拿到视觉做的效果图的时候，你会对整个页面进行布局的分析，怎么去完整的按照视觉效果精度完成页面设计是一项非常大的问题，所以我们要掌握Css hack的写法，这样对你的工作也是有很大的帮助，也能让你觉得写起来很轻松，达到这个目的我们就身心愉快了。 Css hack 终极写法： 代码.e{color:#FFF;/* FF,OP */[;color:#0F0;]/* Sa,CH */color:#FFF\9;/*IE6、7、8*/*color:#FF0;/* IE7、6 */_color:#F00;/* IE6 */}@media all and(min-width:0){ .e{ background-color:#FF5500;/* OP */ }}复制代码 3、模块化 Css模块化是对Css代码进行优化，减少重复，增强代码复用性，便于移植。其实这些知识是需要一个过程慢慢体会的，任何事情都是这样过来的，每一一步的飞跃，只能是一步一步的去完善。 模块化的核心思想： 将HTML和CSS通过一定的规则进行分类、组合，以达到特定HTML、CSS在特定范围内最大程度的复用。 有三个关键词： 规则 、 特定范围 、 最大程度的复用 。怎么理解呢？（转载：http://www.cssforest.org/blog/index.php?id=165） 规则 编写模块时需要遵循的规范 特定范围 模块可使用的范围。与样式的作用域有关，大部分模块的使用范围仅仅是某一个栏目或站点。 最大程度的复用 做最少的修改即可重复使用。很多同学都把“复用”理解成不用修改的直接使用，但在页面制作中，由于实际的项目环境，基本是不可能做到“一个模块走天下”的。不同的栏目会有不同的需求。 从实际出发，才能最终服务于实际。我们知道一个HTML标签可以绑定多个样式，所以我们可以这样去定义一个模块： <div class="class-a class-b class-c"> ...</div>复制代码 不少人已经知道这个方法了，而且还很形像的称之为“拼样式”。这样的定义很容易引出其它的问题，比如样式类的个数多少个适合？样式类如何命名？等等。下面讲下我的方法，从前面我们学到的样式作用域及模块化的核心思想，我们可以把样式进行一个分类，像这样： .mode-a{/* 定义一个模块 */}.type-a{/* 模块中的差异化定义 */}.mode-name{/* 针对单个模块的个性化定义 */} <div class="mode-a type-a mode-name"> ...</div> 复制代码 上面的“mode-a”，我称它叫为“基类”；“type-a”为“扩展类”；“mode-name”为“模块名”，作用分别是： 基类 （基础样式）模块的基础表现。包含了模块中大部分的状态。 扩展类 （扩展样式）用于对使用基类的模块进行小范围的修改 模块名 模块在某一作用域中的唯一名称。 这里有一个 简单的例子可以帮助理解： 代码<style type="text/css">body{line-height:1;}.copyright{position:absolute;right:20px;top:10px;height:200px;line-height:10px;}.copyright a:link{color:#666666;text-decoration:none;}.copyright a:hover{color:#CC9900;text-decoration:underline;}.none{display:none;}.demo{width:400px;padding:10px;font-size:12px;}.demo p{margin:0;padding:0;}/* S 提示条 基类 */.mode_hint{position:relative;margin:3px 0;padding:5px;border:1px solid #F0EFB2;background-color:#FFFEAB;color:#000000;_zoom:1;}.mode_hint .op{position:absolute;right:8px;top:5px;}.mode_hint .op a{color:#000000;}/* E 提示条 基类 *//* S 提示条 扩展类 */.op_hint{border-color:#7B0006;background-color:#A00008;color:#FFFFFF;}.op_hint .op a{color:#FFFFFF;}/* E 提示条 扩展类 *//* S 提示条 单独定义 */.hint_01{position:absolute;bottom:0;left:0;width:99%;}.hint_02{position:absolute;top:45%;left:50%;width:400px;margin-left:-200px;}/* E 提示条 单独定义 */</style></head><body><h1>模块化的核心思想──页面重构中的模块化设计（四）</h1><p>一个消息类的Demo，“基类”包括了一个模块中最基本的内容，包括各种状态。</p><div class="demo"> <h2>基类</h2> <!-- S 操作提示 --> <div class="mode_hint"> <p>提示条基类</p> <div class="op"><a href="##">Close</a></div> </div> <!-- E 操作提示 --> <h2>扩展类</h2> <!-- S 操作提示 --> <div class="mode_hint op_hint"> <p>扩展了的提示条。</p> <div class="op"><a href="##">Close</a></div> </div> <!-- E 操作提示 --> <!-- S 操作提示 --> <div class="mode_hint hint_02"> <p>扩展了的提示条。</p> <div class="op"><a href="##">Close</a></div> </div> <!-- E 操作提示 --> <!-- S 操作提示 --> <div class="mode_hint op_hint hint_01"> <p>扩展了的提示条。</p> <div class="op"><a href="##">Close</a></div> </div> <!-- E 操作提示 --></div>复制代码 继续了解可以参阅（http://www.cssforest.org/blog/index.php?id=167） 掌握了以上这些知识，相信大家开发的时候会很轻松的，欢迎大家给意见，共同总结，共同进步