《Head First HTML与CSS》笔记——9 盒模型

前言

本章我们来仔细研究HTML元素，观察块元素和内联元素的组成。你会发现，通过CSS，对于构造元素的各个方面几乎都可以控制。另外，我们还会了解如何为元素提供唯一身份。

简单的调整——改变文本的行高

盒模型

盒模型介绍

对于盒子能做哪些设置：

实践练习

下面我们来完成以下转变：

1. 首先，找到以"Our guarantee"开头的段落，为这个元素增加一个class属性：
   
2. 打开lounge.css文件，增加CSS样式：
   

边框样式

class 属性 和 id 属性

id 属性

使用id属性并不需要学习多少新知识，id与class很类似，唯一的区别是，属性名为id（废话）。一个元素不能有多个id，且页面上不允许多个元素有相同的id。

如何在CSS中使用id

在CSS中，选择class的方法是：

选择id的方法是：

即，把" . " 换成 " # " 。

其他

使用多个样式表

• 样式表的顺序很重要，最下面的样式表最优先。
• 有时要修改样式时，并非修改当前的样式表，而是链接这个样式表，然后在它下面提供自己的样式表。

为不同的设备建立不同的样式表

在<link>元素中，有一个media属性，它可以用来指定设备的样式文件：

类似的，我们可以创建一个查询来匹配打印机设备：

练习：

直接在CSS中增加媒体查询：

小结