background image

media

存放多媒体文件

project

存放工程项目资料

temp

存放客户原始资料

js

存放

JavaScript 脚本

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 命名(此条重要, 若有不明白请及时与 i 沟通):  

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>,