精通CSS高级Web标准解决方案【读书笔记】
2014-01-24 10:43
337 查看
第一章 基础知识
XHTML，指的是Extendsible Hypertext Marker Language ， 当使用(X)HTML这个术语时指的是XHTML和HTML；1.1 设计代码的结构
1.1.1 使用有意义的标记
1 ID和类名
一个ID名只能够应用于页面上的一个元素，而同一个类名可以应用于页面上任意数量的元素。在写类名和ID名时，需要注意区分大小写。CSS大体上是不区分大小写的语言。但是在标记中实体 如果使用常规的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切换（DOCTYPEswitching）或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>使用类型、后代、ID和（或）类几种选择器的组合：
#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1{font-size: 1.2em;}
<div id="mainContent">
<h1>Welcome to my site</h1>
...
</div>
<div id="secondaryContent">
<h1>Latest news</h1>
...
</h1>伪类
有时候，希望根据文档结构之外的其他条件对元素应用样式，这是可以通过伪类选择器来完成。
a:link {color:blue}
a:visite{color:green}
a:hover , a:active {color:red}
tr:hover {background-color:red;}
input:focus{background-color:yellow;}:link和:visited称为链接伪类，只能应用于锚元素。:hover、:active和:focus称为动态伪类，理论上可以应用于任何元素。
1.2.2 通用选择器
通用选择器可能是所有选择器中最强大却最少使用的。*，一般用来对页面上的所有元素应用样式。可以使用以下规则删除每个元素上默认的浏览器填充和空白边：*{
padding: 0 ;
margin: 0 ;
}1.2.3 高级选择器
1 子选择器和相邻同胞选择器
后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。在下面的示例中，外层列表中的列表项显示一个定制的图标， 而嵌套列表中的列表项不受影响：#nav>li {backgorund:url(folder.png)no-repeat left top:}
<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design></li>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>在IE6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，现在所有后代上应用你希望子元素具有的样式。然后，使用通用选择器覆盖子元素的 后代上的样式。所以，要实现与前面的子选择器示例相同的效果，可以这样做：
#nav li * { background:url(folder.png)no-repeat left top;}
#nav li * {backgorund-image:none;}根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题 后面的第一个段落以粗体显示，同时不影响其他段落： h1 + p {font-weight: bold;}
<h1>Main Heading</h1> <p>First Paragraph</p> <p>Second Paragraph</p>
2 属性选择器(Attribute selectors)
属性选择器可以根据某个属性是否存在或属性的值来寻找元素。 For example, when you hover over an element with a title attribute, most browsers will display a tooltip. You can use this behavior to expand the meaning of things such as acronyms and abbreviations:<p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a word.</p>
there is no way to tell that this extra information exists without hovering over the element. To get around this problem, you can use the attribute selector to style acronym elements with titles differently from other elements—in this case, by giving
them a dotted bottom border. You can provide more contextual information by changing the cursor from a pointer to a question mark when the cursor hovers over the element, indicating that this element is different from most.
acronym[title] {
border-bottom: 1px dotted #999;
}
acronym[title]:hover, acronym[title]:focus {
cursor: help;
}In addition to styling an element based on the existence of an attribute, you can apply styles based on a particular value. For instance, sites that are linked to using a rel attribute of nofollow gain no added ranking benefit from Google. The following
rule displays an image next to such links, possibly as a way of showing disapproval of the target site:
a[rel="nofollow"] {
background: url(nofollow.gif) no-repeat right center;
padding-right: 20px;
}All modern browsers including IE 7 support these selectors. However, because IE 6 doesn’t support attribute selectors, you could potentially use them to apply one style to IE 6 and a different style to more capable browsers.
More modern browsers get a color version.
#header {
background: url(branding-bw.png) repeat-y left top;
}
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}Some attributes can have more than one value, separated by spaces. The attribute selector allows you to target an element based on one of those values. For instance, the XFN microformat allows you to define the relationship you have with a site
by adding keywords to the rel attribute of an anchor link. So I can say that a particular site belongs to a work colleague of mine by adding the co-worker keyword to the links in my blogroll. I can then show readers that I work with that person by displaying
a particular icon next to that co-worker’s name.
.blogroll a[rel~="co-worker"] {
background: url(co-worker.gif) no-repeat left center;
}
<ul class="blogroll">
<li>
<a href="http://adactio.com/" rel="friend met colleague co-worker">
Jeremy Keith</a>
</li>
<li>
<a href="http://clagnut.com/" rel="friend met colleague co-worker">
Richard Rutter</a>
</li>
<li>
<a href="http://hicksdesign.com/" rel="friend met colleague">
John Hicks</a>
</li>
<li>
<a href="http:// stuffandnonsense.co.uk/" rel="friend met colleague">
Andy Clarke</a>
</li>
</ul>1.2.4 层叠和特殊性(The cascade and specificity)
CSS通过一个称为层叠（cascade)的过程
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 读书笔记 精通CSS 高级Web标准解决方案（第2版）1~3章
- 读书笔记--精通CSS高级Web标准解决方案（一）---CSS基础
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 读书笔记--精通CSS高级Web标准解决方案（二）---CSS基础之CSS选择器
- 读书笔记--精通CSS高级Web标准解决方案（四）---CSS背景以及圆角框实现
- 读书笔记--精通CSS高级Web标准解决方案（五）---链接样式
- 读书笔记 精通CSS 高级Web标准解决方案（第2版）4~8章
- 读书笔记--精通CSS高级Web标准解决方案（六）---无序列表样式
- 读书笔记 精通CSS 高级Web标准解决方案（第2版）第9章
- 读书笔记--精通CSS高级Web标准解决方案（八）---布局
- 《精通CSS高级WEB标准解决方案》第九章、bug和bug修复
- 精通CSS高级Web标准解决方案（2-1 可视化格式模型之框模型）
- 精通CSS高级Web标准解决方案 Chapter 5 Styling Links
- Html+Css 纯CSS实现的文字提示 （精通CSS高级WEB解决方案）读书笔记
- 精通CSS高级Web标准解决方案（2-2 可视化格式模型之定位概述）
- 精通CSS高级Web标准解决方案（7、布局）
- 《精通CSS-高级Web标准解决方案》阅读计划
- 精通CSS高级Web标准解决方案:空白边叠加
- 精通css高级web标准解决方案
- 精通CSS高级Web标准解决方案:相对定位与绝对定位