多個元素可以使用類,單個可以使用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; //內(nèi)邊距
padding-left: 80px; //順序很重要屯吊,后設(shè)置的覆蓋之前的。
margin: 30px; //外邊距
background-image: url(images/background.gif);
background-repeat: no-repeat; //圖像不重復(fù)摹菠。repeat-x,repeat-y,按照x盒卸,和y方向重復(fù)。inherit是按照父類的設(shè)置來處理次氨。
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">//媒體類型為打印機(jī)的才會使用這個樣式表煮寡。
<link href="lounge-print.css" > rel="stylesheet" media="screen and (max-device-width: 480px">//指定了有屏幕的設(shè)備并且寬度不能抄過480px虹蓄。
也可以這樣:
@media screen and (max-device-width: 480px){
#apple{
margin:20px;
}
}
QQ20160425-0@2x.png
QQ20160425-1@2x.png