一秕磷、行高 (line-height)
1.行高不作用于文字上,作用于行上顷霹。
2.行高咪惠、字號(hào),一般都是偶數(shù)淋淀。(方便文字在盒子中居中)
3.行高=盒子高時(shí) 文字能夠居中遥昧。
5.多行文字居中時(shí),不能只設(shè)置行高,要根據(jù)計(jì)算加入padding炭臭。
6.font屬性:
1) 使用font屬性永脓,能夠?qū)?/b>字號(hào)、行高鞋仍、字體一起設(shè)置常摧。
font: 14px/24px“宋體”;
等價(jià)于三行語(yǔ)句:
font-size:14px; ?line-height:24px; ?font-family:"宋體";
2) 可以有無(wú)數(shù)個(gè)備選字體,用逗號(hào)隔開(kāi)威创,我們要將英語(yǔ)字體落午,放在最前面,這樣所有的中文肚豺,就不能匹配英語(yǔ)字體溃斋,就自動(dòng)的變?yōu)楹竺娴闹形淖煮w。
3)行高可以用百分比详炬,表示字號(hào)的百分之多少盐类。一般來(lái)說(shuō),都是大于100%的呛谜,因?yàn)樾懈咭欢ㄒ笥谧痔?hào)在跳。
font:12px/200%“宋體”
等價(jià)于
font:12px/24px“宋體”;
二、超級(jí)鏈接的美化
1.偽類:<a>即偽類
?:link表示隐岛,用戶沒(méi)有點(diǎn)擊過(guò)這個(gè)鏈接的樣式猫妙。是英語(yǔ)“鏈接”的意思。
:visited表示聚凹,用戶訪問(wèn)過(guò)了這個(gè)鏈接的樣式割坠。是英語(yǔ)“訪問(wèn)過(guò)的”的意思。
:hover表示妒牙,用戶鼠標(biāo)懸停的時(shí)候鏈接的樣式彼哼。是英語(yǔ)“懸停”的意思湘今。
:active表示敢朱,用戶用鼠標(biāo)點(diǎn)擊這個(gè)鏈接,但是不松手摩瞎,此刻的樣式拴签。是英語(yǔ)“激活”的意思。
一定要按順序?qū)懫烀牵〖记桑?b>lovehate蚓哩。
2.美化
a標(biāo)簽中,描述盒子上渴; 偽類中描述文字的樣式岸梨、背景喜颁。
最標(biāo)準(zhǔn)的,就是把link盛嘿、visited洛巢、hover都要寫。但是前端開(kāi)發(fā)工程師在大量的實(shí)踐中次兆,發(fā)現(xiàn)不寫link稿茉、visited瀏覽器也挺兼容。所以這些“老油條”們芥炭,就把a(bǔ)標(biāo)簽簡(jiǎn)化了:
a:link漓库、a:visited都是可以省略的,簡(jiǎn)寫在a標(biāo)簽里面园蝠。也就是說(shuō)渺蒿,a標(biāo)簽涵蓋了link、visited的狀態(tài)彪薛。
3,.background?
1) background-color?
用英語(yǔ)單詞來(lái)表示 簡(jiǎn)單顏色
用rgb方法來(lái)表示 ?紅”red茂装、“綠”green、“藍(lán)”blue善延。用逗號(hào)隔開(kāi)少态,r、g易遣、b的值彼妻,每個(gè)值的取值范圍0~255,一共256個(gè)值豆茫。
十六進(jìn)制表示法:十六進(jìn)制中侨歉,13表示1個(gè)16和3個(gè)1。 那就是19揩魂。這就是位權(quán)的概念幽邓。
十六進(jìn)制可以簡(jiǎn)化為3位,所有#aabbcc的形式火脉,能夠簡(jiǎn)化為#abc;
要記准昭蕖:
#000黑 ?#fff白 ?#f00紅 ?#333灰 ?#222深灰?? ?#ccc淺灰
4.background-image
格式:background-image:url(images/wuyifan.jpg);
自動(dòng)會(huì)平鋪滿,padding內(nèi)也有圖片忘分。?
5.background-repeat
background-repeat:no-repeat;不重復(fù)
background-repeat:repeat-x;橫向重復(fù)
background-repeat:repeat-y;縱向重復(fù)
6.background-position
背景定位屬性。
background-position:向右移動(dòng)量 向下移動(dòng)量; 圖片在盒子中的移動(dòng)量白修,可以是負(fù)數(shù)妒峦。
7.css精靈:css的背景定位來(lái)顯示需要顯示的圖片部分。
8.用單詞描述位置:
background-position:描述左右的詞兒? 描述上下的詞兒;
描述左右的詞兒:left兵睛、center肯骇、right
描述上下的詞兒:top窥浪、center、bottom
9.background-attachment
background-attachment:fixed; ?背景會(huì)被固定住笛丙,不會(huì)被滾動(dòng)條滾走漾脂。
10.綜合屬性
background:red url(1.jpg) no-repeat 100px 100px fixed;
等價(jià)于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
第一次做博雅互動(dòng);
源代碼如下
?