原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
翻譯：http://www.176so.com/past/2007/3/17/pdf_links_labeling/

css技巧之PDF、ZIP、DOC鏈接的標(biāo)注

有時(shí)候我們希望能明確的用小圖標(biāo)來(lái)標(biāo)明我們的超鏈接的類(lèi)型。是一個(gè)zip文檔還是一個(gè)pdf文件。這樣訪問(wèn)者就知道他所要點(diǎn)擊的這個(gè)鏈接是下載而不是打開(kāi)另一個(gè)頁(yè)面了。如果所有的人都使用IE7或者FF的話。我們完全可以使用[att$=val]屬性選擇器，尋找以特定值（比如.zip和.doc）結(jié)尾的屬性。

a[href$=”.pdf”] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
a[href$=”.zip”] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

不幸的是IE6以下瀏覽器不支持屬性選擇器。好在，可以通過(guò)在每個(gè)元素中添加類(lèi)，使用JavaScript和DOM實(shí)現(xiàn)相似的效果。

下面給出了一個(gè)解決辦法:

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName(‘a’)) {
        for (var i = 0; (fileLink = document.getElementsByTagName(‘a’)[i]); i++) {
            if (fileLink.href.indexOf(‘.pdf’) != -1) {
                fileLink.setAttribute(‘target’, ‘_blank’);
                fileLink.className = ‘pdfLink’;
            }
            if (fileLink.href.indexOf(‘.doc’) != -1) {
                fileLink.setAttribute(‘target’, ‘_blank’);
                fileLink.className = ‘docLink’;
            }
            if (fileLink.href.indexOf(‘.zip’) != -1) {
                fileLink.setAttribute(‘target’, ‘_blank’);
                fileLink.className = ‘zipLink’;
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}

當(dāng)然，你需要在你的css文件中，增加這幾個(gè)css類(lèi)：

.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

最后一點(diǎn)建議，你的小圖標(biāo)不要過(guò)分醒目，這會(huì)分散瀏覽者的注意力。

淘寶首頁(yè)上的一個(gè)小技巧。

類(lèi)目之間的橫豎線

從很久很久以前開(kāi)始，類(lèi)目間的豎線無(wú)非都只有三種。

1. 背景圖
   在a標(biāo)簽設(shè)置一個(gè)padding 用寬1px高不等的背景圖來(lái)position到右側(cè)。
   缺點(diǎn)：最后一個(gè)還是要用class來(lái)隱藏掉背景。
2. 符號(hào)
   在每個(gè)a標(biāo)簽之間用”|”符號(hào)來(lái)填充。
   缺點(diǎn)：html文件變大，文件維護(hù)變得很麻煩，而且在html中毫無(wú)意義。
3. a標(biāo)簽右側(cè)的boder。
   同背景圖一樣，只不過(guò)使用border-right來(lái)代替。缺點(diǎn)也同上。

看到這里，可能已經(jīng)有人打開(kāi)淘寶首頁(yè)用firebug查看源碼來(lái)看是怎么做了。

其實(shí)現(xiàn)有是利用ul的overflow:hidden 再將li的margin-left:-1px的做法做出來(lái)的。這樣的做法就可以同時(shí)避免以上的缺點(diǎn)了。
為什么之前都沒(méi)有那么做的，寡人也不知道了。難道寡人是第一個(gè)發(fā)現(xiàn)這樣的做法？
不管是誰(shuí)先此之前利用了這樣的方法實(shí)現(xiàn)類(lèi)目間豎線。
不過(guò)在淘寶首頁(yè)上線后不久就有同行的網(wǎng)站在首頁(yè)改版中也用了這樣的方法。
那個(gè)網(wǎng)站不看也罷。class實(shí)在是寫(xiě)的有點(diǎn)多。加載html會(huì)變得多得多。
反正一個(gè)首頁(yè)需要加載1.17m的網(wǎng)頁(yè)我的大腦會(huì)自動(dòng)屏蔽。

圓角的做法.

為了這個(gè)圓角,前段開(kāi)發(fā)們付出的努力是在是太多了.又要考慮http連接數(shù),又要考慮css與html的代碼量與語(yǔ)義.
貼出的是最近考慮替換現(xiàn)有圓角做法的方案,可能還有許多未考慮的狀況.但是大體的編寫(xiě)方式便是如下.
好處是便于維護(hù),只有一個(gè)圖片.還可以某種程度上的任意縮放.缺點(diǎn)是多了無(wú)意義的html代碼.

css：
.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(//images.sj33.cn/uploads/allimg/200710/20071025021934233.png);/*背景圖片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*臨時(shí)定的寬度*/
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px;
}

html：
< P class=”c”>
< i>< i>< /i>< /i>
< p>
按鈕按鈕按鈕按鈕按鈕按鈕
按按按按按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕
< /p>
< b>< b>< /b>< /b>
< /P>

table的全局定義

caption這個(gè)標(biāo)簽在firefox下會(huì)有左邊有1px空隙的bug,很討厭.能想到的簡(jiǎn)單的方法只有-1px的margin了.

css：
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*邊框顏色*/
background:#c3d9ff;/*背景顏色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}

html：
< table>
< caption>表格標(biāo)題< /caption>
< tr>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< th>標(biāo)題< /th>
< /tr>
< tr>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< td> 內(nèi)容< /td>
< /tr>
< /table>

需要正視的二個(gè)標(biāo)簽

1. acronym這個(gè)標(biāo)簽用來(lái)解釋名詞很爽,但是用得太少.(我也一直想用來(lái)著,所以記下了.)
   css：
   acronym{cursor:help}
   html：
   < acronym title=”段正淳又是金庸筆下一個(gè)十分奇特的人物。他奇特在到處留情，情人極多，見(jiàn)一個(gè)愛(ài)一個(gè)，而又絕不是徒然風(fēng)流薄幸，當(dāng)他是單獨(dú)對(duì)著一個(gè)情人的時(shí)候，他真是真心真意愛(ài)這個(gè)情人的，只好說(shuō)這個(gè)人的感情特別豐富，別無(wú)其他解釋。” >文字< /acronym>
2. ins這個(gè)標(biāo)簽忘記是在哪個(gè)網(wǎng)站上看到過(guò)用來(lái)在h2里顯示更多的鏈接,后來(lái)查了書(shū),大家都覺(jué)得有點(diǎn)欠妥,有點(diǎn)爭(zhēng)議.
   css：
   還未寫(xiě)入css組件…欠奉上了
   html：
   < h2>標(biāo)題< ins>< a xhref=”http://ued.taobao.com/blog/#” mce_href=”http://ued.taobao.com/blog/#” >更多>>< /a>< /ins>< /h2>

標(biāo)題右側(cè)“更多”的實(shí)現(xiàn)

曾經(jīng)做上圖所示的效果,會(huì)使用到position來(lái)相對(duì)定位到h2標(biāo)簽的右側(cè).這樣的做法,代碼確實(shí)會(huì)多好幾行. 其實(shí)可以用個(gè)笨一點(diǎn)的辦法來(lái)實(shí)現(xiàn)的：

譬如html代碼如下：

< h2>< a h ref=”#” >標(biāo)題< /a> < span>更多…< /span> < /h2>

使用potsition的css差不多如下：

h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}

這樣才能實(shí)現(xiàn)更多在右側(cè).其實(shí)真的還可以更簡(jiǎn)單:

h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}

其實(shí)只是利用了margin-top 的負(fù)數(shù)來(lái)實(shí)現(xiàn),因?yàn)槟J(rèn)的float會(huì)換行到h2標(biāo)簽下面去，所以讓它自個(gè)跳上去。大致代碼就是如此了,是不是很簡(jiǎn)單?我說(shuō)很簡(jiǎn)單嘛！由于很簡(jiǎn)單,所以就不放出單獨(dú)的測(cè)試頁(yè)面了.

ps:我說(shuō)咱們啥時(shí)候也得搞個(gè)和藍(lán)色理想一樣的編輯器吧…

淘寶的css屬性順序書(shū)寫(xiě)規(guī)范

以前部門(mén)的同事們，每個(gè)人都有一套書(shū)寫(xiě)的規(guī)范，導(dǎo)致看對(duì)方的css代碼非常吃力，所以就推行了一套書(shū)寫(xiě)標(biāo)準(zhǔn) ，或許對(duì)您也有幫助。

*{
/*顯示屬性*/
display
position
float
clear
cursor
…

/*盒模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字*/
color
font
content

/*邊框背景 為什么要把 boder和background放在最后的原因是修改的頻率會(huì)較之前的頻繁，放在最后查看起來(lái)方便，哈哈。*/
border
background
}

說(shuō)到底其實(shí)屬性的書(shū)寫(xiě)順序規(guī)范就是：神仙?妖怪? – 身材怎么樣！- 服裝類(lèi)型(比基尼?棉襖?) – 服裝款式(黑色?白色?紐扣?拉鏈?) – 用了啥化妝品和發(fā)型.
這個(gè)書(shū)寫(xiě)標(biāo)準(zhǔn)小部分并不是瀏覽器廠商推行的書(shū)寫(xiě)規(guī)范，所以可能被廣大標(biāo)準(zhǔn)推廣者所不認(rèn)同 。但這些個(gè)都是弟兄幾個(gè)實(shí)踐出來(lái)認(rèn)為最符合現(xiàn)有淘寶環(huán)境的。

css代碼的簡(jiǎn)寫(xiě)

css縮寫(xiě)的語(yǔ)法，對(duì)新手有一定幫助,老鳥(niǎo)就不用看了.

1. 0px不需要單位，直接:margin:0
2. 盒模型的縮寫(xiě)，語(yǔ)法是margin:上 右 下 左;.甚至可以簡(jiǎn)寫(xiě)成margin:上 (右左) 下,當(dāng)然右左的值應(yīng)該是一樣的
3. css屬性的最后一項(xiàng)”;”號(hào)省略。（不建議 ^_^）
4. 字體寬度normal用400代替,bold用700代替。
5. 16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫(xiě)一半，例如：#000000可以縮寫(xiě)為#000;#0044DD可以縮寫(xiě)為#04D;
6. border邊框的縮寫(xiě)，語(yǔ)法是border:width style color,類(lèi)似boder:1px solid red;
7. 背景background的縮寫(xiě),語(yǔ)法是color image repeat attachment position.類(lèi)似:background:#f00 url(background.gif) no-repeat fixed 0 0( 為什么我從不寫(xiě)fixed呢?)
8. 字體的縮寫(xiě),類(lèi)似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最簡(jiǎn)單font:12px “SimSun”.
9. list的屬性縮寫(xiě),語(yǔ)法list-style:square inside url(image.gif) ,不過(guò)一般咱們都不用.
10. 想湊10條, 還真難.就把刪除無(wú)用換行符和空格算一個(gè)吧