css制作流程及标准
(一)制作流程:1,创建文件(文件管理及命名)2,与html文档建立关系注意点: 1)
不建议使用:内联样式和内嵌样式
原因:结构(html)和表现(css样式)没有分离
2)
区别:外链样式与导入样式(http://zhidao.baidu.com/question/198616109.html)
3)
网站常用:外链样式
3,制作页面样式注意点:
- 同html框架一致从上到下
- 从整体到局部
- 共用样式到个别样式
4,添加注释注释范围: 1)每个文档对应一个文档注释(方便后期维护和管理)
主要注释说明:文档创建人,时间,内容等
2)
属性注释说明:css hack,特殊属性等
3)
功能注释说明:默认样式,按钮,弹出框等
5,完成检查*********************************************************************
(二)制作标准:(有利于开发和后期管理)这个标准是我们公司的。各个公司有所不同,仅供大家参考~~
缩进及换行:说明:缩进:设置tab键制表符(同html的一样)——点击tab生成2个空格
换行:
选择器换行:相同样式2个以上选择器,每个选择器一行
属性换行:
1)只有一个属性时,选择器与属性在同行
2)2个以上属性,每个属性占一行
简写1)颜色:16进制颜色值:#RRGGBB——R,G,B都成对相同时,缩写成:#RGB
- color:#336699;
- 简写:color:#369;
2)单位:数值为0时,单位可以省略
- margin:0px;
- 简写:margin:0;
3)字体
4)背景
- background-color:red;
- background-image:url();
- background-repeat:no-repeat;
- baclgrpimd-position:top right;
- background-attachment:fixed;
- (每个属性都可省略)简写:background:background-color background-image background-repeat background-position background-attachment;
5)内外边距(margin与padding简写方式相同)
6)边框
- border-width:1px;
- border-style:solid;
- border-color:red;
- 简写:border:border-width border-style border-color;
- border:1px solid red;
- 单边简写:border-top:1px solid red;
- border-right:1px solid red;
- border-bottom:1px solid red;
- border-left:1px solid red;
- (不推荐)单属性简写:(顺序:上右下左)
- border-width:border-top-width border-right-width border-bottom-width border-left-width;
- border-style:border-top-style border-right-style border-bottom-style border-left-style;
- border-color:border-top-color border-right-color border-bottom-color border-left-color;
css代码顺序