實用的CSS常見的問題和技巧總結

2021-04-18 18:26:08 字數 2452 閱讀 2903

div可以寫為

p再如:

div可以改寫為:

/*注意上、右、下、左的書寫順序*/ div /*注意,數值與單位不能有空格,每個值之間用空格隔開*/

2、可以同時為乙個html元素的class屬性設定多個規則(多重class定義)。 通常我們寫法為:

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

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

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

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

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

4、區分大小寫 在xhtml中,css定義的元素名稱是區分大小寫的,class和id的值在html和xhtml中也是區分大小寫的,所以為了避免錯誤,推薦一律使用小寫。 如#aaa,與#aaa是不同的,在xhtml中,p和p也是不同的.他們之間不會覆蓋。 如果在css中定義了#aaa,在html元素中使用aaa來應用將不能得到#aaa中定義的樣式。 示例**:

css: #aaa   html: 顯示不出來1個畫素的邊線

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

css: p .blue .yellow html: 此處顯示為紅色

此處顯示為藍色

此處顯示為綠色

此處顯示為黃色

注意: (1)注意樣式的幾個優先順序(優先順序由上至下遞減): --元素style設定 --head區中的設定 --外部引用css檔案 (2)優先順序不是按訪問順序來設定的,而是又css中的宣告順序來設定的。 如上例中此處顯示為黃色

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

6、使用子選擇器減少id和class的定義 例如:

#contain #contain_ul .contail_li

可以更改為:

#contain #contain ul .contain ul li

7、不要給背景路徑加引號 將background:url("***.gif")改為background:url(***.gif) 因為對於部分瀏覽器加引號反而會引起錯誤。

8、背景的路徑是相對與當前css頁面的路徑。

例如: 有如下目錄結構 |--images    |--***.gif |--css    |--xx.css |--index.html **內容 index.html引用xx.css檔案。xx.css要引用***.gif其寫法為:background:url(../images/***.gif)

9、使用組選擇器為不同元素應用相同的樣式 如h1,h2,h3,div 則h1,h2,h3,div元素的樣式都為字型16畫素,字型粗體

10、書寫正確的鏈結樣式 當用css定義鏈結的各種狀態時,一定要注意其書寫順序,即::link :visited :hover :active。 如果不按照該順序書寫可能無法達到自己希望的效果。為了記憶該順序我們抽取每個單詞的首字母:l v h a,你可以通過記憶love,hate,兩個單詞來記住其順序。

11、禁止內容換行與強制內容換行 在**或層中我們可能希望內容不換行或強制換行,我們可以通過一些css屬性來達到這些要求。 網頁教學網

禁止換行:white-space:nowrap 強制換行:word-wrap: break-word; word-break: normal;

12、區別relative和absolute absolute,css中的寫法是:position:absolute; 他的意思是絕對定位,他是參照瀏覽器的左上角,配合top、right、bottom、left(下面簡稱trbl)進行定位,在沒有設定trbl,預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定position屬性,那麼當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由trbl決定。

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

13、區別div和span div是乙個塊級元素,可以包含段落,**等內容,用於放置不同的內容。一般我們在網頁通過div來布局定位網頁中的每個區塊。 span是乙個內聯元素,沒有實際意義,它的存在純粹是為了應用樣式,給一段內容加上標記可以通過在span上定義樣式來設定其內容的樣式。

14、區別display和visibility display:none和visibility:hidden都可以隱藏乙個元素 但visibility:hidden只是隱藏了元素的內容,但其使用的位置空間仍然被保留。 而display:none則相當把元素從頁面中去除,其占用位置也將被刪除。

實用的CSS常見的問題和技巧總結

1 善用css縮寫可以減少頁面檔案大小,提高 速度,同時使 簡潔可讀。如 div可以寫為 p再如 div可以改寫為 注意上 右 下 左的書寫順序 div 注意,數值與單位不能有空格,每個值之間用空格隔開 詳細請參考 css2參考手冊 常用css縮寫總結 2 可以同時為乙個html元素的class屬性...

實用的CSS技巧

盒陰影 box shadow 屬性幾乎可以運用在任何元素上,它們看起來都非常好看。下面這段 主要聚焦內層陰影的設計。mydiv下面介紹一段外層陰影 設計,注意,裡的第三個引數表示模糊距離 blur distance 而第四個引數表示鋪開的 spread 距離。關於這些值的設計,你可以前往 w3sch...

最常用和實用的CSS技巧

設定水平居中 複製 如下 div container 控制位置 絕對位置,相對位置 假如有兩個div 複製 如下 將重要元素放置在螢幕 如果你希望將您想要的東西放在最 可以使用以下css 複製 如下 div.popup div.popup 您必須明確的指定寬度和高度,再把top和left屬性設為他們...