初學CSS和標准建站的一些CSS常用技巧 /*無所不能的CSS的*通配選擇符*/ * { margin:0; padding:0;} /*此定義解釋:margin:0;padding:0;在CSS最上面先用 * 一次性統一制定，可以避開CSS的"盒模型"考慮問猓迸龅叫枰乇? 指定margin或padding值的時候在分別另外指定，後面的值將覆蓋前面的值。*/ /*CSS中容易被忽視的Outlines 輪廓屬性*/ 問題：為什麼加了標簽的全部自動加上了藍色的邊緣？因為每個默認的boarder值不為0，可以將boarder設置為0，可以解決問題。 img{ boarder:0; display:block; }/*此定義解釋:boarder:0;可以避免帶鏈接的圖片邊緣出現藍色邊框。display:block；將圖片以塊級元素顯示*/ /*其他還有非常容易,,影響布局的標簽，都可以先將其margin和padding都預先設置為0*/ form{margin:0;padding:0;} select{margin:0;padding:0;} input{margin:0;padding:0;} body{ margin:0px; font: normal 12px "宋體", Verdana, Arial, Helvetica,sans-serif; text-align:center; color:#000; line-height:140%;} #top_box {width:760px;height:63px; margin:auto; padding-top:10px; text-align:left; } a:link,a:visited,a:active{color:#000; text-decoration:none;} a:hover{color:#ff0000; text-decoration:underline;} /*此定義解釋：將所有A標簽預先指定樣式，也可用在CSS最開始一段代碼，統一定義*/ /*有關CSS的其他常見問題及解決辦法和分析：*/ /*關於CSS容器與CSS元素的適應問題*/ /*例如有時候我們要在首頁動態打印一列十條文章，要放在一個CSS容器DIV內，若每行文字太多，元素很容易破壞容器而使整個布局變壞下面是解決的辦法*/ #nowrap{table-layout:fixed}
文字不折行
等同於 文字不折行 CSS指定寬度文字自動換行顯示： #wrap{Word-break:break-all;width:200px;}
每200像素寬度文字就自動折行
/*CSS常用縮寫規范*/ /*縮寫示例： 1.*/ .pop_font{ font: bold 11px "宋體", Verdana, Arial, Helvetica,sans-serif;} /*縮寫示例： 2.*/ .pop_td{ border-right: 1px solid #C1DAD7;} /*縮寫示例： 3.*/ .pic_background{ background: transparent url(/images/bullet1.gif) no-repeat 20px 20px; padding:2px 0; margin:2px 0 2px 0;} /*關於DIV布局中的UL,LI中帶ID的CSS屬性定義方式:*/
文字1
文字2
文字3
/*對 "文字1"定義CSS樣式： 以下都是正確的指定樣式：*/ #li1 {/*指定樣式代碼*/} #main li#li1 {/*指定樣式代碼*/} #main #ok1 #li1 {/*指定樣式代碼*/} #main ul#ok1 li#li1{/*指定樣式代碼*/} /*以下都是錯誤的CSS指定"文字1“的樣式：*/ #li{} #main ul li1{} li1{} /*end*/