行高和字號
- 行高
CSS中榛丢，所有的行，都有行高挺庞，盒模型的padding,絕對不是直接作用在文字上的晰赞，而是作用在行上的。為了保證字在行里面居中选侨，行高掖鱼、字號，一般都是偶數(shù)援制，他們的差就是偶數(shù)戏挡，就能被2整除。
- 單行文本垂直居中
單行文本垂直居中(行高= 盒子高),只適合單行文本垂直居中晨仑，而不適用多行褐墅。
p{
height:40px;
line-height:40px
}
- 多行文本居中需計算
p{
width: 200px;
/*height: 200px;*/
line-height: 20px;
font-size: 20px;
text-indent: 2em;
border: 2px solid fuchsia;
padding: 60px;
}
多行文本居中需計算.png
- font屬性
1)使用font屬性，能夠?qū)⒆痔柡榧骸⑿懈咄椎省⒆煮w，能夠一起設(shè)置答捕。
font: 14px/24px “宋體”;
等價于：
font-size:14px;
line-height:24px;
font-family:"宋體";
- 網(wǎng)頁中不是所有字體都能用的逝钥，因為這個字體要看用戶的電腦里面裝沒裝，比如你設(shè)置：
font-family: "華文仿宋";如果用戶電腦里面沒有這個字體拱镐，那么就會變成宋體艘款。
頁面中，中文我們只使用： 微軟雅黑沃琅、宋體哗咆、黑體。 如果頁面中阵难，需要其他的字體岳枷，那么需要切圖。
英語：Arial呜叫、Times New Roman - 為了防止用戶電腦里面空繁，沒有微軟雅黑這個字體。就要用英語的逗號朱庆，隔開備選字體盛泡，就是說如果用戶電腦里面，沒有安裝微軟雅黑字體娱颊，那么就是宋體：
font-family: "微軟雅黑","宋體";
備選字體可以有無數(shù)個傲诵，用逗號隔開凯砍。 - 我們要將英語字體，放在最前面拴竹，這樣所有的中文悟衩，就不能匹配英語字體，就自動的變?yōu)楹竺娴闹形淖煮w：
font-family: "Times New Roman","微軟雅黑","宋體";
- 所有的中文字體栓拜，都有英語別名座泳，我們也要知道：
//微軟雅黑的英語別名
font-family: "Microsoft YaHei";
//宋體的英語別名
font-family: "SimSun";
font屬性能夠?qū)?code>font-size、line-height幕与、font-family合三為一：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
- 行高可以用百分比挑势，表示字號的百分之多少。一般來說啦鸣，都是大于100%的潮饱，因為行高一定要大于字號。
font:12px/200% “宋體”
等價于
font:12px/24px “宋體”;
反過來诫给，比如：
font:16px/48px “宋體”;
等價于
font:16px/300% “宋體”
超鏈接
<a href= "#"></a> //#代表跳轉(zhuǎn)到當(dāng)前頁面
<a target="_blank">百度</a> //代表重新打開新的界面跳轉(zhuǎn)到百度
a標(biāo)簽有4種偽類(觸發(fā)某些操作才去執(zhí)行,同一個標(biāo)簽香拉，根據(jù)用戶的某種狀態(tài)不同，有不同的樣式)
a:link{ //用戶從沒有點擊過這個鏈接的樣式
color:red;
}
a:visited{ //用戶訪問過了這個鏈接的樣式
color:grey;
}
a:hover{ //用戶懸浮在元素上方時的樣式
color:blue;
}
a:active{ //用戶點擊鏈接蝙搔，但是沒有松手時的樣式
color:pink;
}
這四種狀態(tài)缕溉，在css中，需按照固定的順序?qū)?如果不按照順序?qū)懗孕停敲磳еづ福喎Q“愛恨準(zhǔn)則”:love hate(L-V-H-A).
a標(biāo)簽中描述盒子；偽類中描述文字的樣式勤晚、背景枉层。將a標(biāo)簽寫在前面，偽類寫在后面
.nav ul li a{
display: block;
width: 120px;
height: 60px;
}
.nav ul li a:link, .nav ul li a:visited{
color: white;
text-decoration: none;
background-color: gold;
}
/*因為上面link中已經(jīng)設(shè)置了text-decoration 所以這里就不需要再設(shè)置一遍*/
.nav ul li a:hover{
background-color: fuchsia;
}
注意:所有的a標(biāo)簽不繼承text赐写、font等屬性鸟蜡。
a:link、a:visited都是可以省略的挺邀，簡寫在a標(biāo)簽里面揉忘，即a標(biāo)簽涵蓋了link、visited的狀態(tài)端铛。
.nav ul li a{
display: block;
width: 120px;
height: 60px;
color: white;
text-decoration: none;
background-color: gold;
}
/*因為上面link中已經(jīng)設(shè)置了text-decoration */
.nav ul li a:hover{
background-color: fuchsia;
}
background屬性
- background-color 屬性
表示法:泣矛、字面含義、rgb禾蚕、16進制表示法您朽。
#000 黑
#fff 白
#f00 紅
#333 灰
#222 深灰
#ccc 淺灰
- background-image
background-image: url("qq.png");url()表示地址。bg.jpg是相對路徑
相對路徑：資源在當(dāng)前的項目中换淆，.,././中
絕對路徑：資源不在當(dāng)前的項目中哗总，http://几颜、https://、ftp://讯屈、file://
body{
background-image: url("qq.png");
/*background-repeat:no-repeat;*/ //不重復(fù)
/*background-repeat:repeat-x;*/ //橫向重復(fù)
background-repeat:repeat-y; //縱向重復(fù)
}
background-repeat屬性的幾種情況
.png
- background-position
- 用像素描述
background-position：背景定位屬性蛋哭，定位屬性可以是負(fù)數(shù)
background-position：向右移動量 向下移動量;
background-position：100px 50px;
- 用單詞描述
background-position：描述左邊的詞 描述右邊的詞
描述左邊的詞:left 、center涮母、right
描述右邊的詞:top 具壮、center、bottom
//右下角
background-position：right bottom;
- background-attachment
background-attachment：背景是否固定
background-attachment:fixed;背景就會固定住哈蝇，不會被滾動條帶走。
- background綜合屬性
background屬性與border屬性一樣攘已，是一個綜合屬性
background:red url(qq.png) no-repeat 100px 100px fixed;
等價于
background-color:red;
background-image:url(qq.png);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
假設(shè)有圖片炮赦，又有背景顏色，那么會以顯示圖片為主样勃，有空缺的地方會用顏色自動填充吠勘。
有圖片，又有背景顏色.png
