節約開發時間的十個CSS技巧
來源：程序員人生 發布時間：2014-05-15 19:38:27 閱讀次數：2842次
CSS已經成為網頁前段設計一個非常重要的部分，由于寫CSS時需要考慮的問題非常多，老手們創建新頁面是通常會沿用以前的CSS框架。但是新手沒有自己的框架，這篇文章可以給新手們一些啟示。
1.簡單的純CSS Tooltip
通過這些代碼，你可以做出簡單的Tooltip。這是CSS代碼：
a:hover {
background:#ffffff; /*要兼容IE6的話必須添加背景色*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
HTML代碼如下：
Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.
效果如圖。
2.重設基本樣式
為了統一不同瀏覽器對各種HTML標簽的默認樣式的渲染，我們必須從新定義各種標簽的樣式，這樣能對以后的開發帶來方便。重新定義各種HTML標簽只需要在CSS的開頭加入以下代碼。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
/* 元素獲得焦點時的樣式! */
:focus {
outline: 0;
}
/* 特殊文本的樣式! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 細線表格樣式 */
table {
border-collapse: collapse;
border-spacing: 0;
}
