| 導購 | 订阅 | 在线投稿
分享
 
 
 

初學CSS和標准建站的一些CSS常用技巧

來源:互聯網網民  2008-09-24 07:29:57  評論

初學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*/

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
初學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*/
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有