使用一個CSS Class去給標籤訂義Style

使用一個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。

 

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

<style>

.thick-grenn-border{border-width:10px;

                              border-style:solid;

                              border-color:green;}

</style>

</style>

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

 

HTML 建立文本輸入框

---

如今咱們來建立一個Web表單。

文本輸入框是獲取用戶輸入的一種方便的方法。

你能夠用以下方法建立：

<input type="text">

注意，input元素是自關閉的。

任務：在列表下建立一個type（類型）爲 text 的input元素。

 <input  type="text">

添加文本框設定預約值（佔位符）屬性placeholder

用法<input type="text" placceholder="預設文本">

效果

 

HTML 添加表單

---

你能夠使用HTML來構建跟服務器交互的Web表單。你能夠經過在form元素上添加一個action屬性來執行此操做。

action屬性的值指定了表單提交到服務器的地址。

例如：

<form action="/url-where-you-want-to-submit-form-data"></form>

把你的文本輸入框嵌套到form元素中。併爲此form元素添加action="/submit-cat-photo"。

<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"爲按鈕文本。

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

效果

 

 

HTML 添加單選框

---

你能夠使用單選按鈕來解決你但願用戶只給出一個答案的問題。

單選按鈕是 input 輸入框的一種類型。

每一個單選按鈕都應該嵌套在本身的 label(標籤) 元素中。

全部關聯的單選按鈕應具備相同的 name 屬性。

下面是一個單選按鈕的例子：

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

在你的表單中添加兩個單選按鈕，一個叫 indoor，另外一個叫 outdoor。

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

 

HTML 添加複選框

---

checkboxes（複選按鈕）一般用於可能有多個答案的問題的形式。

複選按鈕是 input 的輸入框的一種類型。

每個複選按鈕都應嵌套在其本身的 label元素中。

全部關聯的複選按鈕輸入應該具備相同的 name屬性。

如下是一個複選按鈕的示例：

<label><input type="checkbox" name="personality"> Loving</label>

任務：爲你的表單添加三個複選按鈕，每一個複選按鈕都應嵌套在其本身的 label 元素，全部複選按鈕的name屬性必須爲personality。

<label><input type="checkbox" name="personality">Loving</label>
<label><input type="checkbox" name="personality">like</label>
<label><input type="checkbox" name="personality">hate</label>

效果

 

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

---

div 元素，也被稱做division(層)元素，是一個盛裝其餘元素的通用容器。

div 元素是最經常使用的HTML元素。因此能夠利用CSS的繼承關係把 div 上的CSS傳遞給它全部子元素。

你能夠使用<div>來標記一個div元素的開始，並使用</div>來標記一個div元素的結束。