zoukankan      html  css  js  c++  java
  • 常用的css命名规范

    XHTML-CSS写作建议
    1、所有的xhtml代码小写;
    2、属性的值一定要用双引号("")括起来,且一定要有值;
    3、每个标签都要有开始和结束,且要有正确的层次;
    4、空元素要有结束的tag或于开始的tag后加上"/";
    5、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等;
    6、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询;
    7、给每一个表格和表单加上一个唯一的、结构标记id;
    8、给重要的区块加上注释;
    9、给图片加上alt属性;
    10、所有的标签必须进行合理的嵌套;
    11、根元素前必须有元素,宣告使用那一种DTD;
    12、根元素必须有 xmlns 属性来指定使用 http://www.w3.org/1999/xhtml的namespace。

    注释书写规范
    1、行间注释 直接写于属性值后面
    如: .search{
    border:1px solid #fff;/*定义搜索输入框边框*/
    background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ }
    2、整段注释 分别在开始及结束地方加入注释,
    如: /*=====搜索条=====*/
    .search {
    border:1px solid #fff;
    background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/
    3.协助注释 非作者维护时所加入的表示修改时间、修改人等标识信息。 在区域注释或单行注释的基础上加上修改人和修改时间等信息。
    例(区域注释): <!--==S 注释内容[修改人和修改时间]--> <div> ... </div>
    <!--==E 注释内容[修改人和修改时间]--> /*=S 注释内容[修改人和修改时间]*/ .class{ ... } .class{ ... } /*=E 注释内容[修改人和修改时间]*/
    例(单行注释): <div> <!-- 注释内容[修改人和修改时间]--> ... </div> .class{ /*注释内容[修改人和修改时间]*/ ... }


    私有样式命名规范:
    为了避免出现样式私有样式的名称和公有样式重复的想象,私有样式采用:”前缀_位置缩写” 的规则。
    如:该模块是属于产品就可以用product 为前缀。
    上中下就可以依次是:product_h,product_m,product_b.
    中间又分为左右结构,那就是product_m_l,product_m_r

    区域块:box/area
    区域块样式类别+box/area,
    比如新闻区域块:newsbox/newsarea,
    产品区域块:probox/proarea
    标题栏:bar (newsbar/probar)
    列表:list (newslist/prolist)

    css属性书写顺序
    建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性.
    此条可根据自身习惯书写, 但尽量保证同类属性写在一起.
    属性列举:
    布局定位属性主要包括: margin&padding&float(包括clear)&position(相应的top,right,bottom,left)&display&visibility&overflow等;
    自身属性主要包括: width & height & background & border;
    文本属性主要包括:font&color&text-align&text-decoration&text-indent等;
    其他属性包括: list-style(列表样式)&vertical-vlign&cursor&z-index(层叠顺序) &zoom等.

    想要别人给你鼓掌,先学会给别人鼓掌
  • 相关阅读:
    go语言xrom使用
    go语言算法
    go语言递归
    go语言map(字典)
    GO语言实现小技巧
    偶遇递归树
    Python中字典对象根据字典某一个key和values去重
    python中将字符串格式转字典
    Azure媒体服务的Apple FairPlay流功能正式上线
    SVG裁剪和平移的顺序
  • 原文地址:https://www.cnblogs.com/fjqq/p/4671159.html
Copyright © 2011-2022 走看看