HTML5&CSS挑戰

地址：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&nbsp;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 （最大可能的數值），且在第3、第4、第五和第六位使用 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>