结构化网页可以帮助搜索，比如提取文章标题，某一段落；
高级页面变现只能应用于某种文档结构。假设有这样一个页面，其中只显示了小节标题，个标题旁分别有一个箭头。用户可以决定哪些小节标题对他来说需要深入了解，点
击相应的箭头就能显示出这一节的文本。
前端做页面设计，以及一些交互。
CSS还规定了<u>冲突规则</u>，这些规则统称为层叠（cascade）.
CSS可以减少下载时间。
元素(element)是文档结构的基础。如：p, table, span, a和div. 每个元素生成一个框(box,也称为盒)，其中包含元素的内容。
第一种分类
替换元素
例如：img就是替换元素，[站外图片上传中……(1)]
非替换元素
<span>hi there</span>
第二种分类
块级元素（block-level）
替换元素 (inline-level)
<body>
<p>This is a pragraph with <em> an inline element </em> within it.</p>
</body>
这里有两个块元素（body和p）和一个行内元素（em）.
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
属性
- rel代表关系（relation）,在这里关系为styleshee。
- type总是设置为text/css。这个值描述了使用link标记加载的数据的类型。
- 最后还有一个media属性。这里使用的值是all,说明这个样式表要应用于所有表现媒体。
@import指令
@import url(sheet2.css);
与link类似，@import用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。可以看到，@import出现在style
容器中。它必须放在这里，也就是要放在其他CSS规则之前，否则将根本不起作用。考虑下面的例子：
<style type="text/css">
@import url(styles.css); /*@import comes first*/
h1 {color:gray;}
</style>
警告：许多较老的浏览器无法处理不同形式的@import指令。可以适当利用这一点，对这些浏览器“隐藏”样式
与link一样，可以限制所导入的
内联样式
<p style="color: gray;">
The most wonderful fo all breakfast foods is the waffle.
</p>
通常并不推荐使用style属性。如果把样本放在style属性中，会抵消CSS的一些重要有点，如原本CSS可以组织管理能控制整个文档外观（或者一个Web服务器上所有文档
的外观）的集中式样式，而内联样式会削弱这个功能。不过，内联样式确实提供了更大的灵活性。
通配选择器(universal selector),显示为一个星号（）*
这个选择器可以与任何元素匹配，就像是一个通配符。
注意：声明是以分号结尾的；
类选择器
要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。
*.warning{ font-weight:bold;}
选择器为所有元素
p.warning{font-weight: bold;}
选择器现在会匹配class属性包含warning的所有元素p元素，但是其他任何类型的元素都不匹配，不论是否有此class属性。
p.warning{ font-weight:bold;}
span.warning{ font-style: italic;}
html:
<p class="warning"> When handling plutonium, care must be taken to avoid the formation of a critical mass.</p><p> With plutonium, <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>.This can be accomplished by keeping the various masses separate.</p>
结果：
When handling plutonium, care must be taken to avoid the formation of a critical mass.
With plutonium, the possibility of implosion is very real, and must be avoided at all costs.This can be accomplished by keeping the various masses separate.
- class中同时包含warning和urgent的所有元素还有一个银色的背景，就可以写作：
.warning .urgent {background: silver;}
通过这两个类选择器连接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）这个我做测试，不行呀。
-
简单属性选择
如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。例如，要选择有class属性（值不限）的所有h1元素，使其文本为银色，可以写作：
h1[class] {color: silver;}
已经验证，这种用法可以。
h1[class] {color: silver;}
html:
<h1 class="hoopla">Hello</h1><h1 class="severe">Serenity</h1><h1 class="fancy">Fooling</h1>
- 如果你想把包含标题（title）信息的所有元素变为粗体显示（光标停留在这些元素上时大多数浏览器都会将其显示为“工具提示”），就可以写作：
*[title] {font-weight: bold;}
- 为了将同时有href和title属性的html超链接的文本置为粗体，可以写作：
a[href][title] {font-weight: bold;}
网友评论