第一章 基础知识
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切换（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>
使用类型、后代、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)
The cascade works by assigning an importance to each rule. Author style sheets are those written by the site developers and are considered the most important. Users can apply their own styles via the browser and these are considered the next most important. Finally, the default style sheets used by your browser or user agent are given the least importance so you can always override them. To give users more control, they can override any rule by specifying it as !important even a rule flagged as !important by the author. This is to allow for specific accessibility needs such as using a medium contrast user style sheet if you have a certain forms of dyslexia. So the cascade works in the following order of importance:
- User styles flagged as !important
- Author styles flagged as !important
- Author styles
- User styles
- Styles applied by the browser/user agent Rules are then ordered by how specific the selector is. Rules with more specific selectors override those with less specific ones. If two rules are equally specific, the last one defined takes precedence.
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
