多个元素可以使用类，单个可以使用id="apple"；
<p class="apple"></p>
.apple
{line-height: 1.5em;
font-style: italic;
font-family: Georgia,"Times New Roman",Times,serif;
color: #444444;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px; //内边距
padding-left: 80px; //顺序很重要，后设置的覆盖之前的。
margin: 30px; //外边距
background-image: url(images/background.gif);
background-repeat: no-repeat; //图像不重复。repeat-x,repeat-y,按照x，和y方向重复。inherit是按照父类的设置来处理。
background-position: top left;
QQ20160425-3@2x.png
QQ20160425-4@2x.png
QQ20160425-5@2x.png
QQ20160425-6@2x.png
使用多个样式表:顺序很重要，下面的覆盖上面的。
QQ20160425-7@2x.png
媒体匹配：
<link href="lounge-print.css" > rel="stylesheet" media="print">//媒体类型为打印机的才会使用这个样式表。
<link href="lounge-print.css" > rel="stylesheet" media="screen and (max-device-width: 480px">//指定了有屏幕的设备并且宽度不能抄过480px。
也可以这样：
@media screen and (max-device-width: 480px){
#apple{
margin:20px;
}
}
QQ20160425-0@2x.png
QQ20160425-1@2x.png
