您未必知道的Css技巧

2021-05-27 09:45:51 字數 2212 閱讀 4761

1.       關於background的寫法

div.comment
1)您可以看到background的第乙個定義是乙個顏色值這表示在背景失效的時候顏色將起作用。

2)url括號中的引號是沒有必要的,我們可以不寫引號 

2.       關於border的寫法,如果您想定義div的四個邊的顏色不同,而粗度和樣式都一樣,您可以這樣寫:

div.special
四種顏色一次是上,右,下,左的顏色

3.       為了相容所有的瀏覽器都可以顯示半透明效果的寫法

.tranparent
4.       _height,_width的作用

使用_height解決float的div不閉合的問題,您可以將_height屬性去掉就可以開到效果了。

#wrap

.column_left

.column_right

5.       使用min-height min-width解決div,或者span的固定高度問題

有時候我們需要設定某個元素固定高度,但是在firefox或者opera下面只設定高度,在內容不夠多的時候,達不到預想的效果,這時候我們可以使用min-height

6.       使用!important改變樣式的優先順序

所謂的樣式優先順序是指,瀏覽器在應用樣式時總是根據就近原則來應用樣式,假定我們在乙個頁面中有三處都有對某個元素的定義,一處是在外部的css檔案中,一處是在檔案的head標籤中定義內聯css,另一處是在這個元素的標籤內,那麼根據就近原則此元素最終使用的樣式是在標籤內定義的樣式,如果我們需要打破這種規則我們就可以使用!important指令

a.test

這樣即使在a元素內定義了color也不會應用,而是應用上面的定義

7.       使用media指令引入兩種css:列印版本的css和螢幕顯示的css

8.       > 符號(目前ie不支援)

我們可以使用div a的方式來定義所有在div裡面的所有a標籤的樣式,包括div下面的span中的div;如果我們只想定義div下面一級子節點的a標籤我們可以使用「>」符號,例如:

div>a

現在只有是div的直接子節點a標籤的顏色是紅色

9.:first-child :last-child 在非ie的瀏覽器下面可以通過這兩個指示符,取到父元素的第乙個元素或者最後乙個元素

10. :hover等偽類可以這樣使用

這樣我們就可以做只用css控制的選單,在ie6,ie7,firefox1.5,opera9.0下面測試通過 

11.我們可以使用page-break-after,page-break-before控制列印時的分頁

12. * html{}的作用是為了相容6.0以下的ie版本,對html節點的選取,其他的瀏覽器都認為html標籤是文件的根節點,而ie6以下的ie版本卻認為在html標籤的上面還有乙個根節點。

13. css 的class可以有多個值,我們只需要將多個值用空格隔開就可以了

14. 顏色的縮寫 我們可以將#ff0033縮寫成#f03

15. 使用text-indent顯示,而隱藏文字(這種做法據說有助於seo)

h1

<

h1>

buy widgets

h1>

16. 為了避免不同瀏覽器對不同標籤的padding,margin不同的解釋可以在樣式表的前面定義

*17. 關閉輸入法狀態,使使用者只能輸入英文狀態下的字元,類似輸入密碼

input 

18. 死都不換行

1)white-space:nowrap; overflow: hidden; width: 17em !important ; width: 18em;  

注意: white-space不支援td,th等。

2) 用

.fixtable加上nobr標籤實現隱藏

nobr標籤非標準。

19. 同比改變大小

img.style.zoom = 0.5;

您未必知道的Js技巧

1.document.getelementsbytagname可以獲得某乙個標籤的所有元素,可以通過document.getelementsbytagname 獲得頁面上的所有元素,這裡星號代表任何標籤,而注釋標籤的tagname是 2.string 的方法substr與substring的區別 s...

你未必知道的css小知識

1 當按百分比設定乙個元素的寬度時,它是相對于父容器的寬度計算的,但是,對於一些表示豎向距離的屬性,例如padding top,padding bottom,margin top,margin bottom等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度來計算的。2 css裡的empty...

anchors如何獲得 大家未必知道的Js技巧收藏

1.document.getelementsbytagname可以獲得某乙個標籤的所有元素,可以通過 document.getelementsbytagname 獲得頁面上的所有元素,這裡星號代表任何標籤,而注釋標籤的tagname是 2.string 的方法substr與substring的區別 ...