稀為人知的幾個有用的Css技巧

2022-03-19 06:47:01 字數 2581 閱讀 8336

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

<

divid

="wrap">

<

divclass

="column_left">

<

h1>float left

h1>

div>

<

divclass

="column_right">

<

h1>float right

h1>

div>

div>

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

<

link

type

="text/css"

rel="stylesheet"

href

="url "

media

="screen"

charset

="utf-8"

/>

<

link

type

="text/css"

rel="stylesheet"

href

="url"

media

="print"

charset

="utf-8"

/>

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

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

div>a

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

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

20070412 21:05增加

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

<

ul>

<

li class

="menu"

>

menu title

<

ul>

<

li>

first

li>

<

li>

last

li>

ul>

li>

ul>

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

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

20070413 12:13

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

---感謝calmzeal的解釋

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

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

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

h1 <

h1>

buy widgets

h1>

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

*posted by mars.lei

轉至:

Xmind幾個有用的技巧

xmind是乙個很好的思維導圖工具,是學習研究總結的好幫手。xmind功能很豐富,這裡只是簡要列出幾個比較有用的技巧。選中乙個xmind元素 專業名詞叫 主題 後,一般在右下角會出現 屬性 如果你不想老是看到單調的格式,一定要善用屬性。具體細節就選中乙個xmind元素,自己試試吧!這個問題曾經讓筆者...

vue技術 鮮為人知的小技巧

一 善用watch的immediate屬性 這一點我在專案中也是這麼寫的。例如有請求需要再也沒初始化的時候就執行一次,然後監聽他的變化,很多人這麼寫 created watch 上面的這種寫法我們可以完全如下寫 watch 二 精簡vuex的modules引入 對於vuex,我們輸出store如下寫...

少為人知的龍膽花

雲南八大名花之一的龍膽花,即使是雲南人對這花也了解甚少 龍膽花在雲南共有130多個品種。這只是其中極少的幾種。龍膽花是龍膽系龍膽科龍膽屬植物的統稱,該屬產於溫帶各地 我國247種,雲南有130餘種,佔全國一半以上,雖然廣布於全省各地,但其多數種類仍在海拔2000至4800公尺的亞高山溫帶地區和高山寒...