Head first html and css学习笔记5

第9章介绍盒模型的结构、各部分参数的指定规则；通过应用于特定元素的CSS样式引出了id属性，id选择器；以及应用到不同媒体时需指定的媒体样式@media。

盒模型

     

从htm页面截了个图片。CSS把每个元素看作一个box，盒子由内容区和可选的内边距、边框和外边距组成。其中内、外边距透明、没有颜色，也没有自己的装饰。边框可以有不同的宽度、颜色、样式、圆角。其中边框的样式、宽度、颜色可按四条边指定，即

1. border-top-color:
2. border-bottom-width:
3. border-left-style:
4. border-right-width：

边框角可以按四个角指定

1. border-top-left-redius:
2. border-top-right-radius:
3. border-bottom-left-radius:
4. border-bottom-right-radius:

完整的id选择器CSS指定如下：

#guarantee {
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.9em;               /*指定行高*/
	font-style: italic;
	color: #444;
	
	border-color: white;
	border-width: 1px;                /*可以使用关键字thin、medium、或thick指定，或者像素数*/
	border-style: dashed;             /*关键字：solid、double、groove、outset、dotted、dashed、inset、ridge*/
	background-color: #a7cece;
	
	padding :25px;                    /*内边距25像素*/
	padding-left: 80px;               /*指定左内边距，注意先指定padding，再指定特定的内边距，否则会被覆盖*/
	
	
	
	margin: 30px;                     /*外边距30像素*/
	margin-right: 250px;              /*指定右外边距*/
	
	background-image: url(images/background.gif);       /*为元素增加背景图像*/
	background-repeat: no-repeat;                       /*修正图像，repeat为默认行为，还有repeat-x、repeat-y、inherit值*/
	background-position: top-left;
}

类选择器

每个元素只能有一个id，页面不允许多个元素有相同的id。类选择器以#开头，可写为#id-name 或者 element-name#id-name。id和类名的命名规则：类名要以一个字母开头，不过id名可以以一个数字或字母开头。id和类名都可以包括字母、数字以及_字符，但不能有空格。

媒体选择器

通过媒体选择器，样式表不再只面向浏览器。可以通过在<link>新增media属性指定设备样式文件，或者在CSS文件中增加媒体查询。用@ media screen and （xxx）{  xxx}来包含应用到该媒体的CSS样式。通常采用第一种方法，因为第二种方法会使CSS文件变得更庞大。