css使用技巧匯總-wenkub
2023-04-07 00:23:05 本頁面
【正文】 出的是，這個特別的創(chuàng)建邊框的方法是一個由三部分組成的語句：寬度、式樣、顏色。paddingbottom: 4px。聽上去非常誘惑人，不是嗎？讓我們認(rèn)識一下我們自己的超級酷的標(biāo)題：h1Super Cool Page Title/h1 用CSS改變顏色、字體和尺寸：h1 {fontfamily: Arial, sansserif。簡單的樣式使用CSS，最容易做的事情就是給我們的標(biāo)題設(shè)置不同的字體樣式。fontsize: 24px。圖22： 應(yīng)用樣式后的標(biāo)題接著，讓我們在文字的下面增加一條1點(diǎn)寬的灰色邊框，以增強(qiáng)清晰度（看圖23）：h1 {fontfamily: Arial, sansserif。borderbottom: 1px solid 999。試著改變它們的值，看看會產(chǎn)生什么不同的效果。fontsize: 24px。} 我們把文字改成白色，周圍加上4個點(diǎn)的補(bǔ)白，再把背景改成綠色。h1 {fontfamily: Arial, sansserif。backgroundcolor: ddd。用Photoshop或者你喜歡的圖片編輯器，創(chuàng)建一個10*10的圖片，圖片的頂部有黑色的邊框，漸變的灰色一直到底部，象圖26顯示的。paddingbottom: 14px。（看圖27）圖27： 帶有平鋪背景的標(biāo)題可替換的圖標(biāo)處理行內(nèi)的裝飾性圓點(diǎn)和圖標(biāo)時，作為代替硬編碼的方式，我們可以繼續(xù)使用CSS的background屬性來把圖標(biāo)設(shè)置在文字左邊。color: 369。我們把它放置在距離首部0點(diǎn)和距離頂部50%的位置上。新的圖標(biāo)和老的圖標(biāo)有著不同的規(guī)格。 把那些非必須的，裝飾性的圖片保持在CSS文件中，就可以使得更改背景圖片只需幾分鐘，而不再需要幾天，整個站點(diǎn)可以立刻得到升級。我們在整個站點(diǎn)的大多數(shù)h3標(biāo)題中使用了13*13點(diǎn)的小圖標(biāo)，就象這樣：h3img src= width=13 height=13 alt=* / FIRST IMPRESSION/h3 我們用這種方法編碼有兩個原因。要讓這些圖標(biāo)隨著頁面上其它元素一起變換顏色，并不需要每次都創(chuàng)建新的圖標(biāo)。另外我們還想讓色彩僅僅出現(xiàn)在圖標(biāo)的后面，而不影響到標(biāo)題的文字，因此我們又用下面的方法將規(guī)則僅施加于包含在h3內(nèi)的img標(biāo)簽。每個月，我們都能用一個不同的色彩值來升級CSS規(guī)則，從而改變整個站點(diǎn)中的每個標(biāo)題以及相關(guān)聯(lián)的圖標(biāo)的色彩。圖210顯示了標(biāo)題的效果。color: fff。圖211：帶有背景圖片和色彩的標(biāo)題這個技巧使得放置一些與頁面色彩相關(guān)聯(lián)的小圓角或者裝飾性的圖片變得特別的方便。css縮寫的主要規(guī)則請參看《常用css縮寫語法總結(jié)》，這里就不展開描述。除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。當(dāng)你寫給一個元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個頁面里是唯一的，而clas s可以在頁面中多次使用。但是在不同的瀏覽器默認(rèn)值可能不同。但是要注意，瀏覽器可能用一些默認(rèn)值覆蓋你的定義。 } .update { fontweight:bold。一個標(biāo)簽可以同時定義多個class。}.two{border:10px solid F00。子選擇器可以幫助你節(jié)約大量的class定義。 可以寫為background:url(images/***.gif) 333。 例如：定義所有標(biāo)題的字體、顏色和margin，你可以這樣寫：h1,h2,h3,h4,h5,h6 { fontfamily:Lucida Grande,Lucida,Arial,Helvetica,sansserif。 } h2 { fontsize:。如果你的用戶需要用鍵盤來控制，需要知道當(dāng)前鏈接的焦點(diǎn)，你還可以定義:focus屬性。這個辦法有一點(diǎn)牽強(qiáng)，幸運(yùn)的是還有一個好辦法可以解決，參看這篇文章《How To Clear Floats Without Structural Markup》(注：本站將盡快翻譯此文)。 /* 修改為你的層的寬度 */ margin:0 auto。 /* 修
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1