css
存放 CSS 文件
2.3 CSS 书写规范
基本原则:
CSS 样式可细分为 3 类:自定义样式、重新定义 HTML 样式、链接状态样式。
1. 样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样
式名 “.”+“相应样式效果描述的单词或缩写”例:“ .shadow ”
文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“ .no12 ” 、“ .no12-24 ”
2. 义 HTML 样式为设计师重新定义已有的 HTML 标签样式,影响全部的被设定标签样式,用于统一网页
中某一标签的样式定义。样式名“HTML 标签”例:hr { border: 1px dotted #333333 }
3. 态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。
该样式写法有 2 种: a.nav:link nav.a:link 第一种只能修饰<a>标签中;第二种可以修饰所有包含有
<a>标签的其他标签。
页面内的样式加载必须用链接方式<link rel="stylesheet" type="text/css" href="style/style.css">
注意细则:
1. 协作开发及分工: i 会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员
实现内部结构&表现&行为; 共用 css 文件 base.css 由 i 书写, 协作开发过程中, 每个页面请务必都要引入,
此文件包含 reset 及头部底部样式, 此文件不可随意修改;
2. class 与 id 的使用: id 是唯一的并是父级的, class 是可以重复的并是子级的, 所以 id 仅使用在大的模
块上, class 可用在重复使用率高及子级中; id 原则上都是由我分发框架文件时命名的, 为 JavaScript 预留
钩子的除外;
3. 为 JavaScript 预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
4. class 与 id 命名: 大的框架命名比如 header/footer/wrapper/left/right 之类的在 2 中由 i 统一命名.其他
样式名称由 小写英文 & 数字 & _ 来组合命名, 如 i_comment, fontred, width200; 避免使用中文拼音, 尽量
使用简易的单词组合; 总之, 命名要语义化, 简明化.
5. 规避 class 与 id 命名(此条重要, 若有不明白请及时与前端开发沟通):
a, 通过从属写法规避, 示例见 d;
b, 取父级元素 id/class 命名部分命名, 示例见 d;
c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如 i_clear;
d, a,b 两 条 , 适 用 于 在 2 中 已 建 好 框 架 的 页 面 , 如 , 要 在 2 中 已 建 好 框 架 的 页 面 代 码 <div
id="mainnav"></div>中加入新的 div 元素,
按 a 命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,
样式写法: #mainnav .firstnav{.......}
按 b 命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,
样式写法: .main_firstnav{.......}
6. css 属性书写顺序, 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习
惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float(包括
clear)、position(相应的 top,right,bottom,left)、display、visibility、overflow 等;自身属性主要包括: