HTML学习第十章------CSS盒模式及多样式表

HTML学习第十章------CSS盒模式及多样式表

教材：Head First HTML与CSS

---

line-height属性控制行间距， 例如：

body{
line-height: 1.3em;
}

将行间距调整为字体的1.3倍。同样可以通过百分比及指定像素大小来进行调整。

CSS的盒模式

CSS将每个单一的元素看作是一个盒子。

• 内容区：放置元素内容。
• 补白：在内容区和边框之间创建可视的空白。
• 边框：视觉上将内容和同一页其他元素分隔，可以用CSS控制边框宽度， 颜色和样式。
• 边界：包围着边框，在同一页元素之间添加一部分空白空间。

通过对这几个部分结合起来创造出不同的视觉效果。

补白与边界都是透明的，呈现背景颜色或背景图像。但是元素的背景颜色(或背景图像)会延伸到补白底下，但不会到边界。

为类添加这些东西：

.guarantee{
	border-color: black; /*边框颜色*/
	border-width: 1px; /*边框粗细*/
	border-style: solid; /*实线边框*/
	background-color: #a7cece; /*元素背景颜色*/
	padding: 25px;  /*补白，上下左右各添加25像素*/
	padding-left: 80px; /*将左侧留白尺寸设置为80像素*/
	margin: 30px; /*四周(上下左右都有)添加30像素的边界*/
	margin-right: 250px; /*增加右侧边界大小*/
	background-image: url(images/background.gif); /*为元素设置背景图像*/
	background-repeat: no-repeat;
	background-position: top left; 
}

背景图片可以通过相对路径或完整的url(http://…)来进行访问。

background-repeat和background-position来控制背景图像的重复和位置。

将左侧留白尺寸设置为别的大小：

padding: 25px;  /*补白，上下左右各添加25像素*/
padding-left: 80px; /*将左侧留白尺寸设置为80像素*/

顺序很重要，否则会覆盖掉之前的设置。

增加右侧边界大小：

margin: 30px;
margin-right: 250px;

---

边框的设置

边框样式：border-style

边框宽度以及颜色：border-width和 border-color

针对边框某一侧进行单独设置：
top是上边框， bottom是下边框， left左边框， right右边框。

---

id属性

将同一个样式应用于多个元素时，用class来进行定义；当只应用于一个样式时， 用id属性。

注意点：

如何在CSS中使用？

将一个CSS文件应用多个网页时，如果这些网页有相同名称的id的元素时(一个网页中没有相同id的元素，但不同网页间可以)，就需要通过在CSS文件中指定id的元素种类来进行有区别地生成样式。

---

使用多样式表

当网页数量多了之后，想要在之前网页样式的基础上为新网页添加一些新的规则进去时，就需要使用多样式表。样式表的顺序很重要，后面的样式会覆盖前面的样式，最下面的样式表优先级最高。

为不同的设备设置不同的样式时，也可以通过多样式表来实现。在每个样式表中定义该样式文件对应的设备类型。
<link>元素的media属性来实现：

---

总结