盒模型
-
從css的角度看,網(wǎng)頁(yè)中的每個(gè)元素都可以看做是一個(gè)盒模型九昧,每個(gè)盒子組成成分由里到外依次為:
1.content aera:內(nèi)容區(qū)
2.padding:透明內(nèi)邊距框
3.border:邊框
4.margin:透明外邊距框
模型圖如下所示:
盒模型 - 對(duì)盒模型的不同部分的參數(shù)進(jìn)行調(diào)整得到想要的不同效果尉咕,屬性參數(shù)調(diào)整給出一個(gè)示例如下:
.guarantee{
line-height: 1.9em; //行間距
font-style: italic;
border-color: #d2b48c;
border-width: 5px;
border-style:dashed;
border-top-color: blue; //注意和上面的border-corlor順序
border-radius: 20px; //邊框角半徑
color:#554444; //字體顏色
background-color: #a7cece; //背景顏色
padding:25px; //內(nèi)間距
padding-left: 220px; //左內(nèi)間距
margin: 30px; //外邊框
background-image: url(images/background.png); //背景圖
background-repeat: repet-x; //背景圖設(shè)置
background-position: top left;
background-size: 55em;
}
效果圖如下:
效果圖
-
ID屬性
id與class的區(qū)別為id選擇器只與頁(yè)面中的一個(gè)元素匹配叠蝇。
<p id="footer">...</p>
css中如下:
#footer{ //或p#footer
color:red;
}
-
使用多個(gè)樣式表
使用多個(gè)樣式表可以指定修改某些樣式,使結(jié)構(gòu)更加清晰年缎,方便修改悔捶。多個(gè)樣式表的順序很重要,下面的css樣式表最為優(yōu)先单芜。在html文件中head部分中添加如下:
<link type="text/css" href="ex1.css" rel="stylesheet">
<link type="text/css" href="ex2.css" rel="stylesheet">
<link type="text/css" href="ex3.css" rel="stylesheet">
...
-
指定媒體類型
圍在不同設(shè)備上有不同的顯示蜕该,可為同一個(gè)html文件設(shè)計(jì)多個(gè)樣式表。為css指定特定屬性的設(shè)備即可洲鸠,有兩種方法:
①在html文件head部分中:
<link type="text/css" href="ex1.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
其中:
screen意味查詢指定有屏幕的設(shè)備
max-device-width意味屏幕寬度的最大值
②直接在css中添加媒體查詢
使用@media規(guī)則堂淡,直接將下語(yǔ)句寫在css中:
@media screen and (min-device-width: 480px){
p{
margin-right:25px;
}
...
}