頁面垂直滾動條(IE/FF兼容)
html { overflow-x:auto; overflow-y:scroll; }
清除樣式
ul,li,ol,dl,dt,dd { list-style:none; }
img { border:0; }
i { font-style:normal; }
s { text-decoration:none; }
CSS important
.dialog{margin:4px !important;margin:1px;} /* IE以最後出現的爲準, Firefox|Opera|Safari以!important爲準 */
CSS DIV半透明
filter: alpha(opacity=50); /*IE支持(範圍0-100)*/
opacity: 0.50; /*非IE支持(範圍0-1)*/
visibility: visible; /*是否可見[visible|hidden](IE/Firefox都支持)*/
CSS 手形鼠標
cursor:pointer;
設定圖形上下左右留空
<img src="圖形文件名" vspace="上下留空點數" hspace="左右留空點數">
input的圖像標籤
<input type="image" src="image.gif" alt="Submit">
accesskey和tabindex屬性
網站要兼顧更多情況下的使用，比如沒有光標設備（如鼠標）的情況下，要讓使用鍵盤操作也可以完成form的填寫，這時候點擊對於它們來說，已經沒有任何意義。我們這個時候選用label的accesskey（快捷鍵，IE下爲alt+accesskey屬性值，FF下爲alt+shift+accesskey屬性值）和tabindex屬性（Tab鍵，tabindex屬性值爲順序）添加到表單標籤上，如label，input等。
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="" accesskey="f" tabindex="1">
或：<label for="name">姓名(<u>N</u>)：</label><input type="text" id="name" accesskey="n">
<input type="radio" id="man" name="gender" value="1"><label for="man" accesskey="m">男(<u>M</u>)</label>
<input type="radio" id="woman" name="gender" value="2"><label for="woman" accesskey="w">女(<u>W</u>)</label>
button標籤
按鈕:在button元素內你可以放置內容, 像文本(text)或者圖片(images). 這是這個元素和input元素按鈕的區別.
button相對於input提供了更多的功能與更豐富的內容. button將按鈕文字單獨出來, 並且可以在button內添加圖片, 賦予文字和圖片更多選擇的樣式, 使生硬的按鈕變得更生動.
並且使用button標籤將比input按鈕來得更有語義化, 簡單的從字面意思也可以理解.
<button>
<img src="images/click.gif"/>Click Me!
</button>
輸入框禁輸中文(並禁止粘貼)
<input type="text" name="textfield" οnpaste="return false;" style="ime-mode:disabled">
DIV滾動條
<div style="width:300;height:200;overflow-x:hidden;overflow-y:scroll">
<div style="width:300;height:200;overflow:auto;">
CSS屬性列表
字體屬性(Font)
font-family 使用什麼字體 所有的字體
font-style 字體是否斜體 Normal,italic,oblique
font-variant 是否用小體大寫 Normal,small-caps
font-weight 字體的粗細 Normal,bold,bolder,lithter等
font-size 字體的大小 Absolute-size,relative-size,length,percentage等
顏色和背景屬性
Color 定義前景色 顏色
Background-color 定義背景色 顏色
Background-image 定義背景圖案 路徑
Background-repeat 重複方式 Repeat-x,repeat-y,no-repeat
Background-attachment 設置滾動 Scroll,Fixed
Background-position 初始位置 Percentage,length,top,left,right,bottom等
文本屬性
Word-spacing 單詞之間的間距 Normal <length>
Letter-spacing 字母之間的間距 同上
Text-decoration 文字的裝飾樣式 None|underline|overline|line-through|blink
Vertical-align 垂直方向的位置 Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Text-transform 文本轉換 Capitalize|uppercase|lowercase|none
Text-align 對齊方式 Left|right|center|justify
Text-indent 首行的縮進方式 <length>|<percentage>
Line-height 文本的行高 Normal|<number>|<length>|<percentage>
邊距屬性
Margin-top|Margin-right|Margin-bottom|Margin-left -> Length|percentage|auto
填充距屬性
Padding-top|Padding-right|Padding-bottom|Padding-left -> Length|percentage
邊框屬性
Border-top-width|Border-right-width|Border-bottom-width|Border-left-width -> Thin|medium|thick|length
Border-width -> Thin|medium|thick|length
Border-color -> Color
Border-style -> None|dotted|dash|solid等
Border-top|Border-right|Border-bottom|Border-left -> Border-top-width|color等
Width -> Length|percentage|auto
Height -> Length|auto
Float 文字環繞 Left|right|none
Clear 哪一邊環繞 Left|right|none|both
分級屬性
Display 定義是否顯示 Block,inline,list-item,none
White-space 怎樣處理空白 Normal,pre,nowrap
List-style-type 加項目編號 Disc,circle,square等
List-style-image 加圖案 <url>|none
List-style-position 第二行起始位置 Inside,outside
List-style 一次定義列表 <keyword>|<position>|<url>
鼠標屬性
Cursor -> Auto|Crosshair|Default|Hand|Move|e-resize|Ne-resize|Nw-resize|n-resize|Se-resize|Sw-resize|s-resize|w-resize|Text|Wait|Help
