精通CSS高级Web标准解决方案【读书笔记】

时间 2019-11-17

标签精通 css 高级 web 标准解决方案读书笔记栏目 CSS 繁體版

原文原文链接

#第一章基础知识
XHTML，指的是Extendsible Hypertext Marker Language ，当使用(X)HTML这个术语时指的是XHTML和HTML；html

1.1 设计代码的结构web
- 1.1.1 使用有意义的标记浏览器
  - 1 ID和类名
    一个ID名只可以应用于页面上的一个元素，而同一个类名能够应用于页面上任意数量的元素。
    在写类名和ID名时，须要注意区分大小写。CSS大致上是不区分大小写的语言。可是在标记中实体好比类名和ID名）是否区分大小写取决于标记语言是否区分大小写。若是使用XHTML，那么类名和ID名是区分大小写的；若是使用常规的HTML，那么是不区分大小写的。处理这个问题最好的方式是保持一致的命名约定。
  - 2 div和Span
- 1.1.2 文档类型、DOCTYPE切换和浏览器模式
  DTD（文档类型定义）是一组机器可读的规则，他们定义XML或（X）HTML的特定版本中容许有什么，不容许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性而且采起相应的措施。浏览器经过分析页面的DOCTYPE声明来了解使用哪一个DTD，所以知道要使用（X）HTML的哪一个版本。
  DOCTYPE声明是(X)HTML文档开头处的一行或两行代码，它描述哪一个DTD。在下面的示例中，要使用的DTD是XML
  1.0 Strict的DTD：dom
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
  DOCTYPE一般（但不老是）包含指定的DTD文件的URL。浏览器通常不读取这些文件，而是只识别常见的DOCTYPE声明。设计
  - 1 有效性检验code
  - 2 浏览器模式htm
  - 3 DOCTYPE切换
    浏览器根据DOCTYPE是否存在以及使用的DTD来选择要使用的表现方法。若是XHTML文档包含形式完整的DOCTYPE，那么它通常以标准模式表现。对于HTML4.01文档，包含严格DTD的DOCTYPE经常致使页面以标准模式表现。包含过分DTD和URI的DOCTYPE也致使页面以标准模式表现，可是有过分DTD而没有URI会致使页面以怪异模式表现。DOCTYPE不存在或形式不正确会致使HTML和XHTML文档以怪异模式表现。根据DOCTYPE是否存在选择表现方法的效果被称为DOCTYPE切换（DOCTYPE switching）或DOCTYPE侦测（DOCTYPE sniffing）。并不是全部浏览器都采用这些规则，可是这些规则很好地说明了DOCTYPE切换的工做方式。Eric Meyer什么研究了这个主题，而且制做了一张图表（http://meyerweb.com/dom/dtype/dtype-grid.html)来讲明不一样的浏览器如何根据DOCTYPE声明选择表现方法。
    DOCTYPE切换是浏览器用例区分遗留文档和符合标准的文档的手段。不管是否编写了有效的CSS，若是选择了错误的DOCTYPE，那么页面就将以怪异模式表现，其表现就可能会有错误或不可预测。所以，必定要在站点的每一个页面上包含形式完整的DOCTYPE声明，而且在使用HTML时严格选择DTD。文档
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/DTD/xhtml1-transitional.dtd">  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
1.2 为样式找到目标get
- 1.2.1 经常使用的选择器
  最经常使用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，好比段落、锚或标题元素，只须要指定但愿应用样式的元素的名称，类型选择器有时候也成为元素选择器或简单选择器。it
```
p{color:balck;}
     a{text-decoration: underline;}
     h1{font-weight:bold;}
```
后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其余两个选择器之间的空格表示。在下面的示例中，只在做为列表项的后代的锚元素上应用样式，而段落中的锚不受影响。
```
li a{text-decoration:none;}
```
这两种选择器适合于应用那些应用范围广的通常性样式。要想寻找更特定的元素，可使用ID选择器和类选择器。ID选择器由一个#字符表示，类选择器由一个点号表示。
```
#intro{font-weight:bold;}
    .datePosted{color:green;}

    <p id="intro">Some Text</p>
    <p class="datePosted">24/3/2006</p>
```