盒模型
盒模型是CSS看待元素的方式:
内容区
每个元素都有内容,如文本、图片。
内边距padding
内容区周围的边距。
边框border
包裹内边距的线。
外边距margin
包围着边框。
.guarantee{
border-color:black;
border-width:1px;
border-style:solid;
/**边框黑色实线*/
background-color:#a7cece;
/*背景颜色*/
padding:25px;
padding-left:50px;
margin:30px;
/**内边距25像素,外边距30像素*/
background-image:url(images/background.gif);
background-repeat:no-repeat;
background-position:top left;
/**背景图片不重复、位置左上*/
}
标识元素
我们接触过在<a>
中使用id,然后跳转至id处。
然而,id还有种用法:
#footer{
color:red;
}
p#head{
color:red;
}
/**可以理解为class的单例*/
用id替代class,表明了只有一个元素拥有这个css,而不是一类元素(独一无二)。使用方法:
<p id="head">...</p>
混合样式表
也就是使用多个样式表。
- 样式表的顺序重要么?
重要,从上到下,下面的那个样式表是最优先的(也就是可能覆盖上面的样式表)。
指定媒体类型
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width:480px)">
<link href="lounge-print.css" rel="stylesheet" media="print">
相当于对于不同类型的设备,有不同的css样式表。
或者直接用下面的方法写在css里面:
@media screen and (min-device-width:481px){
#guarantee{
margin-right:250px;
}
}
@media screen and (max-device-width:480px){
#guarantee{
margin-right:30px;
}
}
@media print{
#guarantee{
margin-right:10px;
}
}