CSS和文档结构之间有何关联

元素

元素（Element）是文档结构的基础，在HTML中，最常用的元素很容易识别，
例如：p 、table、span、a、div等。文档中的每个元素都对文档结构的表现起一定的作用。在CSS中，
每个元素都会生成一个框（box，也称为盒），里面包含元素的内容。
<h1>我是一个标题标签</h1>
html标签<h1></h1>就是一个元素，也可以称之为一个盒子（就是一个容器），盒子里面放着
内容“我是一个标题标签”

替换和非替换元素

CSS依赖于元素，但并不是每个元素的创建方法都一样。就像图片和段落就不是同类元素，span和
div也不相同。简单说一下，html中通常有替换元素和非替换元素两种，替换元素（replaced element）
是指替换元素内容的部分，而并不是由文档的内容直接表示。
<img src="" alt=""/>
html当中的<img/>标签不具备具体的内容，是一个空标签，用属性src来获取一个外部内容。
如果不进行src的操作，那么这个标签在文档中没有任何意义。和它相似的有<input/>标签。
大多html和xhtml元素都是非替换元素（nonreplaced element），在浏览器的解释下，它的内容
在本身生成的框中显示。例如：<p>我是非替换元素P的内容</p>

块级元素和行内元素

除了替换元素和非替换元素之外，CSS中还有另外两种基本元素类型：块级（block-level）
元素和行内(inline-level)元素。
块级元素：块级元素生成一个元素框，默认地它会填充其父元素的内容区，旁边不允许有其他元素。
因为使用块级元素的时候，元素默认转行，表示要在新的一行显示自己。最常见的div、p都是块级元素。
替换元素可以是块级元素，不过通常都不是。
行内元素：行内元素在一个文本行内生成元素框，但是不会默认转行，也就是不会在新的一行显示
自己。也因此可以出现在其他的元素之中。常见的a、span标签就是行内元素。

文档和CSS关联的多种方式

1、link标记的使用
使用<link rel="stylesheet" type="text/css" href="">来链接样式表和文档。使用的时候
放在文档的头部。
2、style元素的使用
使用<style type="text/css"></style>元素包含样式表，同样地也放在文档头部。
3、使用@import指令将样式表引用到文档之间
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
4、内联样式
在文档的元素上直接使用
<p style="background: #111;">又来一个段落</p>