当前位置:Gxlcms > html代码 > CSS规范_html/css_WEB-ITnose

CSS规范_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:5人阅读

CSS规范

  • 文档声明: doctype 前不允许非空字符
  • 编码
  • 小写
  • 所有的HTML标签必须小写;
  • 所有的HTML属性必须小写;
  • 所有的样式名及规则必须小写。
  • 缩进:使用tab(4个空格宽度)来进行缩进
  • 注释
  • 省略嵌入式资源的协议头
    *省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )
    *应用场景:web页面的协议,跟资源的协议相同
  • 省略属性值
  • 嵌套
  • 标签闭合
  • 多媒体替代
  • 正在加载
  • 模块化
  • CSS文件引用: 一律使用link的方式调用外部样式
  • 命名规范
  • 组成元素(单词、中划线、或数字组成)
  • 词汇规范 :
  • 命名前缀规范:g- ui-
  • 书写格式
  • 0 与单位:0px 不需要加单位
  • 属性书写顺序:
  • .g-box {     display: block; position: relative;     z-index: 2;     top: 10px;     left: 100px;    float: left;     width: 500px;     height: 200px;     margin: 10px;     padding: 10px;     border: 10px solid;     background: #aaa;     color: #000;     font: 14px/1.5 sans-serif; }
  • hack规范:由高到低
  • .test {     color: #000; /* For all */     color: #111\9; /* For all IE */     color: #222\0; /* For IE8 and later, Opera without Webkit */     color: #333\9\0; /* For IE8 and later */     color: #444\0/; /* For IE8 and later */     *color: #666; /* For IE7 and earlier */ _color: #777; /* For IE6 and earlier */ }

    CSS选择器

    -执行效率从高到低排序:
    1. id选择器(#myid)
    2. 类选择器(.myclassname)
    3. 标签选择器(div,h1,p)
    4. 相邻选择器(h1+p)
    5. 子选择器(ul < li)
    6. 后代选择器(li a)
    7. 通配符选择器(*)
    8. 属性选择器(a[rel=”external”])
    9. 伪类选择器(a:hover, li:nth-child)

    tips

  • 关于提示框
    父标签 宽高0 相对定位
    子标签 绝对定位,可以实现提示框功能
  • 人气教程排行