Heim > Web-Frontend > HTML-Tutorial > CSS规范_html/css_WEB-ITnose

CSS规范_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:59
Original
1267 Leute haben es durchsucht

CSS规范

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

    CSS选择器

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

    tips

  • 关于提示框
    父标签 宽高0 相对定位
    子标签 绝对定位,可以实现提示框功能
  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage