《Head First HTML与CSS》笔记——7 CSS入门

介绍

如果将Web中的内容以人做比喻，HTML相当于人体的骨架，CSS是穿着与打扮，Javascript则是动作行为。前面的内容都在介绍HTML创建Web页面结构。从这张开始，我们学习利用CSS掌握页面的表现。

结合HTML和CSS

从<p>元素开始

假设我们想把HTML中，<p>元素的墙（背景）漆成红色，可以这样做:

规则即为：

				p { background-color: red; }

加入想为段落再增加一个边框，可以这样：

把CSS放入HTML

了解CSS语法之后，我们已经知道如何选择一个元素(<p>元素)，然后写一个规则了(包含属性和属性值)。下面，我们来看如何把CSS放到某个HTML中。

继续以 Starbuzz 咖啡馆为例：

我们可以把刚才对<p>元素的规则放在里面，同时，也可以增加其他内容：

• 对标题加样式：
  

• 在欢迎消息下面加一条线
  

• 只为<h1>指定第二个规则，而不对<h2>使用
  

选择器的工作方式

我们已经看到如何选择一个元素来增加样式：

也看到了选择多个元素的情况：

通过图来研究选择器：

创建 .CSS 文件

下面我们创建一个css文件，来包含所有Head First休闲室页面的样式规则：

注意：css文件中只包含CSS，不能包含HTML。所以，不能带<style>和</style>标记。

从“lounge.html”链接到外部样式表

CSS中的继承

覆盖继承

在CSS中写注释

要在CSS中写注释，只需要把注释包围在/* 和 */之间，比如：

/* 这个规则没有任何效果，因为它在一个注释里 */

注释可以跨越多行。

把元素增加到greentea类

关于应用样式的最简短最快捷的指南

验证CSS

像验证HTML一样，可以在http://jigsaw.w3.org/css-validator/中验证CSS的结构是否合规。

小结