CSS技巧匯總:網頁製作常用的22個CSS技巧

文章簡介：22個必須知道的css技巧。

1、改變選中文字的背景和顏色

1. <PRE style="LINE-HEIGHT: 24px; WIDOWS: 2; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0px; MARGIN: 0px 0px 10px; ORPHANS: 2; LETTER-SPACING: normal; COLOR: rgb(0,0,0); FONT-SIZE: 13px; FONT-WEIGHT: normal; WORD-SPACING: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">
   
2. ::selection{ /* Safari and Opera */
   
3.         background:#c3effd;
   
4.         color:#000;
   
5. }
   
6. ::-moz-selection{ /* Firefox */
   
7.         background:#c3effd;
   
8.         color:#000;
   
9. }</PRE>

2、防止Firefox捲軸跳動

1. html{ overflow-y:scroll; }

3、分頁列印

1. .page-break{ page-break-before:always; }

4、使用!important

1. .page { background-color:blue !important; background-color:red;}

5、映像替換文字

1. .header{
   
2. text-indent:-9999px;
   
3. background:url('someimage.jpg') no-repeat;
   
4. height: 100px; /*dimensions equal to image size*/
   
5. width:500px;
   
6. }

6、相容瀏覽器的最小高度

1. #container{
   
2. height:auto !important;/*all browsers except ie6 will respect the !important flag*/
   
3. min-height:500px;
   
4. height:500px;/*Should have the same value as the min height above*/
   
5. }

7、對新視窗開啟得連結高亮顯示

1. a[target="_blank"]:before,
   
2. a[target="new"]:before {
   
3. margin:0 5px 0 0;
   
4. padding:1px;
   
5. outline:1px solid #333;
   
6. color:#333;
   
7. background:#ff9;
   
8. font:12px "Zapf Dingbats";
   
9. content: "\279C";
   
10. }

8、美化li序號

1. ol {
   
2. font: italic 1em Georgia, Times, serif;
   
3. color: #999999;
   
4. }
   
5. ol p {
   
6. font: normal .8em Arial, Helvetica, sans-serif;
   
7. color: #000000;
   
8. }

9、首字下沉

1. p:first-letter{
   
2. display:block;
   
3. margin:5px 0 0 5px;
   
4. float:left;
   
5. color:#FF3366;
   
6. font-size:3.0em;
   
7. font-family:Georgia;
   
8. }

10、相容瀏覽器的opacity

1. .transparent_class {
   
2. filter:alpha(opacity=50);
   
3. -moz-opacity:0.5;
   
4. -khtml-opacity: 0.5;
   
5. opacity: 0.5;
   
6. }

11、使用line-height實現垂直置中

1. line-height:30px;

12、置中布局

1. body{
   
2. width:1000px;
   
3. margin:0 auto;
   
4. }

13、移除ie文本域的垂直捲軸

1. textarea{
   
2. overflow:auto;
   
3. }

14、移動超連結的虛線框

1. a:active, a:focus{ outline:none; }

15、ie下元素消失，給該元素添加

1. position:relative;

16、根據連結不一樣，添加不一樣的icons

1. a[href$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$='.doc'] {
   
2. padding:0 20px 0 0;
   
3. background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
   
4. }

17、css手型點擊樣式

1. input[type=submit],label,select,.pointer { cursor:pointer; }

18、字母大寫

1. text-transform: capitalize;

19、所有英文大寫，且首字母比其他的大

1. font-variant:small-caps;

20、高亮文字框，不支援ie

1. input[type=text]:focus, input[type=password]:focus{
   
2. border:2px solid #000;
   
3. }

21、移除img邊框

1. a img{ border:none; }

22、用label實現無表格表單

1. <form method="post" action="#" >
   
2. <p><label for="username" >Username</label>
   
3. <input type="text" id="username" name="username" />
   
4. </p>
   
5. <p><label for="password" >Username</label>
   
6. <input type="password" id="password" name="pass" />
   
7. </p>
   
8. <p><input type="submit" value="Submit" /></p>
   
9. </form>
   
10. p label{
    
11. width:100px;
    
12. float:left;
    
13. margin-right:10px;
    
14. text-align:right;
    
15. }