10個節約開發時間的CSS技巧
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 TooltipThis is a Example by imbolo.com..
效果如圖。
2.重設基本樣式為了統一不同瀏覽器對各種HTML標簽的默認樣式的渲染，我們必須從新定義各種標簽的樣式，這樣能對以后的開發帶來方便。重新定義各種HTML標簽只需要在CSS的開頭加入以下代碼。
以下為引用的內容：
html, body, div, span, applet, object, iframe,3.方便的CSS調試器
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;
}
這段代碼可以把頁面上的各種標簽嵌套用不同的線條劃分出來，方便你找出BUG。
以下為引用的內容：
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }4.使一個未設定寬度的DIV居中 對于一個有固定寬度的DIV容器，你可以輕松地通過margin:auto屬性令他居中。如果要居中的DIV容器并沒有設置寬度的話，你可以使用下面的CSS代碼：
以下為引用的內容：
.content {
margin: 0 auto 8px;
display: table;
}
.content div {
display: table-cell;
}
5.為大圖片添加偽AJAX的載入圖標 等待圖片下載是瀏覽網頁是意見煩人的事，但用JavaScript動態載入圖片技術難度又比較大。你可以用CSS加上一個載入圖標，緩解訪客等待加載時的情緒。
以下為引用的內容：
img { background: url">loading.gif) no-repeat center center; }6.CSS圖像預載 如果你要在HTML文件加載完成前預載圖片，你可以把圖片設置為一個DIV容器的背景圖，并且把這個容器設為不可見。當HTML加載后再把這個DIV容器插入頁面里。
以下為引用的內容：
div.loader {
background:url">images/hover.gif) no-repeat;
background:url">) no-repeat;
background:url">) no-repeat;
margin-left:-10000px;
}7.CSS透明度 由于老式瀏覽器對頁面元素透明度處理不好，你必須為透明的元素寫hack。
以下為引用的內容：
selector {
filter: alpha">=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}8.為IE和其它瀏覽器設置元素的最小高度 由于IE不支持min-height屬性，我們還是要為IE寫hack。以下代碼的第一部分是正確的代碼，可以在標準瀏覽器里使用，第二部分是針對IE的hack。由于IE不能識別min屬性，因此height值設定為8em，使容器能裝下超出容器范圍的文本。
以下為引用的內容：
/* for browsers that don't suck */9.根據鏈接類型選用不同的鏈接樣式
.container {
min-height:8em;
height:auto !important;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/
超鏈接的形式主要有http鏈接和mailto鏈接兩種，你可以為這兩種鏈接設置不同的樣式。通過CSS3，你甚至能為指向不同文件類型的附件鏈接建立不同的樣式！不過，這種做法對不兼容CSS3的瀏覽器不夠友好，而這也是我們必須盡快淘汰老版本IE的原因。
以下為引用的內容：
/* HTTP鏈接的樣式 */10.移除IE里文本輸入框的滾動條
a[href^="http://"]
{
padding-right: 13px;
background: url">external.gif) no-repeat center right;
}
/* Mailto鏈接的楊思 */
a[href^="mailto:"]
{
padding-right: 20px;
background: url">email.png) no-repeat center right;
}
/* 指向PDF格式附件的樣式 */
a[href$=".pdf"]
{
padding-right: 18px;
background: url">acrobat.png) no-repeat center right;
}
IE瀏覽器會畫蛇添足地為多行的文本輸入框加上一個滾動條，哪怕你輸入的文字長度還沒有超出輸入框的范圍。通過下面的代碼你可以把多余的滾動條移除。
以下為引用的內容：
textarea{
overflow:auto;
}原文鏈接：10個節約開發時間的CSS技巧
感謝 的投稿
没有评论:
发表评论