地址：https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp
開始學習HTML標簽：
歡迎來到編程訓練營的第一個編程挑戰！
你可以在文本編輯器中編輯我們嵌入到此網頁中的代碼。
界面說明：左邊是課程內容區、中間是代碼編輯區、右邊是運行顯示區。
你在文本編輯器中看到代碼 <h1>Hello</h1> 了嗎?這是一個HTML 元素 。
大多數HTML元素都有一個 開始標簽 和一個 結束標簽 。
開始標簽看起來像這樣： <h1>
結束標簽看起來像這樣： </h1>
請注意，開始標簽和結束標簽之間的唯一區別是結束標簽后面多了一個 /（斜杠）。
每個挑戰都有測試，你可以隨時點擊“運行”按鈕運行。一旦你通過所有的測試，你可以進行下一個挑戰。
要通過這個挑戰的測試，將你的h1元素的文本改為“Hello World”而不是“Hello”。然后點擊“運行”按鈕。
<h1>Hello World</h1>
HTML學習h2標簽：
在接下來的幾個挑戰中，我們將構建一個看起來像這樣的HTML5應用程序：
A screen shot of our finished Cat Photo App
你輸入的 h2 元素將在網站上創建一個 h2 元素。
該元素告訴瀏覽器你的網站的結構。h1 元素通常用於主標題，而 h2 元素通常用於副標題。還有 h3，h4，h5 和 h6 元素來表示不同的和新的部分。
添加一個表示“CatPhotoApp”的 h2 標簽，在“Hello World”h1 元素下方創建第二個HTML 元素 。
<h1>Hello World</h1> <h2>CatPhotoApp</h2>
HTML 學習p標簽：
p元素是網站上正常段落文本的首選元素。P是“paragraph”的縮寫。
你可以創建一個這樣的p元素： <p>我是一個p標簽!</p>
任務：在你的 h2 元素下面創建一個 p 元素，段落的文本為“Hello Paragraph”。
<h1>Hello World</h1> <h2>你好html</h2> <p>Hello Paragraph</p>
刪除HTML的注釋：
注釋是一種方式，你可以在代碼中留下注釋，而不會影響代碼本身。
注釋也是使代碼無效而不必完全刪除的便捷方式。
你可以使用 <!-- 開始添加注釋，並用 --> 結束注釋。
任務：刪除注釋 h1，h2 和 p 元素。
<h1>Hello World</h1> <h2>你好html</h2> <p>Hello Paragraph</p>
HTML注釋語句學習：
請記住，開始注釋，你需要使用 <!--，結束注釋，你需要使用 -->。
在這里，你需要在 h2 元素開始之前結束注釋。
任務：注釋 h1 元素和p 元素，刪除 h2 元素的注釋。
<!-- <h1>Hello World</h1> --> <h2>html編程入門教程</h2> <!-- <p>Hello Paragraph</p> -->
HTML用占位符文本填補空白：
Web開發者通常將 lorem ipsum text 用作占位符文本。占位符就是一些文字占着位置，沒有實際意義。
“lorem ipsum”的文字是由古羅馬的西塞羅從一個著名的段落中隨機而出的。
自公元16世紀以來，Lorem ipsum文字已被排版用作占位符文本，而這種傳統在網絡上繼續存在。
那么，5 個世紀是足夠長的。因為我們正在建立一個 CatPhotoApp， 讓我們使用的東西叫 kitty ipsum text 。
任務：把 p 元素中的文本替換為：Monkey code 猴哥猴哥，你真了不得，五行大山壓不住你，蹦出個孫行者。
<h1>西游記</h1> <h2>齊天大聖</h2> <h2>孫悟空</h2> <p>Monkey code 猴哥猴哥，你真了不得，五行大山壓不住你，蹦出個孫行者。</p>
刪除HTML標簽：
我們的手機屏幕空間是有限的。
讓我們刪除不必要的元素，以便開始構建我們的CatPhotoApp。
任務：刪除你的h1元素，以便簡化我們的視圖。
<!-- <h1>Hello cat!</h1> --> <h2>編程入門教程</h2> <p>在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
HTML 更換文本的顏色：
現在我們來改變一些文字的顏色。
我們可以通過修改 h2 元素的 style (樣式)來做到這一點。
樣式的屬性有很多，其中color用來指定顏色。
以下是將你的 h2 元素的文本顏色設置為藍色的示例：
<h2 style="color: blue">CatPhotoApp</h2>
更改你的 h2 元素的樣式，使其文本顏色變為紅色。
<h2 style="color:#FF0000;">html編程入門教程</h2> <p>在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
使用CSS選擇器定義標簽：
使用CSS，您可以使用數百種CSS屬性來更改元素在頁面上的顯示方式。
當你輸入<h2 style="color: red">CatPhotoApp</h2>時，你就給h2元素添加了inline style(內聯樣式)。
這是添加元素的樣式的一種方法，但更好的方法是使用CSS，它代表(Cascading Style Sheets)層疊樣式表。
在代碼的頂端，創建一個如下所示的style元素，：
<style>
</style>
在這個style元素的內部, 你可以為所有h2元素創建一個CSS選擇器。例如，如果你希望所有的h2元素都設置為紅色, 則你的樣式元素將如下所示：
<style>
選擇器 {屬性名稱: 屬性值;}
h2 {color: red;}
</style>
請注意，圍繞每個元素的樣式，打開和關閉花括號 ({ 和}) 很重要。您還需要確保元素的樣式位於開始和結束樣式標簽之間。最后，請確保將分號添加到每個元素樣式的末尾。
刪除你的h2元素的樣式屬性，而不是創建一個CSSstyle元素。添加必要的CSS，以將所有h2元素變為藍色。
<style> h2{color:#0000FF;} </style> <h2>html編程入門教程</h2> <p>在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
使用一個CSS Class去給標簽定義Style：
類是可重用的樣式，可以添加到HTML元素。
下面是一個CSS類聲明的例子：
<style>
.blue-text {
color: blue;
}
</style>
你可以看到我們已經在 <style> 標簽中創建了一個名為 blue-text 的CSS類。
你可以將類應用於HTML元素，如下所示：
<h2 class="blue-text">CatPhotoApp</h2>
請注意，在CSS樣式元素中，類選擇器應該添加.為前綴。而在HTML元素的類聲明中，類屬性不能添加.為前綴。
在你的style元素中，將h2選擇器修改為.red-text選擇器，並將顏色值從blue修改為red。
最后，給你的 h2 元素的 class 屬性的值為.red-text。
<style> h2 { color: blue; } .red-text { color: red; } </style> <h2 class="red-text">html編程入門教程</h2> <p>在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
HTML 為多個元素使用CSS類定義樣式：
請記住，你可以通過在相關元素的開始標簽中使用 class="your-class-here" 將類附加到HTML元素。
記住，CSS類選擇器在開始時需要添加 . 為前綴，如下所示：
.blue-text {
color: blue;
}
但是還要記住，在HTML中class屬性的值不需要添加 . 為前綴，如下所示：
<h2 class="blue-text">CatPhotoApp</h2>
將 red-text 類應用於你的 h2 和 p 元素中。
<style> .red-text { color: red; } </style> <h2 class="red-text">html編程入門教程</h2> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
HTML 設置標簽的字體大小：
字體大小由 font-size CSS屬性控制，如下所示：
h1 {
font-size: 30px;
}
在現有 p 元素之后創建第二個 p 元素，並使用以下文本：
養動物有的時候，就是介於愛與恨之間，當你欽羡別人萌寵這么可愛的時候，你一定沒有想過，狗狗和貓貓會到處拉屎，甚至會屯老鼠，啃鞋子，用爪子爬門，你不理它，它就撓你，你要對它發脾氣，它會比你更來勁。所以，狗貓慎入，沒有一定的准備，切勿隨便去侍養動物。它們一旦認定你了，你就是它們的主人，如果你拋棄它們，它們必定心中重創。
在包含 red-text 類的同一 <style> 標簽內，為 p 元素創建一個 font-size 屬性，並將 font-size 設置為16像素（16px）。
任務：將第一個段落和第二個段落的 font-size 設置為 16px。
另外，請不要為第二個段落添加 class 屬性。
<style> .red-text { color: red; font-size: 16px; } </style> <h2 class="red-text">我家的貓咪</h2> <p class="red-text">在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一只寵物上，怎能不惹人憐愛。</p> <p style="font-size:16px;">養動物有的時候，就是介於愛與恨之間，當你欽羡別人萌寵這么可愛的時候，你一定沒有想過，狗狗和貓貓會到處拉屎，甚至會屯老鼠，啃鞋子，用爪子爬門，你不理它，它就撓你，你要對它發脾氣，它會比你更來勁。所以，狗貓慎入，沒有一定的准備，切勿隨便去侍養動物。它們一旦認定你了，你就是它們的主人，如果你拋棄它們，它們必定心中重創。 </p>
HTML 設置標簽的字體樣式：
你可以使用 font-family 屬性來設置元素的字體。
例如，如果要將 h2 元素的字體設置為 Sans-serif ，則可以使用以下CSS：
h2 {
font-family: Sans-serif;
}
使不包含 red-text類的p元素都使用Monospace字體。
<style> .red-text { color: red; } p { font-size: 16px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p style="font-family:Monospace;">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
引入Google字體：
現在, 讓我們引入並應用 google 字體 (請注意, 如果 google 在你的國家被阻止, 你需要跳過這一挑戰)。
首先，你需要用 link 標簽來引入谷歌Lobster字體。
復制以下代碼段並將其粘貼到代碼編輯器的頂部：
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
現在，你可以將 Lobster 作為 font-family屬性 的值應用於你的 h2 元素上。
將你的 h2 元素應用 font-family 屬性，值為Lobster。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } p { font-size: 16px; font-family: Monospace; } </style> <h2 class="red-text" style="font-family:Lobster">CatPhotoApp</h2> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 處理多個字體降級：
在所有瀏覽器中都有幾種可用的默認字體。這些包括 Monospace 、Serif 和 Sans-Serif。
當某種字體不可用時，你可以讓瀏覽器將其 “降級” 為另一種字體。
例如，如果你希望元素使用 Helvetica 字體，但是當 Helvetica 不可用時也會降級為Sans-Serif 字體，則可以使用此CSS樣式：
p {
font-family: Helvetica, Sans-Serif;
}
現在，你可以注釋掉對Google字體的使用，注釋掉link標簽，以使 Lobster 字體不可用。請注意觀察它是如何降級為 Monospace 字體的。
<!-- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> --> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } </style> <h2 class="red-text">CatPhotoApp</h2> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 給頁面添加圖片：
你可以使用 img 元素將圖片添加到您的網站，並使用 src 屬性指向一個圖片的具體地址。
例子如下：
<img src="https://www.your-image-source.com/your-image.jpg">
img 元素具有 alt 屬性。alt 屬性中的文本用於屏幕閱讀器以提高可訪問性，並且如果圖像無法加載，則會顯示。
讓我們在上面的 img 示例中添加一個 alt 屬性：
<img src="https://www.your-image-source.com/your-image.jpg" alt="your-image">
請注意，img 元素是自關閉元素，不需要結束標簽。
請用以下圖片來測試：
/statics/codecamp/images/relaxing-cat.jpg
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } </style> <h2 class="red-text">html編程入門教程</h2> <img src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">貓咪貓咪我就喜歡你</p> <p class="red-text">深深地愛上你</p> <p class="red-text">沒有理由沒有原因</p> <p class="red-text">從見到你的那一天起</p> <p class="red-text">你知道我在等你嗎?</p> <p class="red-text">你如果真的在乎我</p> <p class="red-text">又怎會讓無盡的夜陪我度過</p> <p class="red-text">貓咪貓咪我就喜歡你</p> <p class="red-text">深深地愛上你</p> <p class="red-text">在黑夜里傾聽你的聲音</p>
HTML 調整網頁里圖片大小：
CSS包含一個 width 的屬性，用於控制元素的寬度。就像使用字體一樣，我們將使用 px（像素）來指定圖片的寬度。
例如，如果我們要創建一個名為 larger-image 的CSS類，把HTML元素的寬度設定為500像素，我們將使用：
<style>
.larger-image {
width: 500px;
}
</style>
任務：創建一個名為smaller-image的類，並使用它來調整圖片的大小，使其只有100像素寬。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .smaller-image{ width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <img src="/statics/codecamp/images/relaxing-cat.jpg" class="smaller-image"> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 給標簽增加邊框：
CSS 邊框具有 style(樣式)、color(顏色)、width(寬度) 等屬性。
例如，如果我們想要設定一個HTML元素的邊框顏色為紅色、邊框寬度為5像素(px)、邊框樣式為實線(solid)，代碼如下所示:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
任務：創建一個叫 thick-green-border的class，設定它的邊框寬度為10px、邊框樣式為solid、邊框顏色為綠色，並將該class應用於你的貓咪照片上。
請記住，你可以應用多個class到一個元素，只需要在多個class之間用空格分開即可。例如：
<img class="class1 class2">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .smaller-image { width: 100px; } .thick-green-border { border-width:10px; border-style:solid; border-color:green; } .thick-green-border{ border-color: green; border-width: 10px; border-style: solid; } </style> <h2 class="red-text">CatPhotoApp</h2> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 給標簽增加圓角邊框：
貓咪圖片的邊框目前有尖角。我們可以用一個叫 border-radius（邊框半徑）(存在瀏覽器兼容問題)的CSS屬性來改變它的邊框變成圓角。
你可以使用像素來指定 border-radius 的屬性值，給你的貓咪圖片的 border-radius 設定為10px。
注意：這個任務允許有多種解決方案。例如，你可以添加border-radius到 .thick-green-border 類或 .smaller-image 類。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 10px 10px; } .smaller-image { width: 100px; } </style> <h2 class="red-text">html編程入門教程</h2> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">我家兩歲的小公貓哈哈是個收藏家，臭魚爛蝦，雞頭豬手，無所不愛。清晨我還在睡夢中，突然覺得胸口一沉，恍惚中意識到哈哈又跑到我身上來撒嬌，心里不由得滾起溫暖的熱流，拉過哈哈一把從頭摸過背，小家伙順勢想往被子里鑽，我一邊拒絕着一邊往上拉被子，突然腳下一涼，爛泥一樣掛在我的大腳趾上的是一塊垃圾箱里的魚頭！我頓時睡意全無，換床單洗被罩，天光放亮才勉強收拾妥當。害得我帶着熊貓眼跑去上班，一天都沒有好心情。實在搞不懂它為什么愛把垃圾叼上床，是故意惡作劇？還是我給的貓糧不夠吃？</p> <p class="red-text">有時候貓會把主人當成自己的孩子(聽起來有點令人窩心)，這種行為是在給家里帶來獵物。它把自己看成是家里的頂梁柱，有責任給不爭氣的主人找來食物——貓咪通過長時間對你的觀察，沉痛地發現你不會打獵。經常出門的貓咪會把它逮到的老鼠、小鳥帶回家里，不出門的就經常翻翻垃圾箱找點東西給你。這個時候，主人可不要責罵它，不然它會認為你對它帶回來的食物不滿意，下次去找更了不起的東西帶回來，放在房間里最顯眼的地方。但如果你看見它往家里運輸死老鼠，最好也別謝它，別讓它覺得你對這種獵物很滿意，下次照單帶回來。最好的辦法是心里感念着貓咪所為你做的，並默默地收拾好一切。</p>
HTML 給圖像設置圓角邊框：
除了像素之外，你還可以使用百分比來指定 border-radius（邊框半徑）的值。
給你的貓咪圖片設定 border-radius 為 50%。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 設置鏈接錨元素外部頁面：
a元素，也叫anchor（錨點）元素，用於鏈接到當前頁面之外的內容。
下面是一張a元素的圖示。在這種情況下，a元素位於段落元素的中間使用，這意味着鏈接將出現在段落的中間。
以下是一個例子：
<p>這是一個a標簽 <a href="https://www.w3cschool.cn">W3Cschool.cn</a>跳轉到W3Cschool.cn</p>
任務：創建一個鏈接到http://freecatphotoapp.com的a元素，並將cat photos作為其anchor text（錨文本）。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p> <a href="http://freecatphotoapp.com">cat photos</a>
HTML 在p標簽內設置錨鏈接：
Nesting（嵌套）就是把一個元素放在另一個元素中。
例如：
<p>Here's a <a href="https://www.w3cschool.cn"> link to W3Cschool.cn</a> for you to follow.</p>
任務：現在把你的a元素嵌入進一個新的p元素（在現有的h2元素之前），讓段落的文本顯示為View more cat photos，但只有cat photos是一個鏈接，其余的文字是純文本。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>View more <a href="https://www.w3cschool.cn">cat photos</a></p> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 使用#符合設置固定鏈接：
有時你想要在你的網站上添加一個 a 元素，但你還不知道將它鏈接到哪里，這時你可以使用固定連接。
當你使用 jQuery 更改鏈接的行為時，這也很方便，我們稍后將會了解。
把 a 元素的 href 屬性的值替換為一個 # （# 也稱為哈希符號），將其轉換為一個固定鏈接。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 為圖片設置超鏈接：
你可以通過將某元素嵌套在a元素中使其變為一個鏈接。
把你的圖片嵌入到a元素中。例子如下：
<a href="#"><img src="/images/relaxing-cat.jpg"></a>
請記住使用 # 作為元素的 href 屬性, 以便將其轉換為固定鏈接。
將現有的圖像元素放置在錨點元素中。
完成后，把你的光標懸停在你的圖片上。此時光標應該由光標指針變成手形指針。這張圖片現在是一個鏈接了。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"> <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 為圖片添加alt描述：
alt 屬性， 是當圖片無法顯示時的替代文本。alt 屬性對於盲人或視覺障礙的用戶理解圖片中的內容非常重要，搜索引擎也會搜索alt 屬性來了解圖片的內容。
總而言之，alt 屬性是一個必需的屬性，為頁面上的圖片都加上 alt 屬性是好習慣。
你可以像下面例子中一樣為img元素添加一個 alt 屬性：
<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
為你的貓咪圖片添加一個 alt 屬性，內容為A cute orange cat lying on its back。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a> <p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p> <p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>
HTML 創建項目符號無序列表：
HTML具有用於創建 unordered lists（無序列表） ，或帶項目符號列表的特殊元素。
無序列表以 <ul> 元素開始，並包含一個或多個<li>元素。
例如：
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
將會創建一個帶項目符號的"milk"和"cheese"列表。
刪除最后兩個 p 元素，並在頁面底部創建一個有關貓咪喜歡的三件事情的無序列表。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
HTML 創建有序列表：
HTML具有用於創建ordered lists（有序列表）, 或數字編號列表的特殊元素。
有序列表以<ol>元素開始，並包含一個或多個<li>元素。
例如：
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
將創建一個包含"Garfield"和"Sylvester"的數字編號列表。
創建一個有關 “Top 3 things cats hate:” （貓咪不喜歡三件事情）的有序列表。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ol>
HTML 創建文本輸入框：
現在我們來創建一個Web表單。
文本輸入框是獲取用戶輸入的一種方便的方法。
你可以用如下方法創建：
<input type="text">
注意，input元素是自關閉的。
任務：在列表下創建一個type（類型）為 text 的input元素。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <input type="text">
HTML 為文本輸入框設定預定值：
placeholder text（占位符）是用戶在 input 框輸入任何內容之前放置在 input 框中的預定義文本。
你可以創建如下所示的占位符：
<input type="text" placeholder="this is placeholder text">
將文本 input 框的placeholder的值設置為"cat photo URL"。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <input type="text" placeholder="cat photo URL">
HTML 添加表單：
你可以使用HTML來構建跟服務器交互的Web表單。你可以通過在form元素上添加一個action屬性來執行此操作。
action屬性的值指定了表單提交到服務器的地址。
例如：
<form action="/url-where-you-want-to-submit-form-data"></form>
把你的文本輸入框嵌套到form元素中。並為此form元素添加action="/submit-cat-photo"。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
HTML 為表單添加提交按鈕：
我們在form中添加一個 submit (提交)按鈕。點擊此按鈕，表單中的數據將會被發送到你使用表單 action 屬性指定的地址上。
以下是一個submit按鈕的例子：
<button type="submit">this button submits the form</button>
在你的 form 元素中添加一個提交按鈕，並以類型為 submit， "Submit"為按鈕文本。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL"> <button type="submit">Submit</button> </form>
HTML 使用HTML5技術把表單設置為必填：
對於表單，你可以指定某些選項為required（必填項），只有當用戶填寫了該選項后，用戶才能夠提交表單。
例如，如果你想要一個文本輸入框設置為必填項，你可以在 input 元素中加上 required 屬性，你可以使用：
<input type="text" required>
任務：給你的文本輸入框添加 required屬性，這樣用戶不填寫輸入框就無法提交表單。
然后嘗試不填寫任何文本就提交表單。了解你的瀏覽器如何提示你該字段是必填項？
注意：required屬性在Safari瀏覽器中不起作用，請用其他瀏覽器來練習學習。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
HTML 添加單選框：
你可以使用單選按鈕來解決你希望用戶只給出一個答案的問題。
單選按鈕是 input 輸入框的一種類型。
每個單選按鈕都應該嵌套在自己的 label(標簽) 元素中。
所有關聯的單選按鈕應具有相同的 name 屬性。
下面是一個單選按鈕的例子：
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
在你的表單中添加兩個單選按鈕，一個叫 indoor，另一個叫 outdoor。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> <label><input type="radio" name="indoor-outdoor"> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> </form>
HTML 添加復選框：
checkboxes（復選按鈕）通常用於可能有多個答案的問題的形式。
復選按鈕是 input 的輸入框的一種類型。
每一個復選按鈕都應嵌套在其自己的 label元素中。
所有關聯的復選按鈕輸入應該具有相同的 name屬性。
以下是一個復選按鈕的示例：
<label><input type="checkbox" name="personality"> Loving</label>
任務：為你的表單添加三個復選按鈕，每個復選按鈕都應嵌套在其自己的 label 元素，所有復選按鈕的name屬性必須為personality。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor"> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <input type="text" placeholder="cat photo URL" required><br> <label><input type="checkbox" name="personality"> Loving</label> <label><input type="checkbox" name="personality"> Loving</label> <label><input type="checkbox" name="personality"> Loving</label> <button type="submit">Submit</button> </form>
HTML 使用checked屬性設置復選框和單選框默認被選中：
使用 checked 屬性，你可以設置一個單選框和復選框默認被選中。
為此，只需在 input 元素中添加屬性checked 。例如：
<input type="radio" name="test-name" checked>
設置你的第一個單選框和第一個復選框都為默認選中。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
HTML 在div元素中嵌套多個元素：
div 元素，也被稱作division(層)元素，是一個盛裝其他元素的通用容器。
div 元素是最常用的HTML元素。所以可以利用CSS的繼承關系把 div 上的CSS傳遞給它所有子元素。
你可以使用<div>來標記一個div元素的開始，並使用</div>來標記一個div元素的結束。
嘗試在你的"Things cats love" p元素之前放置div的開始標記，在你的ol結束標記之后放置div的結束標記，這樣你的兩個列表就都嵌套在div中了。
把"Things cats love"和"Things cats hate"兩個列表都嵌套在同一個div元素中。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
HTML 為div元素設置背景顏色：
你可以使用 background-color 屬性來設置一個元素的背景顏色。
例如，如果你想要設置一個元素的背景顏色為green，你可以將其放在你的 style 元素中：
.green-background {
background-color: green;
}
創建一個叫 gray-background 的類選擇器，設置其 background-color 為 gray，最后應用到你的 div 元素。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .gray-background{ background-color: gray; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <div class="gray-background"> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
HTML 為標簽添加ID屬性：
除了 class屬性之外，每一個 HTML 元素也可以具有 id 屬性。
使用 id 屬性有很多好處，一旦你開始使用jQuery，你將了解更多信息。
id 屬性應該是唯一的。雖然瀏覽器不會強制唯一，但這是被廣泛認可的。所以請不要給一個以上的元素相同的 id 屬性。
以下是一個例子，說明如何設置h2 元素的id屬性為cat-photo-app。
<h2 id="cat-photo-app">
任務：設置 form 元素的id屬性為 cat-photo-form。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .gray-background { background-color: gray; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <div class="gray-background"> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo" id="cat-photo-form"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
HTML 使用ID屬性設置標簽樣式：
關於id屬性的一個很酷的事情是，像類選擇器一樣，你可以使用CSS來設計樣式。
以下是一個示例，說明如何使用 cat-photo-element 的id屬性來獲取元素 ，並設置背景顏色為綠色。在你的style 元素中：
#cat-photo-element {
background-color: green;
}
請注意，在你的 style 元素中，定義類選擇器必須添加 . 為前綴，定義ID選擇器必須添加 # 為前綴。
任務：嘗試給你的 form，添加一個值為 cat-photo-form 的 id 屬性，一個綠色的背景。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .gray-background { background-color: gray; } #cat-photo-form{ background-color: green; } </style> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <div class="gray-background"> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo" id="cat-photo-form"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
HTML 使用padding布局頁面標簽：
現在讓我們把 Cat Photo App 暫時放一邊，並了解學習更多關於的 HTML 樣式。
你可能已經注意到了這一點，所有的 HTML 元素本質上都是一些小矩形塊。
有三個重要的屬性控制每個HTML元素的布局：padding(內邊距)、margin(外邊距)、border(邊框)。
元素的 padding 控制元素與其邊框 border 之間的距離。
在這里，我們可以看到，綠方塊和紅方塊都位於黃方塊中。請注意，紅方塊具有比綠方塊具有更大的 padding。
當你增大綠方塊的 padding時, 它將增加元素內容和元素邊框之間的距離。
任務：修改綠方塊的 padding ，以使它與紅方塊匹配。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: red; padding: 20px; } .green-box { background-color: green; padding: 20px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
HTML 使用margin布局頁面標簽：
元素的 margin （外邊距）控制元素 border （邊框）和周圍元素實際所占空間的距離。
在這里，我們可以看到，綠方塊和紅方塊都位於黃方塊中。請注意，紅方塊具有比綠方塊更大的 margin（外邊距），使其看起來更小。
當你增大綠方塊的 margin 時，它將增加元素邊框和元素實際所占空間之間的距離。
修改綠方塊的 margin ，以使它與紅方塊匹配。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: red; padding: 20px; margin: 20px; } .green-box { background-color: green; padding: 20px; margin: 20px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
HTML 使用負值設置頁面元素的margin屬性：
元素的 margin （外邊距）控制元素的 border（邊框）和周圍元素實際所占空間的距離。
如果將一個元素的 margin 設置為負值，則元素將會變大。
嘗試將 margin設置為負值，如紅方塊。
任務：把 green-box 的 margin 設置為 -15px，以使它將父容器(黃方塊)的橫向寬度填充。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: red; padding: 20px; margin: -15px; } .green-box { background-color: green; padding: 20px; margin: -15px; } </style> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
HTML 為不同方向padding設置不同的值：
有時你將需要自定義一個元素，使它的每一個邊具有不同的 padding。
CSS 允許你使用 padding-top、padding-right、padding-bottom 和 padding-left屬性來控制元素四個方向的 padding。
使你的 green-box class的頂部和左側具有 40px 的 padding，而底部和右側則是 20px。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: red; padding-top: 40px; padding-right: 20px; padding-bottom: 20px; padding-left: 40px; } .green-box { background-color: green; padding-top: 40px; padding-right: 20px; padding-bottom: 20px; padding-left: 40px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
HTML 為不同方向margin設置不同的值：
有時你將需要自定義一個元素，使它的每一個邊具有不同的 margin。
CSS 允許你使用 margin-top、margin-right、margin-bottom 和 margin-left 屬性來控制元素四個方向的margin。
使你的 green-box class的頂部和左側具有 40px 的 margin，而底部和右側則是 20px。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: red; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } .green-box { background-color: green; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
HTML CSS中padding簡寫：
除了分別指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 屬性外，你還可以集中起來指定它們，如下所示：
padding: 10px 20px 10px 20px;
這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。
使用順時針表示法，給".green-box" class在其頂部和左側具有 40px 的 padding，而底部和右側具有 20px 的 padding。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 20px 40px 20px 40px; } .red-box { background-color: red; padding: 20px 40px 20px 40px; } .green-box { background-color: green; padding: 40px 20px 20px 40px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
HTML CSS中margin簡寫：
讓我們用 margin 再試一次。
除了分別指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 屬性外，你還可以集中起來指定它們，如下所示：
margin: 10px 20px 10px 20px;
這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。
使用 順時針表示法 ，給 "green-box" class 的元素在其頂部和左側具有 40px 的 margin，而底部和右側具有 20px 的 margin。
<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 20px 40px 20px 40px; } .red-box { background-color: red; margin: 20px 40px 20px 40px; } .green-box { background-color: green; margin: 40px 20px 20px 40px } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>
CSS 樣式的繼承
現在讓我們全新開始，並談談CSS 繼承。
每一個 HTML 頁面都有一個 body 元素。
我們可以證明body元素的存在，將其 background-color 設置為黑色。
我們可以通過將以下代碼添加到我們的style元素中：
body {
background-color: black;
}
<style> body { background-color: black; } </style>
CSS 繼承Body元素樣式：
現在我們已經證明，每個HTML頁面都有一個body元素，並且它的body元素同樣能夠應用樣式。
記住，你可以像任何其他HTML元素一樣對你的body元素應用樣式，並且所有其他元素都將繼承你的body元素的樣式。
首先，使用文本 Hello World創建一個 h1 元素。
然后，讓我們通過向body元素的樣式聲明部分添加 color: green; 使頁面上的所有元素的顏色為green。
最后，通過向 body 元素的樣式聲明部分添加 font-family: Monospace; 將 body 元素的 font-family（字體）設置為 Monospace。
<style> body { background-color: black; color: green; font-family: Monospace; } </style> <h1>Hello World</h1>
CSS 多個class處理樣式覆蓋：
我們的 "pink-text" class 覆蓋了 body 元素的 CSS 聲明！
我們剛剛證明了我們的 class 會覆蓋 body 元素的 CSS。所以下一個合乎情理的問題就是，我們可以怎樣來覆蓋我們的 pink-text class ？
再創建一個名為 blue-text 的 CSS class，其顏色設置為藍色的，確保它在 pink-text class 聲明之下。
除了 pink-text class 之外，你還可以將 blue-text class 應用到你的 h1 元素，讓我們看看哪一個會被應用。
如下例子所示，通過用空格分隔多個 class 屬性，可讓 HTML 元素應用多個 class 屬性：
class="class1 class2"
注意：在 HTML元素中列出這些 class 的順序並不重要。
然而，<style> 部分中的 class 聲明的順序是重要的，第二個聲明將始終優先於第一個聲明。因為 .blue-text 是第二個聲明，它會覆蓋 .pink-text 的屬性。
<style> body { background-color: black; font-family: Monospace; color: green; } .pink-text { color: pink; } .blue-text{ color: blue; } </style> <h1 class="pink-text blue-text">Hello World!</h1>
CSS 通過ID的樣式屬性覆蓋class類的聲明：
我們剛剛證明了，瀏覽器是從上到下讀取CSS。這意味着，如果發生沖突，瀏覽器將使用最后的任何CSS聲明。
我們還有其他覆蓋 CSS 的方法。你還記得 id 屬性嗎？
我們來覆蓋你的 pink-text 和 blue-text class，並使你的 h1 元素變成橙色，給 h1元素一個id，然后對該id進行樣式化。
給你的 h1 元素添加名為 orange-text 的 id 屬性。記住，id 樣式如下所示：
<h1 id="orange-text">
在你的 h1 元素中保留 blue-text 和 pink-text class。
為你的 style 元素中的 orange-text id 創建一個 CSS 聲明。如下例子所示：
#brown-text {
color: brown;
}
注意：你是否將這個css聲明在pink-text class之上或之下無關緊要，因為id屬性始終是具有更高的優先級。
<style> body { background-color: black; font-family: Monospace; color: green; } .pink-text { color: pink; } .blue-text { color: blue; } #orange-text { color: orange; } </style> <h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>
CSS 通過內聯樣式覆蓋class類的聲明：
我們已經證明了，id 聲明都會覆蓋 class 聲明，不管它在你的 style 元素 CSS 的哪個位置進行聲明。
還有其他方法可以覆蓋CSS。你還記得內聯樣式嗎？
使用 in-line style（內聯樣式）來嘗試使我們的 h1 元素變為白色。記住，內聯樣式如下所示：
<h1 style="color: white;">
在你的 h1 元素上保留 blue-text 和 pink-text class。
<style> body { background-color: black; font-family: Monospace; color: green; } #orange-text { color: orange; } .pink-text { color: pink; } .blue-text { color: blue; } </style> <h1 id="orange-text" style="color: white;" class="pink-text blue-text">Hello World!</h1>
CSS 通過使用Important覆蓋所有其他樣式：
好極了！我們剛剛證明了內聯樣式將覆蓋style 中定義的所有 CSS聲明。
可是等等。有最后一個方法來覆蓋CSS。這是所有的最強大的方法。但在我們這樣做之前，讓我們來談談你為什么要覆蓋CSS。
在許多情況下，您將使用CSS庫。這些可能會意外覆蓋您自己的CSS。所以當你絕對需要確定一個元素具有特定的CSS時，可以使用 !important。
讓我們回到之前的 pink-text class 聲明。請記住，我們的 pink-text class 被后續的 class 聲明、id 聲明和內聯樣式覆蓋了。
我們來給 pink-text 元素的 color 聲明加上關鍵字 !important，以使 100% 確保你的 h1 元素是粉色的。
舉例如下：
color: pink !important;
<style> body { background-color: black; font-family: Monospace; color: green; } #orange-text { color: orange; } .pink-text { color: pink !important; } .blue-text { color: blue; } </style> <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
CSS 通過使用十六進制代碼設置特定的顏色：
你知道還有其他方式來表示CSS中的顏色嗎？其中一種方式稱為 hexadecimal code（十六進制編碼），簡寫為 hex code。
我們通常使用 decimals，也就是十進制數字，它對每一位數字使用符號0到9來表示。Hexadecimals （或 hex）是十六進制數字，這意味着它使用十六個不同的符號。像十進制一樣，符號 0-9 代表數值零到九，那么 A、B、C、D、E、F 代表數值十到十五。總共，用 0 到 F 可以表示 hexadecimal 中的每一位數字，共為我們提供 16 個可能的數值。
在 CSS 中，我們可以使用 6 個十六進制數字來表示顏色，每 2 個分別表示紅 (R)、綠 (G) 和藍(B) 成分。例如，#000000 是黑色，同時也是可能的數值中最小的。
把 body 元素的 background-color 由 black 替換成其 hex code 表示，即#000000。
<style> body { background-color: #000000; } </style>
CSS 十六進制白色表達方式：
數字 0 是十六進制代碼中最低的數字，表示完全沒有顏色。。
數字 F 是十六進制代碼中最高的數字，表示最大可能的亮度。
現在，讓我們通過 background-color 的 hex code 修改為 #FFFFFF，把 body 元素的background-color 改為白色。
<style> body { background-color: #FFFFFF; } </style>
CSS 十六進制RGB紅色表達方式：
hex code（十六進制代碼） 遵循 red-green-blue（紅-綠-藍），或者叫 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位代表綠色的數量，第五六位代表藍色的數量。
所以要得到絕對的純紅色，你只需要在第一和第二位使用 F （最大可能的數值），且在第三、第四、第五和第六位使用 0 （最小可能數值）。
通過對 background-color 應用 hex code 值 #FF0000，把 body 元素的 background-color 設置為紅色。
<style> body { background-color: #FF0000; } </style>
CSS 十六進制RGB綠色表達方式：
hex code（十六進制代碼） 遵循 red-green-blue（紅-綠-藍），或稱為 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位代表綠色的數量，第五六位代表藍色的數量。
所以要得到絕對的純綠色，你只需要在第三和第四位使用 F （最大可能的數值），且在其它位使用 0 （最小可能數值）。
通過對 background-color 應用 hex code 值 #00FF00，把 body 元素的 background-color 設置為綠色。
<style> body { background-color: #00FF00; } </style>
CSS 十六進制RGB藍色表達方式：
hex code（十六進制代碼）遵循 red-green-blue（紅-綠-藍），或稱為 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位代表綠色的數量，第五六位代表藍色的數量。
所以要得到絕對的純藍色，你只需要在第五和第六位使用 F （最大可能的數值），且在其它位使用 0 （最小可能數值）。
通過對 background-color 應用 hex code 值 #0000FF ,把 body 元素的 background-color 設置為藍色。
<style> body { background-color: #0000FF; } </style>
CSS 十六進制RGB混合顏色：
十六進制代碼使用6個十六進制數字表示顏色，每 2 個分別表示紅（R），綠（G）和藍（B）成分。
從這三種純色（紅、綠、藍），我們可以改變每種顏色創造超過1600萬種其他顏色！
例如，橙色是純紅，與一些綠色混合，沒有藍色。在十六進制代碼中，這轉換為 ＃FFA500。
數字 0 是十六進制代碼中最低的數字，表示完全沒有顏色。
數字 F 是十六進制代碼中最高的數字，表示最大可能的亮度。
用正確的十六進制代碼替換 <style> 元素中的顏色詞。
Color Hex Code
Dodger Blue #2998E4
Green #00FF00
Orange #FFA500
Red #FF0000
<style> body { background-color: #FFA500; } </style>
CSS 灰色度設置：
從這三種純色（紅、綠、藍），我們能得到 1600 萬種其它的顏色。
我們也可以通過平均混合所有三種顏色得到不同灰度等級的灰色。
通過對 background-color 應用 hex code 值 #808080，把你的 body 元素的 background-color 設置為灰色。
<style> body { background-color: #808080; } </style>
CSS 不同等級的灰度設置：
通過平均混合所有三種顏色，我們還可以得到其他色度等級的灰色，這樣我們可以非常接近純黑色。
通過對 background-color 應用 hex code 值 #111111 ，把你的 body 元素的 background-color 設置為深灰色。
<style> body { background-color: #111111; } </style>
CSS 十六進制RGB表達式縮寫：
許多人對1600 萬種顏色感到不可思議，並且 hex code（十六進制代碼） 很難記住。幸運的是，你可以縮短它。
例如，紅色的十六進制碼 #FF0000 可以縮短為 #F00。這個縮寫形式給出一個數字為紅色，一個數字為綠色，一個數字為藍色。
這將把所有可能的顏色總數減少到大約4000種，但是瀏覽器會把 #FF0000 和 #F00 解釋為完全相同的顏色。
繼續，嘗試使用縮寫的十六進制代碼對正確的元素進行着色。
<style> body { background-color: #F00; } </style>
CSS 使用rgb屬性設定顏色：
在 CSS 中表示顏色的另一個方法是使用 RGB 值。
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每個顏色的亮度，數字介於0到255之間，而不是像使用十六進制代碼那樣使用六個十六進制數字。
如果你做個算術，一個顏色的兩位數字等於16 乘以 16，這給我們256個總值，因此，從零開始計數的 RGB 具有與十六進制代碼完全相同數量的可能值。
現在，我們用黑色的 RGB 值 rgb(0, 0, 0) 替換掉 body 元素背景色的hex code（十六進制代碼）。
<style> body { background-color:rgb(0,0,0); } </style>
CSS 使用rgb屬性設定白色：
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每個顏色的亮度，數字介於0到255之間，而不是像使用十六進制代碼那樣使用六個十六進制數字。
現在，將你的body元素的 background-color 從黑色的 RGB 值修改為白色的 rgb 值 rgb(255, 255, 255)。
<style> body { background-color: rgb(256,256,256); } </style>
CSS 使用rgb屬性設定紅色：
和使用 hex code（十六進制編碼）一樣，你可以通過不同數值的組合來表示 RGB 中不同的顏色。
這些數值遵循 RGB 順序模式：第一位表示紅色，第二位表示綠色，第三位表示藍色。
使用 rgb 將你的 body 元素的 background-color 設置為紅色的 RGB 值：rgb(255, 0, 0)。
<style> body { background-color: rgb(255,0, 0); } </style>
CSS 使用rgb屬性設定綠色：
使用 rgb 將你的 body 元素的 background-color 設置為綠色的 RGB 值：rgb(0, 255, 0)。
<style> body { background-color: rgb(0, 255, 0); } </style>
CSS 使用rgb屬性設定藍色：
使用 rgb 將你的 body 元素的 background-color 設置為藍色的 RGB 值：rgb(0, 0, 255)。
<style> body { background-color: rgb(0, 0, 255); } </style>
CSS 使用rgb屬性設定混合顏色：
就像十六進制代碼一樣，您可以通過使用不同值的組合來混合RGB中的顏色。
用我們的style元素中的顏色字替換正確的RGB值。
Color RGB
Blue rgb(0, 0, 255)
Red rgb(255, 0, 0)
Orchid rgb(218, 112, 214)
Sienna rgb(160, 82, 45)
任務：將 body 元素的背景色修改為橙色的 RGB 值： rgb(255, 165, 0)。
<style> body { background-color: rgb(255, 165, 0); } </style>