1. 导入方法
考虑到样式维护、更新,以及多人同步的项目开发,故CSS使用如下链接规则:
a) 页面文件链接单一CSS文件(style.css)
b) 其他CSS导入方式链接到此CSS(style.css)文件
比如:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS样式链接规则</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
style.css文件:
@import url("./layout.css");
@import url("./type.css");
@import url("./form.css");
……
1) 布局 layout.css
定义页面是二栏、三栏;全屏或者800*600
2) 基本type.css
定义body、h1-h6、a:link-a:active、p等的字体大小和颜色行间距、链接色彩。
3) 表格table.css
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。
4) form.css
定义fieldset、label、button、input 、select、textarea这几个标签的表现。
5) 包含其他css的css
frontpage.css、list.css、detail.css、register.css
可根据各种引用去导入需要的相应css。如果需要修改,只需修改对应的部分CSS文件即可。即使需要样式切换,只切换页面导入的all.css即可实现功能。
2. 样式简写
良好的代码简写可以简短、清晰css代码。如下为可简写的属性。
c) 盒模型简写
margin-top: 0px; margin-right: 1px; margin-bottom: 3px; margin-left:2px;
可简写为:margin: 0 1px 3px 2px; (其中0px可以简写为0;)
padding-top: 3px; padding-right: 4px; padding-bottom: 3px; padding-right:4px;
可简写为:padding: 3px 4px; (表示上下各为3px,左右各为4px;)
d) 颜色简写
color: #008800;
可简写为:color: #080; (即用一位可代表同数值两位)
e) border简写
border-style: solid; border-width: 1px; border-color: #ffcc00;
可简写为:border: solid 1px #fc0;
若border一边(无上边框)为无边框,即可如下:
border: solid 1px #fc0; border-top: 0;(none可简写为0)
f) background缩写
background-color: #000; background-image: url(…); background-position: top left; background-repeat: no-repeat;
可简写为:background: #000 url(…) top left no-repeat;
g) 字体缩写
font-weight: bold; font-size: 12px; font-family: Tahoma; line-height:140%;
可简写为:font: bold 12px/140% Tahoma;
3. 书写顺序
对于单个的css定义,书写顺序:
显示>盒模型>排版>字体>边框>背景
class/id {
/* 显示 */
display
position
float
clear
cursor
/* 盒模型 */
margin
padding
width
height
/* 排版 */
vertical-align
white-space
text-decoration
text-align
/* 字体 */
color
font
content
/* 边框 背景 */
border
background
}
4. 书写细则
CSS书写细则如下:
h) CSS文件开头要注明
1) 项目名称
2) 开发人员
3) 创建时间
4) 修订时间
5) 修订缘由
i) 尽量避免大小写
由于CSS对大小写敏感,所以应尽量避免大小写
j) 禁止使用中文注释
考虑到编码问题,禁止使用中文注释。
k) 对于同父级,子级可用缩进
CSS书写规范参考
最新推荐文章于 2022-10-14 22:02:57 发布