《css权威指南》学习笔记一

第一章 css和文档

这一章节是这本书的css入门简介部分。

一、 web的衰落

在html出现以后，网站开始到处涌现，本该表示网站元素的html标签越来越多地被应用到样式领域。元素标签和样式标签混合在一起，难以阅读，不仅如此使用html的一些样式标签来表现画面效果也十分繁琐。

二、css做救星

css具有以下优点：

• 丰富的样式（css能表现出比html更为丰富的样式。）
• 易于使用（简短的语法代替繁琐的html样式标签）
• 可以在多个页面上使用样式（将一个样式应用到多个页面）
• 层叠规则（以层叠的形式决定优先级）
• 缩减文件大小（减小web传输的文件大小，虽然对于现在高效的浏览器来说不是很重要）

三、html元素的分类

1、替换元素和非替换元素

替换元素（replaced element）是指用来替换元素内容的部分并非由文档内容直接表示。
我们最熟悉的替换元素就是<img/>，除非使用它的src属性来指向一个外部内容，否则它将毫无意义。<input/>标签也是同样的道理，要使用type指定它的类型是文本输入框或者按钮，显示时把这元素替换为文本输入框或者按钮。

非替换元素（nonreplaced element）的内容由浏览器在元素本身生成的框中显示。例如<span>hello</span>就是一个非替换元素。

2、块级元素和非块级元素

块级元素（block-level）的特点是在元素框的之前和之后生成了换行符。例如<p></p>和<div></div>都属于块级元素。

行内元素（inline-block）行内元素会在文本行内生成元素框，而不会打断这行文本。例如<a></a>和<span></span>都属于行内元素。

四、css关联html文档的多种方式

1、link标记

首先看一个link标记使用的例子：

<link rel="stylesheet" type="text/css" href="sheet1.css"/>

首先先对上边这个例子做个完整的解释：
link标签用来向html文档中导入一些外部资源。
rel属性用来说明导入的资源与文档之间的关系（relation），这里rel=stylesheet的意思是导入的资源是用来作为html文档的样式表的。
type属性用来表示导入资源的样式是css文件（虽然现在几乎都是使用css来作为html的样式表，但以后还可能出现其他的样式形式）。
href属性用来指向外部资源的位置，在这里也就是css文件的位置。除了使用示例中的相对位置外，也可以使用绝对位置。

1、link标签必须放在head元素中，且必须是head元素的子元素。
2、样式表中只能有样式规则，不能出现html代码。

2、@import指令

使用@import指令也可以导入css样式。

<syle type="text/css">
@import url(sheet1.css)
</style>

@import必须出现在所有样式规则之前，否则会被忽略。

3、style标签

css样式可以直接写在style标签中。

<style type="text/css">
h1 {
	color: gray;
}
</style>

css的注释使用/* 这里写注释 */，和c，java类似，用于注释多行代码。

4、内联样式

如果只想为单个元素指定样式，可以使用html元素的style属性来设置样式。

内联样式不符合内容和样式分离的习惯，尽可能不要使用。