z
032.字體的樣式
.p1{
color: red;
font-size: 30px;
/*font-family:arial;*/
font-family:華文彩云,arial,微軟雅黑;（用逗號(hào)來(lái)進(jìn)行分割）
font-family:“segoe Script”(字體如果有空格的時(shí)候一定要用引號(hào))
}
</style
不支持的字體會(huì)變成瀏覽器自帶字體
033.字體的分類
<!--
在網(wǎng)頁(yè)中將字體分成5大類：
serif （襯線字體）：宋體
sans-serif(非襯線字體) ：雅黑
monospace （等寬字體）
cursive （草書(shū)字體）
fantasy （虛幻字體）
-->
034.字體的其它樣式
font-style: italic;（斜體）
font-weight: bold（100-900）;（粗體）
font-variant: small-caps; （加粗，小型大寫(xiě)）
font-family:微軟雅黑；（字體樣式）
.p3{
font: italic small-caps bold 60px "微軟雅黑";
}
簡(jiǎn)便模式 (不同格式用空格隔開(kāi))（字號(hào)和字體必須寫(xiě)）
035.行間距
行間距=行高-字號(hào)（行間距=height-size）
.p1{
line-height: 40px;
line-size: 20px;
}
上下間距變大了
也可以用百分號(hào)（行間距=size*height%-size）
還有數(shù)字（行間距=size*height-size）
.box{
width: 200px;
height: 200px;
background-color: #bfa;
line-height: 200px;（垂直居中）
}
.p2{
font :30px/50px "微軟雅黑";（字體大小為30 行高為20）
}
036.文本的樣式
.p1{
text-transform: capitalize;（首字母變大寫(xiě)）
}
.p1{
text-transform:uppercase ;(所有字母變大寫(xiě))
}
.p1{
text-transform: owercase;（都變小寫(xiě)）
}
.p2{
text-decoration: underline;（下劃線）
}
.p2{
text-decoration: overline;（上劃線）
}
.p2{
text-decoration: line-through;(刪除線)
}
a{
text-decoration: none;（去掉下劃線）
}
.p3{
letter-spacing: 10px;（字符間距（英漢都可以））
}
.p3{
word-spacing: 10px;（單詞之間設(shè)置距離）
}
.p4{
text-align: left;（靠左）
}
.p4{
text-align:right;（靠右）
}
.p4{
text-align:center;（居中）
}
.p4{
text-align:justify;（倆端對(duì)齊）
}
.p5{
font-size: 40px;
text-indent: 2em;（首航縮進(jìn)（1個(gè)em=一個(gè)字））
}
037.盒模型
p元素 h1元素也算是盒子
內(nèi)容區(qū)（content）?
內(nèi)邊距（padding）
邊框（border）
外邊距（margin）?
038.邊框
1：
.box1{
width: 100px; ? ? （內(nèi)容區(qū)的寬和高）
height: 100px;
baxkground-color: #bfa;
border-width: 10px; ? ? ?。╞order-width: 10px? 20px 30px 40px ;（上右下左順時(shí)針設(shè)置）border-width: 10px? 20px 30px ；（上）右下）border-width: 10px? 20px? ；（左右））【邊框?qū)挕?/b>
border-color:red;（三個(gè)都不可缺）（border-color:red yellow orange blue;（上右下左））【邊框顏色】
border-style:solid;（border-style: solid dotted dashed double;（實(shí)線 點(diǎn)裝的 虛線 雙線））【邊框樣式】
}
2：
.box{
width: 100px;
height: 100px;
background-color: #bfa;
/*border-width: 10px;*/
/*border-color: red;*/
border-style: solid;（可以只要最后一個(gè)）
border: 10px red solid;(結(jié)合)
}
039.內(nèi)邊距
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
padding-top（right，bottom，left）: 100px;【上內(nèi)邊距（內(nèi)邊距可以影響盒子的大小）】
padding：100px 200px 300px；（上（左右）下）
padding：100px 200px 300px 400px；（上右下左）
}
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
【box2把box1占滿了 只是把內(nèi)容區(qū)占滿了】
040.外邊距
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border:10px solid red;
margin-top: 100px;（與body的上外間距為100）
【margin-left: 100px;(與body的左外間距為100)】
【margin-right: 100px;(與body的右外間距為100)】
【margin-bottom: 100px;(與body的下外間距為100)】
如果是負(fù)數(shù)的話往上挪
margin-left: auto;(左邊會(huì)設(shè)置為最大值 ? 只給水平方向設(shè))
margin-left:auto;（右邊最大值，倆都設(shè) 居中，只適合內(nèi)邊距）
margin：50 auto；（上下50居中）
}
041.外邊距重疊
垂直方向的外邊距是重疊的（取最大值）
子元素設(shè)置外邊距會(huì)傳遞給父級(jí)
border-top: 1px red solid;(子元素可以向下移動(dòng)，加在box后面)
padding-top:1px;(可以加到box后面【沒(méi)有顏色】)高度上面可以拋出去
042.瀏覽器默認(rèn)樣式
*{
margin: 0;
padding: 0;
}
清除瀏覽器的默認(rèn)樣式
