萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 實用CSS技巧

實用CSS技巧

大家知道CSS技巧嗎?下面我們就給大家詳細介紹一下吧!

善用css縮寫可以減少頁面文件大小,提高下載速度,同時使代碼簡潔可讀。

如:

div{

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

border-right:1px soli #cccccc;

border-bottom:1px solid #cccccc;

}

可以寫為

p{border:1px solid #cccccc}

再如:

div{

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

}

可以改寫為:

/*注意上、右、下、左的書寫順序*/

div{margin:10px 20px 30px 40px}

/*注意,數值與單位不能有空格,每個值之間用空格隔開*/

(詳細請參考:css2參考手冊、常用css縮寫總結)

通常我們寫法為:

實際上我們可以為p元素指定多個規則,如:

CSS:

.a{…}

.b{….}

HTML:

該元素同時包括a和b中設定的樣式

注意:多個規則之間用空格分開。

忘記定義尺寸是css初學者新手普遍存在的問題。在html我們可以寫width=”100”,但在css中應該給出一個准確的單位。如:width:100px;height:50px;font-size:9pt ,0值除外,因為不論對於任何單位。0值的大小都是相等的。

注意:不要在數值和單位之間加空格。

在xhtml中,css定義的元素名稱是區分大小寫的,class和id的值在html和xhtml中也是區分大小寫的,所以為了避免錯誤,推薦一律使用小寫。

如#aaa,與#AAA是不同的,在xhtml中,p和P也是不同的.他們之間不會覆蓋。

如果在css中定義了#aaa,在html元素中使用AAA來應用將不能得到#aaa中定義的樣式。

示例代碼:

CSS:

#aaa{border:1px solid #ccc}

HTML:

顯示不出來1個像素的邊線

如果對一個元素定義了多次樣式,則以最近的一級優先,最近一級的樣式將覆蓋其他的樣式定義。

如:

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

此處顯示為紅色

此處顯示為藍色

此處顯示為綠色

此處顯示為黃色

注意:

(1)注意樣式的幾個優先順序(優先級由上至下遞減):

--元素style設定

--head區 中的設定

--外部引用css文件

(2)優先級不是按訪問順序來設定的,而是又css中的聲明順序來設定的。

如上例中

此處顯示為黃色

也顯示為黃色,因為在css定義中.yellow在.blue的後面。

例如:

#contain{..}

#contain_ul{...}

.contail_li{...}

可以更改為:

#contain{..}

#contain ul{...}

.contain ul li{...}

將background:url("xxx.gif")改為background:url(xxx.gif)

因為對於部分浏覽器加引號反而會引起錯誤。

例如:

有如下目錄結構

|--images

|--xxx.gif

|--css

|--xx.css

|--index.html

代碼內容

index.html引用xx.css文件。

xx.css要引用xxx.gif圖片其寫法為:background:url(../images/xxx.gif)

如h1,h2,h3,div{font-size:16px;font-weight:bold}

則h1,h2,h3,div元素的樣式都為字體16像素,字體粗體

當用css定義鏈接的各種狀態時,一定要注意其書寫順序,即::link :visited :hover :active。

如果不按照該順序書寫可能無法達到自己希望的效果。為了記憶該順序我們抽取每個單詞的首字母:L V H A,你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。

在表格或層中我們可能希望內容不換行或強制換行,我們可以通過一些css屬性來達到這些要求。

禁止換行:white-space:nowrap

強制換行:word-wrap: break-word; word-break: normal;

Absolute,CSS中的寫法是:position:absolute; 他的意思是絕對定位,他是參照浏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位,在沒有設定TRBL,默認依據父級的做標原始點為原始點。如果設定TRBL並且父級沒有設定position屬性,那麼當前的absolute則以浏覽器左上角為原始點進行定位,位置將由TRBL決定。

Relative,CSS中的寫法是:position:relative; 他的意思是絕對相對定位,他是參照父級的原始點為原始點,無父級則以BODY的原始點為原始點,配合TRBL進行定位,當父級內有padding等CSS屬性時,當前級的原始點則參照父級內容區的原始點進行定位。

div是一個塊級元素,可以包含段落,表格等內容,用於放置不同的內容。一般我們在網頁通過div來布局定位網頁中的每個區塊。

span是一個內聯元素,沒有實際意義,它的存在純粹是為了應用樣式,給一段內容加上標記可以通過在span上定義樣式來設定其內容的樣式。

display:none和visibility:hidden都可以隱藏一個元素

但visibility:hidden只是隱藏了元素的內容,但其使用的位置空間仍然被保留。

而display:none則相當把元素從頁面中去除,其占用位置也將被刪除。。

相信大家已經學會CSS技巧了吧!感謝大家對我們網站的支持!

相關推薦:

div css文字性質介紹 

copyright © 萬盛學電腦網 all rights reserved