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

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

1.1 设计代码的结构
- 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：
```
  <!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 有效性检验
  - 2 浏览器模式
  - 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 为样式找到目标
- 1.2.1 常用的选择器
  最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，比如段落、锚或标题元素，只需要指定希望应用样式的元素的名称，类型选择器有时候也成为元素选择器或简单选择器。
```
     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>
```

来源：oschina

链接：https://my.oschina.net/u/251320/blog/195334

标签

css选择器

html代码

html语言

css

web标准

css样式