整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
JavaScript、CSS 相比，HTML 經(jīng)過三十多年的發(fā)展，似乎逐漸走進(jìn)無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責(zé)編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發(fā)者的你編寫了一個(gè)HTML塊而沒有意識(shí)到可能編碼得并不理想?
為什么
HTML一直處于無人問津的角落，因?yàn)镴avaScript和CSS總是吸引人們的注意力。
請(qǐng)?jiān)谀X海里先保留這種印象，因?yàn)槲乙靡恍┖?jiǎn)單的技巧來發(fā)揮作用，讓HTML再次回到人們視野的中心。
以下是創(chuàng)建一目了然、可維護(hù)和可擴(kuò)展的代碼的一些方法，其很好的應(yīng)用了HTML5的語義標(biāo)記元素，并將在支持的瀏覽器中正確呈現(xiàn)。
其緣由就不贅述了，讓我們來看看具體是什么吧。
文檔類型
在index.html的頂部位置，請(qǐng)確保聲明了DOCTYPE。這將在所有瀏覽器中激活標(biāo)準(zhǔn)模式，并告知瀏覽器該如何編譯文檔。請(qǐng)記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>注意:如果應(yīng)用了框架，這已預(yù)先寫好。如果沒有，我強(qiáng)烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關(guān)于其他文檔類型的信息嗎?點(diǎn)擊這里查看參考文件：https://html.com/tags/doctype/。
可選標(biāo)簽
有些標(biāo)簽在HTML5中是可選的，主要是因?yàn)樵厥请[式呈現(xiàn)的。信不信由你，你可以省略<html>標(biāo)簽，而頁面呈現(xiàn)得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是一個(gè)有效的HTML，但在某些情況下就不能這樣做了。例如標(biāo)簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是無效的，因?yàn)樽⑨屛挥?lt;thml>標(biāo)簽之外，解析樹發(fā)生了更改。
結(jié)束標(biāo)簽
應(yīng)始終記得結(jié)束標(biāo)簽，否則某些瀏覽器在呈現(xiàn)頁面時(shí)會(huì)出現(xiàn)問題。出于可讀性和其他原因，建議保留這些內(nèi)容，稍后我會(huì)詳細(xì)介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>以上都是有效的標(biāo)簽，但也有一些特例，如下。
自閉合標(biāo)簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永遠(yuǎn)不能有自閉合標(biāo)簽。
<title />上面顯然是無效的。
字符集
預(yù)先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>上面是無效的，標(biāo)題無法正確呈現(xiàn)。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>語言
不忽略可選標(biāo)簽的另一個(gè)原因是在使用屬性時(shí)。在這種情況下，我們應(yīng)該定義web頁面的語言，這對(duì)于可訪問性和搜索非常重要。
<html lang="fr-CA">
...
</html>標(biāo)題
永遠(yuǎn)不要忽略標(biāo)題標(biāo)簽，否則可訪問性太差了。我個(gè)人就永遠(yuǎn)不會(huì)使用這樣的網(wǎng)站,因?yàn)槲覄偞蜷_它即刻在20多個(gè)頁面后就找不到了(瀏覽器選項(xiàng)卡不會(huì)有任何顯示)。
base標(biāo)簽
這是一個(gè)非常有用的標(biāo)簽，應(yīng)該謹(jǐn)慎使用。它將設(shè)置應(yīng)用程序的基本URL。一旦設(shè)置好，所有鏈接都將相對(duì)于這個(gè)基本URL，這可能會(huì)導(dǎo)致一些不必要的行為:
<base href="http://www.example.com/" />通過以上設(shè)置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者h(yuǎn)ref="example.org"將被編譯為href="http://www.example.com/example.org"。
描述
這個(gè)meta標(biāo)簽非常有用，盡管嚴(yán)格來說它不是最佳寫法。但在搜索引擎時(shí)，這是超級(jí)有用的。
<meta name="description" content="HTML best practices">這有一個(gè)帖子“搜索引擎優(yōu)化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
語義標(biāo)簽
雖然可以使用div創(chuàng)建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內(nèi)容顯示。像p、section、h{1-6}、main、nav等標(biāo)簽都是語義標(biāo)簽。如果使用p標(biāo)簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語義HTML超出了本文的范圍。但是我們應(yīng)該進(jìn)行檢查，就好比寫作所用的筆，而我們有鼠標(biāo)。
hr不應(yīng)該用于格式化
<hr>不是格式化元素，所以不要用它來格式化內(nèi)容。在HTML5中，這個(gè)標(biāo)簽代表了內(nèi)容的主題分離。正確的用法是這樣的:
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>使用title屬性時(shí)要小心
title屬性是一個(gè)功能強(qiáng)大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規(guī)范道:
目前不鼓勵(lì)依賴title屬性，因?yàn)楹芏嘤脩舸聿话凑找?guī)范的訪問方式來暴露該屬性（例如，使用鼠標(biāo)等設(shè)備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現(xiàn)代手機(jī)或平板電腦）。
請(qǐng)閱讀有關(guān)如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
單引號(hào)或雙引號(hào)
我見過的許多代碼庫，他們的標(biāo)記中混合了這兩種形式。這并不好，特別是當(dāng)你使用一個(gè)依賴于單引號(hào)的框架時(shí)，比如php，當(dāng)你在一個(gè)句子中使用單引號(hào)時(shí)，就像我現(xiàn)在做的一樣。另一個(gè)原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>而寫為：
<img alt="super funny meme" src="/img/meme.jpg">省略布爾值
當(dāng)涉及到屬性的布爾值時(shí)，建議省略，因?yàn)樗鼈儾惶砑尤魏沃担€會(huì)增加標(biāo)記的權(quán)重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">省略類型屬性
不需要向scriptand樣式標(biāo)簽添加type屬性。某些服務(wù)(如W3C的標(biāo)記驗(yàn)證工具)還會(huì)出現(xiàn)驗(yàn)證錯(cuò)誤。
驗(yàn)證標(biāo)記
可以使用W3C的標(biāo)記驗(yàn)證等服務(wù)以確保有效的標(biāo)記。
拒絕內(nèi)聯(lián)樣式
HTML中寫的是內(nèi)容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內(nèi)聯(lián)樣式，這將有利于開發(fā)人員和瀏覽器理解你的標(biāo)記。
總結(jié)
這些只是編寫標(biāo)簽時(shí)要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強(qiáng)烈建議你重復(fù)閱讀。
《GitHub HTML最佳實(shí)踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優(yōu)雅的標(biāo)簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來源出處。
【END】
天小編給大家?guī)砹艘槐具m用于web前端開發(fā)各個(gè)階段的超級(jí)好書——《響應(yīng)式web設(shè)計(jì)》pdf電子版。文末附獲取方式
本書堪稱學(xué)習(xí)響應(yīng)式Web設(shè)計(jì)的難得佳作。它不僅全面、細(xì)致、圖文并茂地介紹了響應(yīng)式設(shè)計(jì)相關(guān)的技術(shù)，比如媒體查詢、流式布局、彈性媒體和彈性字體等，還把近幾年來Web設(shè)計(jì)領(lǐng)域公認(rèn)的最佳設(shè)計(jì)理念有機(jī)地融入到了實(shí)例當(dāng)中，比如移動(dòng)先行（Mobile First）、漸進(jìn)增強(qiáng)、平穩(wěn)退化、無障礙設(shè)計(jì)等。更加難得的是，本書以設(shè)計(jì)跨屏幕的網(wǎng)頁（響應(yīng)式設(shè)計(jì)）為出發(fā)點(diǎn)，以點(diǎn)帶面，把如今Web設(shè)計(jì)領(lǐng)域兩大標(biāo)準(zhǔn)的最新版本HTML5和CSS3也納入其中，讀者在掌握先進(jìn)設(shè)計(jì)方法的同時(shí)也能掌握最新的設(shè)計(jì)技術(shù)（比如使用新的HTML5結(jié)構(gòu)化語義標(biāo)記、嵌入媒體、響應(yīng)式視頻，以及CSS3的新選擇器、特效、過渡、變形和動(dòng)畫等），從而可以免除重復(fù)學(xué)習(xí)新標(biāo)準(zhǔn)之苦，讓自己一步跨入Web設(shè)計(jì)領(lǐng)域的最前沿。無論你想學(xué)習(xí)響應(yīng)式Web設(shè)計(jì)，還是學(xué)習(xí)HTML5和CSS3的實(shí)際應(yīng)用，本書都能滿足你的需要，是毋庸置疑的明智之選。
說到底，響應(yīng)式Web設(shè)計(jì)并非一門獨(dú)立的技術(shù)，而只是現(xiàn)有技術(shù)的一個(gè)組合應(yīng)用。只要有一點(diǎn)HTML和CSS基礎(chǔ)的讀者都能順利地掌握它。對(duì)于中、高級(jí)的前端設(shè)計(jì)和開發(fā)人員，翻閱本書也有助于理清自己的知識(shí)脈絡(luò)，對(duì)這個(gè)新的設(shè)計(jì)理念獲得更全面、深入的理解和把握。
目錄
第1章 HTML5、CSS3及響應(yīng)式設(shè)計(jì)入門 1
1.1 為什么智能手機(jī)很重要（而老版的IE不再重要） 2
1.2 響應(yīng)式設(shè)計(jì)一定是最佳選擇嗎 3
1.3 響應(yīng)式網(wǎng)頁設(shè)計(jì)的定義 3
1.4 為什么要在響應(yīng)式設(shè)計(jì)上停滯不前 4
1.5 響應(yīng)式網(wǎng)頁設(shè)計(jì)示例 4
1.5.1 下載視口調(diào)試工具 4
1.5.2 在線創(chuàng)意源泉 11
1.6 為什么HTML5很優(yōu)秀 12
1.6.1 省時(shí)省力 12
1.6.2 新增了語義化標(biāo)簽元素 13
1.7 CSS3為響應(yīng)式設(shè)計(jì)和更多創(chuàng)新奠定了基礎(chǔ) 13
1.7.1 底線：CSS3不破壞任何東西 14
1.7.2 CSS3如何解決日常設(shè)計(jì)問題 14
1.8 看吶，不用圖片 17
1.9 HTML5和CSS3現(xiàn)在就能用嗎 20
1.10 響應(yīng)式網(wǎng)頁設(shè)計(jì)不是靈丹妙藥 20
1.11 引導(dǎo)客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致 21
1.12 小結(jié) 22
第2章 媒體查詢：支持不同的視口 23
2.1 現(xiàn)在就能使用媒體查詢 23
2.2 為什么響應(yīng)式設(shè)計(jì)需要媒體查詢 24
2.2.1 媒體查詢語法 24
2.2.2 媒體查詢能檢測(cè)那些特性 26
2.2.3 用媒體查詢改造我們的設(shè)計(jì) 27
2.2.4 加載媒體查詢的最佳方法 27
2.3 我們的第一個(gè)響應(yīng)式設(shè)計(jì) 27
2.3.1 我們的設(shè)計(jì)是固定寬度的，不要驚訝 28
2.3.2 響應(yīng)式設(shè)計(jì)中要保證圖片盡可能精簡(jiǎn) 32
2.3.3 小視口下的內(nèi)容剪切 33
2.4 阻止移動(dòng)瀏覽器自動(dòng)調(diào)整頁面大小 34
2.5 針對(duì)不同視口寬度修正設(shè)計(jì) 37
2.6 響應(yīng)式設(shè)計(jì)中內(nèi)容始終優(yōu)先 38
2.7 媒體查詢只是必要條件之一 42
2.8 小結(jié) 42
第3章 擁抱流式布局 43
3.1 固定布局經(jīng)不起未來考驗(yàn) 43
3.2 為什么響應(yīng)式設(shè)計(jì)需要百分比布局 44
3.3 將網(wǎng)頁從固定布局修改為百分比布局 44
3.3.1 需要牢記的公式 45
3.3.2 設(shè)置百分比元素的上下文 47
3.3.3 必須時(shí)刻牢記上下文 52
3.4 用em替換px 54
3.5 彈性圖片 56
3.5.1 讓圖片隨視口縮放 56
3.5.2 為特定圖片指定特定規(guī)則 58
3.5.3 給彈性圖片設(shè)置閾值 59
3.5.4 超級(jí)全能的max-width屬性 61
3.6 為不同的屏幕尺寸提供不同的圖片 61
3.7 流動(dòng)網(wǎng)格布局和媒體查詢的默契配合 66
3.8 CSS網(wǎng)格系統(tǒng) 66
3.9 小結(jié) 72
第4章 響應(yīng)式設(shè)計(jì)中的HTML5 73
4.1 HTML5的哪些部分現(xiàn)在就能用 73
4.1.1 大多數(shù)網(wǎng)站可以用HTML5編寫 74
4.1.2 膩?zhàn)幽_本和Modernizr 74
4.2 如何編寫HTML5網(wǎng)頁 75
4.2.1 HTML5的精簡(jiǎn)之道 76
4.2.2 HTML5標(biāo)簽的合理寫法 76
4.2.3 偉大的<a>標(biāo)簽萬歲 77
4.2.4 HTML的廢棄零件 77
4.3 HTML5的全新語義化元素 78
4.3.1 <section> 78
4.3.2 <nav> 79
4.3.3 <article> 79
4.3.4 <aside> 79
4.3.5 <hgroup> 79
4.3.6 <header> 81
4.3.7 <footer> 81
4.3.8 <address> 81
4.4 HTML5結(jié)構(gòu)元素的實(shí)際用法 81
4.5 HTML5的文本級(jí)語義元素 87
4.5.1 <b> 88
4.5.2 <em> 88
4.5.3 <i> 88
4.5.4 在頁面中應(yīng)用文本層語義元素 88
4.6 遵循WAI-ARIA實(shí)現(xiàn)無障礙站點(diǎn) 90
4.7 在HTML5中嵌入媒體 93
4.8 用HTML5的方法為頁面添加視頻或音頻 93
4.8.1 提供備用的媒體源文件 95
4.8.2 針對(duì)老版本瀏覽器的備用方案 95
4.8.3 和標(biāo)簽的用法基本一致 96
4.9 響應(yīng)式視頻 96
4.10 離線Web應(yīng)用 99
4.10.1 離線Web應(yīng)用概述 99
4.10.2 讓網(wǎng)頁可離線使用 99
4.10.3 理解manifest文件 100
4.10.4 頁面被自動(dòng)加載到離線緩存 101
4.10.5 版本注釋的用途 101
4.10.6 離線訪問網(wǎng)站 101
4.10.7 離線Web應(yīng)用的故障診斷 102
4.11 小結(jié) 103
第5章 CSS3：選擇器、字體和顏色模式 104
5.1 CSS3給前端開發(fā)人員帶來了什么 104
5.1.1 Internet Explorer 6到8對(duì)CSS3的支持 105
5.1.2 使用CSS3設(shè)計(jì)和開發(fā)頁面 105
5.2 CSS規(guī)則解析 105
5.3 私有前綴及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多欄布局 108
5.4.2 文字換行 110
5.5 CSS3的新增選擇器及其用法 111
5.5.1 CSS3屬性選擇器 111
5.5.2 CSS3結(jié)構(gòu)偽類 113
5.5.3 對(duì)偽元素的修正 122
5.6 自定義網(wǎng)頁字體 123
5.6.1 @font-face規(guī)則 124
5.6.2 使用@font-face嵌入網(wǎng)頁字體 124
5.7 幫幫我，標(biāo)題模糊怎么辦 127
5.8 新的CSS3顏色格式和透明度 129
5.8.1 RGB顏色 130
5.8.2 HSL顏色 131
5.8.3 針對(duì)IE6、IE7和IE8提供備用顏色值 132
5.8.4 透明通道 132
5.9 小結(jié) 134
第6章 用CSS3創(chuàng)造令人驚艷的美 135
6.1 文字陰影 136
6.1.1 HEX、HSL或RGB顏色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字陰影 138
6.1.4 制作浮雕文字陰影效果 139
6.1.5 多重文字陰影 140
6.2 盒陰影 140
6.2.1 內(nèi)陰影 141
6.2.2 多重陰影 142
6.3 背景漸變 143
6.3.1 線性背景漸變 144
6.3.2 徑向背景漸變 147
6.3.3 重復(fù)漸變 149
6.4 背景漸變圖案 151
6.5 CSS3的響應(yīng)性 153
6.6 組合使用CSS3屬性 155
6.7 多重背景圖片 159
6.7.1 背景圖片大小 161
6.7.2 背景圖片位置 161
6.7.3 背景屬性的縮寫語法 161
6.8 更多CSS特性 162
6.9 可縮放圖標(biāo)：響應(yīng)式設(shè)計(jì)中的完美選擇 162
6.10 小結(jié) 163
第7章 CSS3過渡、變形和動(dòng)畫 164
7.1 什么是CSS3過渡以及如何使用它 164
7.1.1 過渡相關(guān)的屬性 166
7.1.2 響應(yīng)式網(wǎng)站中的有趣過渡 168
7.2 CSS3的2D變形 169
7.3 嘗試CSS3的3D變形 174
7.3.1 分析3D變形效果 176
7.3.2 3D變形尚未成熟 178
7.4 CSS3動(dòng)畫效果 179
7.5 小結(jié) 185
第8章 用HTML5和CSS3征服表單 186
8.1 HTML5表單 186
8.1.1 理解HTML5表單中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list（及對(duì)應(yīng)的datalist元素） 191
8.1.7 HTML5的新輸入類型 192
8.1.8 日期和時(shí)間輸入類型 198
8.2 如何給不支持新特性的瀏覽器打補(bǔ)丁 203
8.3 使用CSS3美化HTML5表單 204
8.4 小結(jié) 210
第9章 解決跨瀏覽器問題 211
9.1 漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí) 215
9.2 該不該修復(fù)老版本IE 216
9.2.1 統(tǒng)計(jì)數(shù)據(jù)（再看看世界的變化） 216
9.2.2 個(gè)人選擇 216
9.3 前端的瑞士軍刀：Modernizr 217
9.3.1 使用Modernizr輔助修正樣式問題 219
9.3.2 使用Modernizr讓老版本IE支持HTML5元素 221
9.3.3 給IE6、7、8追加min/max媒體查詢功能 222
9.3.4 使用Modernizr按需加載資源 223
9.4 必要時(shí)將導(dǎo)航鏈接轉(zhuǎn)換為下拉菜單 225
9.5 高分辨率設(shè)備（未來趨勢(shì)） 228
9.6 小結(jié) 231
文首發(fā)于圖靈教育微信本文作者：李松峰
農(nóng)諺：“種地不上糞，等于瞎胡混。”
跟許許多多大城市里的上班族一樣，我也是在農(nóng)村長(zhǎng)大的。因此，毋庸諱言，我小時(shí)候拾過糞。畢竟，那時(shí)候在農(nóng)村長(zhǎng)大的孩子，有幾個(gè)沒拾過糞呢。糞就是屎，主要是牛屎，因?yàn)閭€(gè)頭大，我們那里也把風(fēng)吹日曬干了的牛糞叫作“牛糞坯子”。
屎，本來是廢棄物。但正如牛糞，卻是農(nóng)民種地所必需的天然肥料，是莊稼茁壯成長(zhǎng)的營養(yǎng)來源，更是來年好收成的重要保障。俗話說：“沒有尿屎臭，哪有稻米香？”
如今，我有幸成為一名在前端領(lǐng)域辛勤耕種的碼農(nóng)。就在前幾天，我心血來潮，從電腦里翻出了十幾年前出版的一本CSS名著的第1版（2006年）和第2版（2009年）。翻來翻去，我不禁聯(lián)想到小時(shí)候拾糞的經(jīng)歷。說到這里，不少讀者可能還不明就里，其實(shí)如果你是一名資深前端，我只要提幾個(gè)當(dāng)年火得不得了的技術(shù)你就會(huì)明白我在說什么了。
好吧，閑話少說，言歸正傳。馬上開始我們的CSS拾糞之旅吧！
不知道大部分讀者怎么樣，反正我一聽到這個(gè)詞就會(huì)有一種穿越感。十幾年前，CSS遠(yuǎn)遠(yuǎn)不如今天這么強(qiáng)大。頁面仔們想要在網(wǎng)頁中實(shí)現(xiàn)稍微前沿、酷炫一點(diǎn)的效果，都必須絞盡腦汁。
滑動(dòng)門
“滑動(dòng)門”，即Sliding Doors，是誕生于2003的一種實(shí)現(xiàn)“圓角盒子”技術(shù)。假設(shè)最終要通過CSS實(shí)現(xiàn)下圖中這樣可以伸縮適應(yīng)的圓角盒子：
你會(huì)怎么做？
……等等，那可是在遙遠(yuǎn)的2003年，當(dāng)時(shí)的CSS標(biāo)準(zhǔn)里并沒有'border-radius'這么一個(gè)屬性，更沒有瀏覽器支持類似的特性。于是，一位聰明的大牛Douglas Bowman發(fā)明了“滑動(dòng)門”技術(shù)。其原理如下圖所示：
圖中展示了兩個(gè)GIF圖片：top-left.gif和top-right.gif，前者頭部是一個(gè)1/4圓且比較長(zhǎng)，后者尾部是一個(gè)1/4圓且比較短。
關(guān)鍵是使用'background-image'和'background-position'屬性，后者最終會(huì)覆蓋到前者上面。當(dāng)然，要實(shí)現(xiàn)4個(gè)圓角，就必須要用到4張圖片：
配合HTML標(biāo)記和CSS代碼更容易理解：
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Headline</h2> <p>Content</p > </div> </div> </div>
......
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) ?
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
哇哦，精彩！
可以腦補(bǔ)出來最終效果的同學(xué)請(qǐng)為自己鼓掌，同時(shí)也恭喜你成功撿起了第一塊“牛糞”。暫時(shí)還沒搞明白的小伙伴也不必氣餒，有時(shí)候撿屎本身也是個(gè)技術(shù)活兒呢～
山頂角
“山頂角”，英文是Mountaintop Corners，誕生于2004年，由另一位牛人Dan Cederholm發(fā)明。相比于“滑動(dòng)門”直接用圖片本身充當(dāng)圓角，“山頂角”反其道而行之：用圓角蒙版遮住背景顏色實(shí)現(xiàn)圓角，因此更為靈活。上圖：
如果一看到這張圖你就立即明白了，那恭喜你，第二塊“牛糞”成功入筐。還不明白的同學(xué)，請(qǐng)看以下代碼，HTML跟前面類似，同樣需要4個(gè)元素來應(yīng)用4張背景圖片：
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Headline</h2> <p>Content</p > </div> </div> </div>
CSS也極為相似：
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) ?
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
成功撿到這塊“牛糞”的同學(xué)也不要過分興奮，“山頂角”雖然可以通過簡(jiǎn)單修改背景顏色來改變圓角盒子的顏色，省去重新制作圖片的麻煩，但它也有不足。由于當(dāng)時(shí)每個(gè)角的蒙版圖片是用位圖制作的，所以只適用于制造細(xì)微的曲線，較大弧度的圓角會(huì)顯得粗糙。
不過，瑕不掩瑜。“山頂角”無論如何都是當(dāng)時(shí)制作圓角盒子當(dāng)之無愧的王牌技術(shù)，更是當(dāng)時(shí)每一個(gè)頁面仔的大救星。十幾年后，當(dāng)屏幕前的我們與這塊“牛糞”不期而遇時(shí)，一定也會(huì)暗自贊嘆。關(guān)鍵是，這塊簡(jiǎn)潔巧妙的牛糞，它好撿啊！
多重背景圖片
在前述兩塊重量級(jí)“牛糞”的啟發(fā)下，支持多背景圖片的'background-image'屬性終于應(yīng)運(yùn)而生。于是，更簡(jiǎn)單的實(shí)現(xiàn)方案出現(xiàn)了：
.box {
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: top left,
top right,
bottom left,
bottom right;
}
當(dāng)然，給一個(gè)元素應(yīng)用多個(gè)背景并不局限于實(shí)現(xiàn)圓角盒子效果。至于還可以實(shí)現(xiàn)什么，請(qǐng)相信：限制你的只有你的想象力。
圓角邊框
同樣是在前兩塊“牛糞”滋養(yǎng)的沃土之上，迄今為止最為簡(jiǎn)單強(qiáng)大的'border-radius'屬性也誕生了：
.box {
border-radius: 1em;
}
成功撿起兩塊“牛糞”之后，是不是很有成就感？你還想繼續(xù)撿？沒問題，走著～
想當(dāng)初，不僅僅是實(shí)現(xiàn)圓角盒子需要全世界的大牛為之殫精竭慮，同樣讓他們苦思冥想的還有下拉陰影。
先看看Dunstan Orchard大牛的杰作。其核心思想就是給元素背景上應(yīng)用一大張陰影圖，然后通過負(fù)外邊距把陰影部分顯露出來。
如圖所示，這是一張800px?800px的陰影圖shadow.gif，其右下角放大后看可以看到5像素的陰影。以下是要應(yīng)用陰影效果的HTML：
<div class="img-wrapper"> < img src="dunstan.jpg" width="300"? height="300" alt="Dunstan Orchard" /> </div>
顯然，這是一個(gè)容器'div'中包含一張人物圖片（dunstan.jpg）。為了讓容器'div'包裹住圖片，首先要利用'float'讓這個(gè)塊級(jí)元素收縮，從而包裹住其中的圖片：
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
但這樣背景圖片完全隱藏在了人物圖片下方，為了讓它顯露出來，還必須配合神奇的負(fù)外邊距：
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
于是，立體感十足的陰影效果做成了，見下圖：
不過，這硬邊陰影看著也忒不自然了，就算是在十幾年前也是無法接受的。那好，這塊“牛糞”還要做大點(diǎn)。為了模擬出自然的陰影，還需要一張與剛才的陰影圖片對(duì)角的模糊蒙版：
HTML標(biāo)記也要再嵌套一層'div'：
<div class="img-wrapper"> < img src="dunstan.jpg" width="300"? height="300" alt="Dunstan Orchard" /> </div>
首先，還是給最外層的容器'div'應(yīng)用硬邊陰影背景，定位在右下角：
.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
然后，給內(nèi)層的'div'應(yīng)用模糊蒙版背景，定位在左上角：
.img-wrapper div {
background: url(images/mask.png) no-repeat left top;
padding: 0 5px 5px 0;
}
最后，再給圖片添加個(gè)邊框：
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
大功告成：
完美！
這塊大“牛糞”威力夠大，直接催生了'box-shadow'：
img {
box-shadow: 3px 3px 6px #666;
}
這里用了僅僅一個(gè)屬性，而且效果同上。冗長(zhǎng)的HTML和CSS代碼不見了，它們?nèi)ツ膬毫耍磕沁€用問，它們已經(jīng)化作沉甸甸的“牛糞”裝進(jìn)了你我的糞筐里。恭喜你再次撿屎成功！
想當(dāng)年，大牛們?yōu)榱耸褂锰厥庾煮w實(shí)現(xiàn)不一樣的視覺效果，必須先把文字轉(zhuǎn)換成圖片，因?yàn)橛脩魴C(jī)器上已安裝的通用字體數(shù)量有限。但圖片對(duì)搜索引擎不友好，于是有牛人想出了點(diǎn)子。總體的思路是像往常一樣使用文本，讓搜索引擎可以找到，同時(shí)再通過某種方式讓它對(duì)用戶不可見，只顯示包含特殊字體效果的圖片。
比如，Todd Fahrner的Fahrner Image Replacement (FIR)。先把文本包一個(gè)'span'中：
<h2> <span>Hello World</span> </h2>
然后給標(biāo)題'h2'添加背景：
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
最后，隱藏'span'：
span {
display: none;
}
可是，由于多數(shù)屏幕閱讀器會(huì)忽略'display:none;'的元素，從而導(dǎo)致嚴(yán)重的無障礙問題。所以，這個(gè)看似簡(jiǎn)單的方案實(shí)踐中并不可行。
于是，另一位牛人Mike Rundle想出了一個(gè)兩全其美的點(diǎn)子：使用負(fù)文本縮進(jìn)把文本拉到屏幕之外！
這下HTML還更簡(jiǎn)單了：
<h2> Hello World </h2>
CSS：
h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}
這就解決了屏幕閱讀器用戶的問題。但還沒有完，新的問題又出來了。在當(dāng)時(shí)網(wǎng)絡(luò)速度很慢的情況下，可能會(huì)有用戶禁用瀏覽器顯示圖片的功能，而CSS照樣起作用。這是一種極端情況，這時(shí)候用戶會(huì)既看不到文本，也看不到圖片。
追求完美的大牛們又開始行動(dòng)了。Tom Gilder和Levin Alexander最終找到了既對(duì)屏幕閱讀器友好，又能在禁用圖片打開CSS的情況下讓文本對(duì)用戶可見的方案。
這個(gè)方案首先要在被替換的元素內(nèi)額外添加一個(gè)空標(biāo)簽（'span'）：
<h2> <span></span>Hello World </h2>
然后，將容器設(shè)置為相對(duì)定位：
h2 {
width: 150px;
height: 35px;
position: relative;
}
'position:relative;'將容器設(shè)定為其中'span'的定位上下文。接下來，把背景應(yīng)用給'span'，并采用絕對(duì)定位，而寬和高均為父元素的'100%'會(huì)讓它完全把文本蓋在下面：
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
這里只有一個(gè)問題，此時(shí)的圖片必須完全不透明，否則下面的文本就會(huì)“走光”。
如前所述，這幾塊“牛糞”最終要解決的是用戶計(jì)算機(jī)上字體匱乏的問題。這些需求最終也催生了十幾年后可以廣泛使用的Web字體。
@font-face {
font-family: Vollkorn;
src: url('fonts/Vollkorn-Regular.eot#?ie') format('embedded-opentype'),
url('fonts/Vollkorn-Regular.woff2') format('woff2'),
url('fonts/Vollkorn-Regular.woff') format('woff'),
url('fonts/Vollkorn-Regular.ttf') format('truetype'),
url('fonts/Vollkorn-Regular.svg') format('svg');
}
Web字體是一個(gè)大話題，在此我們就不過多涉及了。總之，我們?cè)僖淮我娮C了“牛糞”的力量，同時(shí)也給我們今天的拾糞之旅畫上了一個(gè)完美的句號(hào)。
天下碼農(nóng)千千萬，大牛卻不多。大牛之所以成為大牛，通常都會(huì)給數(shù)年后的從業(yè)者留下可供撿拾的“牛糞”。今天我們的拾糞之旅，既是對(duì)CSS歷史上曾經(jīng)輝煌一時(shí)的技術(shù)的巡禮，更是對(duì)如群星般璀璨的大牛們的致敬。
這些曾經(jīng)紅極一時(shí)的技術(shù)在今天看來或許不值一提，甚至幼稚可笑。然而，“后之視今，亦猶今之視昔。”今天被頂禮膜拜、推崇備至的技術(shù)，十幾年后再看，或許同樣不值一提，甚至幼稚可笑。但不容否認(rèn)的是，恰恰是這些今天看來簡(jiǎn)單、幼稚的“牛糞”，孕育、滋養(yǎng)了一代一代技術(shù)人，推動(dòng)著技術(shù)不斷進(jìn)步和突破。人類社會(huì)就是這樣一路走過來的。
朝花夕拾。從拾糞的視角看，我們不禁深思：今天的碼農(nóng)，有幾人能留下供十年后的人撿拾的“牛糞”呢？所以，今天起，給自己定個(gè)小目標(biāo)，著手準(zhǔn)備我們的明日份“牛糞”吧！
看到這里，有好奇的同學(xué)可能會(huì)問：這些“牛糞”到底來自哪本CSS名著，能否透露一下？當(dāng)然可以。它們就是CSS Mastery: Advanced Web Standards Solutions （中文版《精通CSS》）的第1版和第2版。而且，這本名著的最新版也就是第3版的中文版也剛剛上市。值得一提的是，《精通CSS（第3版）》里可是滿滿的“明日份牛糞”哦，如果想開啟你的CSS“撿屎”之旅，那一定會(huì)是個(gè)不錯(cuò)的體驗(yàn)。
CSS暢銷經(jīng)典全面升級(jí)，充分展示現(xiàn)代CSS實(shí)踐技巧
本書是CSS經(jīng)典圖書升級(jí)版，結(jié)合CSS近年來的發(fā)展，尤其是CSS3和HTML5的特性，對(duì)內(nèi)容進(jìn)行了全面改寫。本書介紹了涉及字體、網(wǎng)頁布局、響應(yīng)式Web設(shè)計(jì)、表單、動(dòng)畫等方面的實(shí)用技巧，并討論了如何實(shí)現(xiàn)穩(wěn)健、靈活、無障礙訪問的Web設(shè)計(jì)，以及在技術(shù)層面如何實(shí)現(xiàn)跨瀏覽器方案和后備方案。本書還介紹了一些鮮為人知的高級(jí)技巧，讓你的Web設(shè)計(jì)脫穎而出。
搶先入門升級(jí)版？戳【了解更多】到京東購買
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
