盒模型
-
從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;
}
...
}
