Home > Web Front-end > HTML Tutorial > CSS specification_html/css_WEB-ITnose

CSS specification_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:59
Original
1267 people have browsed it

CSS规范

  • 文档声明: doctype 前不允许非空字符
  • 编码
  • 小写
  • 所有的HTML标签必须小写;
  • 所有的HTML属性必须小写;
  • 所有的样式名及规则必须小写。
  • 缩进:使用tab(4个空格宽度)来进行缩进
  • 注释
  • 省略嵌入式资源的协议头
    *省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )
    *应用场景:web页面的协议,跟资源的协议相同
  • 省略属性值
  • <input type="text" readonly />
    Copy after login
  • 嵌套
  • 标签闭合
  • 多媒体替代
  • <img src="xxx" alt="正在加载" />
    Copy after login
  • 模块化
  • 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; }
    Copy after login
  • 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 */ }
    Copy after login

    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 相对定位
    子标签 绝对定位,可以实现提示框功能
  • Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template