Head first HTML与CSS笔记 part9

盒元素

设置行高

body{
        line-height:1.6em;
}

将行距改为字体大小的1.6倍

盒模型

内容区

每个元素都有一些内容，如文本和图像，这些内容会放在一个小盒子中，这个盒子的大小正好包含所有内容，注意，在内容区中，内容和盒子边缘没有空间

内边距

所有盒子在内容区周围可能有一层内边距，内边距是可选的，所以不一定有，不过通过使用内边距，可以在内容和盒子边框之间创建一些看得见的空间。内边距是透明的，没有颜色，有没有装饰

边框

元素周围可以有一个可选边框，这个边框包围内边距，另外，因为他是围绕内容的一条线，这就从页面上使内容与同一页面的其他元素隔开。边框可以有各种不同的宽度、样式、颜色

外边距

外边距也是可选的包围着边框。利用外边距，可以在同一页面的不同元素之间增加空间。如果两个盒子紧挨着，外边距就等于他们之间的空间，类似于内边距，外边距也是透明的，本身没有颜色或者装饰

.guarantee{
border-color:black;
border-style:solid;
border-width:1px;
background-color:#acbb56;
padding:25px;
margin:30px;
}

在guarantee类中为其所有元素添加一个一像素宽黑色的实线框
padding:25px表示在内容的四周增加25像素的内边距
margin:30px表示在内容的四周增加30像素的外边距

边框样式

有8种边框样式，如border-style:solid;

边框宽度

border-width:1px;
border-width:thin;
关键词可以是thin ,medium,thick

效果图如下：

如果只想在左边设置内边距可以写成padding-left:25px;其他方向同理
加外边距同理，如margin-right:30px;

指定具体边框的一些设置

指定边框圆角

增加背景图像

background-image属性用途非常特定，它只是要设置一个元素的背景图像。这个属性并不是用来在页面中放置图像，想要放置图像还是要使用img元素，使用background-image属性的唯一理由就是让元素更具有吸引力

.guarantee{
border-color:white;
border-style:dashed;
border-width:1px;
background-color:#acbb56;
padding:25px;
margin:30px;
background-image:url(test.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}

默认的背景图像会重复，使用background-repeat:no-repeat可以消除重复，另外浏览器一般会默认地把背景图像放在元素地左上角，也可以通过background-position:bottom left去设置图片的位置,这里将图片的位置设置到左下方
background-repeat属性值可以是no-repeat,repeat-x(只在水平方向上重复），repeat-y(只在垂直方向上重复），inherit按父元素的设置来处理

id属性

相对多个元素使用某个样式时就要使用class,而如果只对一个元素增加样式，或者页面上只有一个元素时就要使用id元素
每个元素只能有一个id元素，不过一个元素可以属于多个类
id名种不允许出现空格或者其他特殊符号
id选择器只与页面的一个元素匹配
html文件

<p id="footer">.....</p>

CSS文件

#footer{
			color:red;
}

选择id为footer的所有元素

p#footer{
			color:red;
}

选择id为footer的< p > 元素
补充：类名要以一个字母开头，id名可以是数字或者字母开头。id和类名都可以包含字母、数字以及下划线，但不能有空格

使用多个样式表

使用多个样式表时，样式表的顺序很重要

指定特定设备的属性的两种方式

在< link > 元素种增加media属性，指定使用适用于该设备的样式文件

直接在CSS种增加媒体查询

采用这种方式，@media规则中只包含特定于一种媒体类型的CSS规则，在CSS文件中，要把对所有媒体类型都通用的规则放在@media规则下面。另外浏览器加载页面时，它会通过媒体类型来确定页面适用的规则，而将不匹配的规则忽略。