W3CSchool實戰闖關筆記（HTML/CSS）

HTML更換文本的顏色：通過修改元素的style樣式實現

<h2 style="color:red">html編程入門教程</h2>

使用CSS選擇器定義標簽：上面再標簽內部添加屬性的方式是“內聯樣式”，CSS則是在外部定義標簽元素屬性

<style>
    h2{ color : blue;}
</style>
<h2>html編程入門教程</h2>
<!--
所有的CSS屬性定義代碼寫在style標簽內部
<style>    
  選擇器 {屬性名稱: 屬性值;}       
</style>
-->

使用CSS Class給標簽定義style：在style標簽里定義類，在HTML標簽元素中使用class屬性連接對應的類

注意：在CSS樣式元素中，類選擇器應該添加.為前綴。而在HTML元素的類聲明中，類屬性不能添加.為前綴

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">html編程入門教程</h2>

<p>
在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世
</p>

HTML為多個元素使用CSS類定義樣式：在CSS中定義的類可以同時被多個HTML標簽元素連接使用

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">html編程入門教程</h2>

<p class="red-text">
在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世
</p>

HTML設置標簽的字體大小：font-size

<style>
  .red-text {
    color: red;
    font-size: 16px;
  }
    p {
       font-size: 16px; 
    }
</style>

<h2 class="red-text">我家的貓咪</h2>

<p class="red-text">在大家心目中，貓是慵懶的可愛的化身，它可以睡飽了再起來吃飯，可以逗趣小耗子，可以賣得了萌，使得了壞，這樣百變的小怪獸就集結在一只寵物上，怎能不惹人憐愛。</p>
<p>
    養動物有的時候，就是介於愛與恨之間，當你欽羡別人萌寵這么可愛的時候，你一定沒有想過，狗狗和貓貓會到處拉屎，甚至會屯老鼠，啃鞋子，用爪子爬門，你不理它，它就撓你，你要對它發脾氣，它會比你更來勁。所以，狗貓慎入，沒有一定的准備，切勿隨便去侍養動物。它們一旦認定你了，你就是它們的主人，如果你拋棄它們，它們必定心中重創。
</p>

HTML設置字體樣式：font-family

<style>
.red-text {
color: red;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
<p>可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>

引入字體（google為例）：<link>自閉和標簽

<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;
}

h2 {
    font-family: Lobster;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
<p class="red-text">可以學習的編程語言有很多，我們這個編程訓練營里面有大量的編程實戰實驗，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程，請大家耐心按階段不斷向前學習和通過一輪一輪的挑戰，相信很快您的編程技術會得到很大的提升，為找到一份好的編程工作做好准備。</p>

處理多個字體降級：

　　在所有瀏覽器中都有幾種可用的默認字體。這些包括 Monospace 、Serif 和 Sans-Serif。

當某種字體不可用時，你可以讓瀏覽器將其 “降級” 為另一種字體。

　　例如，如果你希望元素使用 Helvetica 字體，但是當 Helvetica 不可用時也會降級為Sans-Serif 字體，則可以使用此CSS樣式：

p {    
  font-family: Helvetica, Sans-Serif;    
}

HTML給頁面添加圖片：

可以使用 img 元素（自閉和標簽）將圖片添加到您的網站，並使用 src 屬性指向一個圖片的具體地址，img 元素具有 alt 屬性。alt 屬性中的文本用於屏幕閱讀器以提高可訪問性，並且如果圖像無法加載，則會顯示

<img src="/statics/codecamp/images/relaxing-cat.jpg" alt="your-image">

調整網頁圖片大小：width，height

<style>
.smaller-image {
    width: 100px;
}
</style>
<img src="/statics/codecamp/images/relaxing-cat.jpg" class="smaller-image">

HTML給標簽增加邊框：

CSS 邊框具有 style(樣式)、color(顏色)、width(寬度) 等屬性

注意：可以應用多個class到一個元素，只需要在多個class之間用空格分開即可

<style>
.smaller-image {
width: 100px;
}
.thick-green-border {
  border-width:10px;
  border-style:solid;
  border-color:green;   
}
</style>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

給標簽增加圓角邊框：border-radius

<style>
.smaller-image {
width: 100px;
border-radius: 10px;
}
</style>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

給圖像設置圓角邊框：百分比、border-radius

<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

 設置鏈接錨元素外部頁面：<a></a>理解起來跟超鏈接差不多

<a href="http://freecatphotoapp.com">cat photos</a>

在p標簽內設置錨鏈接：也就是標簽的嵌套

<p>View more <a href="https://www.w3cschool.cn">cat photos</a></p>

使用#設置固定鏈接：

有時你想要在你的網站上添加一個 a 元素，但你還不知道將它鏈接到哪里，這時你可以使用固定連接。當你使用 jQuery 更改鏈接的行為時，這也很方便

把 a 元素的 href 屬性的值替換為一個 #（# 也稱為哈希符號），將其轉換為一個固定鏈接。

<p>Click here for <a href="#">cat photos</a>.</p>

為圖片設置超鏈接：通過將某元素(圖片,按鈕或其他)嵌套在a元素中使其變為一個鏈接

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

 為圖片添加alt描述:

alt 屬性， 是當圖片無法顯示時的替代文本,alt 屬性是一個必需的屬性，為頁面上的圖片都加上 alt 屬性是好習慣

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

創建項目符號無序列表:<ul></ul>

<ul>    
  <li>milk</li>    
  <li>cheese</li>    
</ul>

創建有序列表:<ol></ol>

<ol>    
  <li>Garfield</li>    
  <li>Sylvester</li>    
</ol>

創建文本輸入框:<input>自閉和標簽

<input type="text">

為文本輸入框設定預設值:placeholder,就是用戶還沒輸入的時候文本框顯示的文字,輸入框接受到輸入之后就隱藏起來,輸入框清空又顯現.

<input type="text" placeholder="cat photo URL">

添加表單:

可以使用HTML來構建跟服務器交互的Web表單。你可以通過在form元素上添加一個action屬性來執行此操作,action屬性的值指定了表單提交到服務器的地址

<form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
</form>

為表單添加提交按鈕:我們在form中添加一個 submit (提交)按鈕。點擊此按鈕，表單中的數據將會被發送到你使用表單 action 屬性指定的地址上,在你的 form 元素中添加一個提交按鈕，並以類型為 submit

<form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submit</button>
</form>

把表單設置為必填項:如果你想要一個文本輸入框設置為必填項，你可以在 input元素中加上 required 屬性

<input type="text" required>

添加單選框:可以使用單選按鈕來解決你希望用戶只給出一個答案的問題,單選按鈕是 input 輸入框的一種類型,每個單選按鈕都應該嵌套在自己的 label(標簽) 元素中,所有關聯的單選按鈕應具有相同的 name 屬性

<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>

添加復選框:checkboxes（復選按鈕）通常用於可能有多個答案的問題的形式,每一個復選按鈕都應嵌套在其自己的 label元素中,所有關聯的復選按鈕輸入應該具有相同的 name屬性

<label><input type="checkbox" name="personality">Rugdoll1</label>
<label><input type="checkbox" name="personality">Rugdoll2</label>
<label><input type="checkbox" name="personality">Rugdoll3</label>

設置單選框和復選框默認被選中:在 input 元素中添加屬性checked

<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>

在div元素中嵌套多個元素:

div 元素，也被稱作division(層)元素，是一個盛裝其他元素的通用容器,

div 元素是最常用的HTML元素。所以可以利用CSS的繼承關系把 div 上的CSS傳遞給它所有子元素

<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>

為div元素設置背景顏色:

<style>
.gray-background {
    background-color: gray;
}
</style>

<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>

為標簽添加ID屬性:

除了 class屬性之外，每一個 HTML 元素也可以具有 id 屬性,

id 屬性應該是唯一的。雖然瀏覽器不會強制唯一，但這是被廣泛認可的。所以請不要給一個以上的元素相同的 id 屬性,

<h2 id="cat-photo-app">

使用ID屬性設置標簽樣式:

關於id屬性的一個很酷的事情是，像類選擇器一樣，你可以使用CSS來設計樣式

注意:在你的 style 元素中，定義類選擇器必須添加 . 為前綴，定義ID選擇器必須添加 # 為前綴

<style>
#cat-photo-form {
    background-color: green;
}
</style>

<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>

使用padding布局頁面標簽:

所有的 HTML 元素本質上都是一些小矩形塊,

有三個重要的屬性控制每個HTML元素的布局：padding(內邊距)、margin(外邊距)、border(邊框)

元素的 padding 控制元素與其邊框 border 之間的距離

<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>

使用margin布局頁面標簽:

元素的 margin （外邊距）控制元素 border （邊框）和周圍元素實際所占空間的距離

<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>

使用負值設置頁面的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: -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>

為不同方向padding設置不同值:

CSS 允許你使用 padding-top、padding-right、padding-bottom 和 padding-left屬性來控制元素四個方向的 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-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

.green-box {
background-color: green;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 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>

你還可以集中起來指定它們，如下所示：

padding: 10px 20px 10px 20px;

四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。

CSS樣式的繼承:

 每一個HTML頁面都有一個body元素,通過在<style>標簽內對body元素樣式進行設置可以證明

<style>
body {
    background-color: black;
}
</style>

CSS繼承body元素樣式:

可以像任何其他HTML元素一樣對你的body元素應用樣式，並且所有其他元素都將繼承你的body元素的樣式

<style>
body {
background-color: black;
color: green;
font-family: Monospace;
}

</style>
<h1>Hello World</h1>

CSS樣式的覆蓋:

優先級關系:   !important   >>>  內聯樣式   >>>   id   >>>   class  >>>   對標簽設置樣式

有時HTML元素會得到多個相互沖突的樣式,可以在<style>中創建一個class設置樣式,設置HTML元素的class名調用該樣式.(這種方式優先級比直接對元素設置樣式高,class的樣式會覆蓋后者的樣式)

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}

.pink-text {
    color: pink;
}
</style>

<h1 class="pink-text">Hello World!</h1>
<!--最后h1文本呈現的顏色為粉色,因為pink-text的優先級更高-->

CSS多個class處理樣式覆蓋:

<style>標簽中的class樣式會從上往下按順序執行,后面的樣式會覆蓋前面的,所以當一個HTML元素調用了多個class時,總是采用<style>中被調用的class中排在最后的class的樣式.(HTML元素中class的順序沒有影響)

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}

.blue-text {
    color: blue;
}
.white-text {
    color: white;
}
<!--只調用了兩個class,以style標簽中排在最后的class為基准-->
</style>
<h1 class="blue-text pink-text">Hello World!</h1>

通過ID的樣式屬性覆蓋class類的聲明:

先給HTML元素一個id,然后在style標簽內對id進行樣式化聲明(id聲明的位置沒有影響),這種方式優先級比class聲明更高,會覆蓋該元素調用的所有class樣式

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
#orange-text {
    color: orange;
}
.blue-text {
color: blue;
}

</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

通過內聯樣式覆蓋class類聲明:

直接在HTML元素內部設置style屬性,優先級比id樣式聲明更高,

<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" class="pink-text blue-text" style="color:white;">Hello World!</h1>

使用important覆蓋其他所有樣式:

在許多情況下，您將使用CSS庫。這些可能會意外覆蓋您自己的CSS。所以當你絕對需要確定一個元素具有特定的CSS時，可以使用 !important

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
<!--!important用法如上-->
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

CSS使用十六進制碼設置特定顏色:

hex code（十六進制代碼） 遵循 red-green-blue（紅-綠-藍），或者叫 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位代表綠色的數量，第五六位代表藍色的數量。

所以要得到絕對的純紅色，你只需要在第一和第二位使用 F （最大可能的數值），且在第三、第四、第五和第六位使用 0 （最小可能數值）.

紅色的十六進制碼 #FF0000 可以縮短為 #F00。這個縮寫形式給出一個數字為紅色，一個數字為綠色，一個數字為藍色

常用的顏色:

RGB	十六進制碼	顏色
rgb(0,0,0)	#000000	黑色
rgb(255,255,255)	#FFFFFF	白色
rgb(255,0,0)	#FF0000	紅色
rgb(0,255,0)	#00FF00	綠色
rgb(0,0,255)	#0000FF	藍色
	#808080	灰色
	#111111	深灰色