css使用技巧匯總-文庫吧資料
2025-03-29 00:23本頁面
【正文】 etails { /* declarations */ } 這樣可以節(jié)省一些字節(jié)。當(dāng)你寫給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁面里是唯一的，而clas s可以在頁面中多次使用。為了避免這種錯(cuò)誤，我建議所有的定義名稱都采用小寫。除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。在HTML中你可以只寫width=100，但是在CSS中，你必須給一個(gè)準(zhǔn)確的單位，比如：width:100px width:100em。css縮寫的主要規(guī)則請(qǐng)參看《常用css縮寫語法總結(jié)》，這里就不展開描述。本文總結(jié)了我開始使用CSS布局方法以來所有的技巧和兼容方案，我愿意把這些與你分享，我會(huì)重點(diǎn)解釋一些新手容易犯的錯(cuò)誤(包括我自己也犯過的)，如果你已經(jīng)是CSS高手，這些經(jīng)驗(yàn)技巧可能已經(jīng)都知道，如果你有更多的，希望可以幫我補(bǔ)充。圖211：帶有背景圖片和色彩的標(biāo)題這個(gè)技巧使得放置一些與頁面色彩相關(guān)聯(lián)的小圓角或者裝飾性的圖片變得特別的方便。background: 696 url() norepeat 0 50%。color: fff。舉個(gè)例子，讓我們回到前面“可替換的圖標(biāo)”例子，增加一些背景色彩：h1 {fontfamily: Arial, sansserif。圖210顯示了標(biāo)題的效果。verticalalign: middle。每個(gè)月，我們都能用一個(gè)不同的色彩值來升級(jí)CSS規(guī)則，從而改變整個(gè)站點(diǎn)中的每個(gè)標(biāo)題以及相關(guān)聯(lián)的圖標(biāo)的色彩。} 前面的代碼確定了所有包含在h3內(nèi)的img標(biāo)簽都有一個(gè)綠色的背景。另外我們還想讓色彩僅僅出現(xiàn)在圖標(biāo)的后面，而不影響到標(biāo)題的文字，因此我們又用下面的方法將規(guī)則僅施加于包含在h3內(nèi)的img標(biāo)簽。圖29顯示了這些圖標(biāo)中的一個(gè)例子，它們被使用在首頁上的每日引言中。要讓這些圖標(biāo)隨著頁面上其它元素一起變換顏色，并不需要每次都創(chuàng)建新的圖標(biāo)。第二個(gè)原因是，當(dāng)時(shí)，我們每個(gè)月都會(huì)根據(jù)當(dāng)前發(fā)行的雜志封面來更換整個(gè)站點(diǎn)的配色方案。我們?cè)谡麄€(gè)站點(diǎn)的大多數(shù)h3標(biāo)題中使用了13*13點(diǎn)的小圖標(biāo)，就象這樣：h3img src= width=13 height=13 alt=* / FIRST IMPRESSION/h3 我們用這種方法編碼有兩個(gè)原因?？勺儞Q的效果下面的技巧在某些情況下會(huì)很有用。 把那些非必須的，裝飾性的圖片保持在CSS文件中，就可以使得更改背景圖片只需幾分鐘，而不再需要幾天，整個(gè)站點(diǎn)可以立刻得到升級(jí)。對(duì)于一個(gè)項(xiàng)目的預(yù)算，這額外所需的時(shí)間就會(huì)推遲原先的期限。新的圖標(biāo)和老的圖標(biāo)有著不同的規(guī)格。這些圖標(biāo)匹配著整個(gè)站點(diǎn)各個(gè)的題目。我們把它放置在距離首部0點(diǎn)和距離頂部50%的位置上。background: url() norepeat 0 50%。color: 369。代碼和前面平鋪范例很相似：h1 {fontfamily: Arial, sansserif。（看圖27）圖27： 帶有平鋪背景的標(biāo)題可替換的圖標(biāo)處理行內(nèi)的裝飾性圓點(diǎn)和圖標(biāo)時(shí)，作為代替硬編碼的方式，我們可以繼續(xù)使用CSS的background屬性來把圖標(biāo)設(shè)置在文字左邊。} repeatx會(huì)通知瀏覽器僅在水平方向平鋪（repeaty 將在垂直方向平鋪）。paddingbottom: 14px。fontsize: 24px。用Photoshop或者你喜歡的圖片編輯器，創(chuàng)建一個(gè)10*10的圖片，圖片的頂部有黑色的邊框，漸變的灰色一直到底部，象圖26顯示的。} 試著創(chuàng)建各種不同的同色陰影，產(chǎn)生的立體效果如圖25顯示。backgroundcolor: ddd。color: 666。h1 {fontfamily: Arial, sansserif。圖24： 帶有背景色和補(bǔ)白的標(biāo)題背景和邊框在標(biāo)題下面增加一個(gè)窄窄的邊框，加上淡淡的背景色，你能夠創(chuàng)建一種三維的效果，卻不需使用圖片。} 我們把文字改成白色，周圍加上4個(gè)點(diǎn)的補(bǔ)白，再把背景改成綠色。padding: 4px。fontsize: 24px。增加一點(diǎn)補(bǔ)白和背景顏色，我們就有了一個(gè)不需要圖片的，但又很有
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1