精通CSS--高级WEB标准解决方案(第一章)-------读书笔记

精通CSS--高级WEB标准解决方案(第一章)

       Andy Budd ,Cameron Moll ,Simon Collison 著

 

第一章   基础知识

   1.1 设计代码的结构 

        WYSIWYG(所见即所得)工具会添加更多复杂标记.

        有意义的页面:容易处理,搜索;可以被程序及设备理解

        有意义的标记:为文档添加结构,方便设置元素样式,避免代码膨胀.

   

       有意义元素: #H1,H2

                      #UL,OL,DL

                      #caption ,thead ,tbody,tfoot

   

        1.ID和类名

         XML可以创建自己的元素,但是复杂,目前不太现实

        (X)HTML,不能创建自己的元素,解决方案:ID+类名

       

          eg:<ul id="mainNav">         //定制的导航元素

              <li>....</li>

              <li>....</li>

              </ul>

           注意:1,命名要保持有意义且与表现方式无关(只解释是什么,不涉及如何表现它);

                  2,最好区分大小写;

                  3,不可滥用,滥用会添加无意义代码(做法:区分 大的条目,用层叠识别内部元素)

 

       1.1.2 文档类型

           DTD(文档定义类型),定义XML与(X)HTML中允许有什么,不允许有什么.

           DOCTYPE声明描述使用哪个DTD

 

         1,有效性检验:W3C检验器

         2,浏览器模式:标准,怪异,几乎标准

         3,DOCTYPE切换

 

    1.2  为样式找到目标--选择器

       1.2.1 常用:类型:P ,A ,H1

                     后代:LI A

                     ID   :#NAV

                  CLASS:.DATE

                    伪类:a:Link      a:visited

                          a:hover    a:active    记忆:LOVE:HATE

                          tr:hover      input:focus

       1.2.2 通用  *{padding:0;}

       1.2.3 高级  1.子:#NAV >LI  (直接后代)

                      相邻: H1 + P

                   2.属性选择器:abbr[title]:hover {cursor:help}

       1.2.4 层叠

            层叠:处理多个规则应用于同一元素的冲突,分配特殊性

           层叠次序: 用户!IMPORTANT 作者!IMPORTANT 作者样式 用户服务样式 浏览器样式

       1.2.5 继承

            继承:减少选择器数量,复杂性

 

   1.3 规划,组织,维护样式表

        1.3.1 应用样式

          <link herf="/css/basic.css" rel="stylesheet" type="text/css">

         <style type="text/css">

         <!--

             @import url("/css/advanced.css")

            -->

         </style>

       1.3.2  注释

          /*       */       C网格注释

            1.结构性注释

          /*-------------------------------

            verson:1.1

            author:

            email:

           website:

 

          2.自我提示

          TODO;BUG ;TRICKY;