收藏本站投递资讯前端导航

前端资讯

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1359|回复: 2

css制作流程及标准

[复制链接]
发表于 2012-10-21 16:44:37 | 显示全部楼层 |阅读模式
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个以上属性,每个属性占一行

简写

3)字体

4)背景
  1. background-color:red;
  2. background-image:url();
  3. background-repeat:no-repeat;
  4. baclgrpimd-position:top right;
  5. background-attachment:fixed;
  6. (每个属性都可省略)简写: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文档的顺序共用的代码样式放在文档最前面结构序依照html构
ss选择器中的属性顺序显示属性:display, list-style, position, float, clearborder,backgroundvertical-align, white-space, content
原    因:这个顺序是项目开发的代码标准,符合浏览器的
渲染顺序,最终达到提高执行效率目的

写了好久,希望对大家有帮助!!加油~~

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

tprups66 该用户已被删除
发表于 2013-4-22 15:10:58 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

发表于 2013-5-7 11:12:08 | 显示全部楼层
不错 感谢楼主分享!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则