不能对内边距和外边距指定颜色,也不能加任何装饰。元素的背景颜色(或背景图像)会延伸到内边距,但不会延伸到外边距。
.guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;
border-color: white;
border-width: 1px;
border-style: dashed;/*solid实线,dashed虚线; 边框宽度:thin, medium, shick, 1px, ……; 可以指定任一边框的值,border-top-color/width/style*/
background-color: #a7cece;
padding: 25px;
padding-left: 80px;/*放在padding之后可以覆盖原值*/
margin: 30px;
margin-right: 250px;
background-image: url(image/background.gif);/*可以是相对路径,也可以是绝对路径;url两边不需要加引号*/
background-repeat: no-repeat;/*no-repeat不重复,repeat-x水平方向重复,repeat-y垂直方向上重复,inherit按父元素设置*/
background-position: top-left;
}
- 指定边框圆角
1、指定4角:
border-radius: 15px;
2、单独指定各角:
border-top-left-radius: 3em;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
border-bottom-left-radius: 3em;
- 使用多个样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="corporate.css">
<link type="text/css" rel="stylesheet" href="branch-one.css">
<link type="text/css" rel="stylesheet" href="branch-two.css">/*顺序很重要,下面的样式表会覆盖上面的样式表*/
</head>
<body>
.
.
.
</body>
</html>
- 媒体查询
1、外部样式表,根据不同设备的屏幕大小设置样式表
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width:481px)">/*屏幕横向像素高于480*/
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width:480px)">/*屏幕横向像素低于480*/
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">/*打印显示*/
2、直接在css中新增媒体查询
@media screen and (min-width: 481px) {
#guarantee {
margin-right: 250px;
}
}
@media screen and (max-width:480px) {
#guarantee {
margin-right: 30px;
}
}
@media print {
body {
font-family: Times, "Times New Roman", serif;
}
}