zoukankan      html  css  js  c++  java
  • css制作流程及标准

    <ignore_js_op>css文件及命名.png

    2012-8-26 07:11:10 上传
    下载附件 (36.1 KB)
     




    2,与html文档建立关系

    <ignore_js_op>与html建立关系.png


    注意点:
        1)不建议使用:内联样式和内嵌样式
             原因:结构(html)和表现(css样式)没有分离
        2)区别:外链样式与导入样式([url]http://zhidao.baidu.com/question/198616109.html)[/url]
        3)网站常用:外链样式

    3,制作页面样式
    <ignore_js_op>添加样式.png 
    注意点:

    • 同html框架一致从上到下
    • 从整体到局部
    • 共用样式到个别样式


    4,添加注释

    <ignore_js_op>css注释.png 
    注释范围:
        1)每个文档对应一个文档注释(方便后期维护和管理)
             主要注释说明:文档创建人,时间,内容等
        2)属性注释说明:css hack,特殊属性等
        3)功能注释说明:默认样式,按钮,弹出框等

    5,完成检查

    *********************************************************************

    (二)制作标准:(有利于开发和后期管理)
    这个标准是我们公司的。各个公司有所不同,仅供大家参考~~

    缩进及换行:
    <ignore_js_op>缩进与换行.png 
    说明:
    缩进:设置tab键制表符(同html的一样)——点击tab生成2个空格
    换行:
    选择器换行:相同样式2个以上选择器,每个选择器一行
    属性换行:
    1)只有一个属性时,选择器与属性在同行
    2)2个以上属性,每个属性占一行

    简写
    1)颜色:16进制颜色值:#RRGGBB——R,G,B都成对相同时,缩写成:#RGB

    2)单位:数值为0时,单位可以省略

    3)字体
    <ignore_js_op>font简写.png 
    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简写方式相同)
    <ignore_js_op>margin简写.png 
    6)边框

    1. border-1px;
    2. border-style:solid;
    3. border-color:red;
    4. 简写:border:border-width border-style border-color;
    5.           border:1px solid red;
    6. 单边简写:border-top:1px solid red;
    7.                  border-right:1px solid red;
    8.                  border-bottom:1px solid red;
    9.                  border-left:1px solid red;
    10. (不推荐)单属性简写:(顺序:上右下左)
    11. border-border-top-width border-right-width border-bottom-width border-left-width;
    12. border-style:border-top-style border-right-style border-bottom-style border-left-style;
    13. border-color:border-top-color border-right-color border-bottom-color border-left-color;


    css代码顺序

    css文档的顺序

    • 共用的代码样式放在文档最前面
    • css结构的顺序依照html的结


    c
    ss选择器中的属性顺序:显示属性->自身属性->文本属性
    <ignore_js_op>顺序.png 

    • 显示属性:display, list-style, position, float, clear
    • 自身属性:width, height, margin, padding,border,background
    • 文本属性:color, font, text-decoration, text-align,vertical-align, white-space, content 
  • 相关阅读:
    js获取或设置当前窗口url参数
    ping域名怎么用?通过ping域名我们能看见什么?
    css中的zoom
    transition(属性渐变)、animation(动画)
    做一个input搜索框
    float 与 position 剪不断理还乱的关系
    PHP判断FORM来的数据是否为整数
    合并两个数组的两种方式的异同
    了解thinkphp(五)
    了解ThinkPHP(四)
  • 原文地址:https://www.cnblogs.com/52css/p/2684372.html
Copyright © 2011-2022 走看看