我要成為前端工程師的學習筆記:HTML & CSS 篇 - div、margin、padding Day6


div 與 後代選擇器

div:
它本身是沒有語意的,單純拿來排版用的標籤,因為是排版用所以會有區塊元素的特性。

後代選擇器:
我們拿 a 連結來解釋,先寫一段 CSS 效果套用上去,此時所有 HTML 上的 a 連結效果都會一樣,但又想在把某區塊的 a 連結做不同的效果,這時候就需要用後代選擇器,來達成不同的 CSS 效果,以下程式的 style1 跟 style2 它們的 a 連結就不一樣顏色。

例如:
style1 的 a 要設定紅色
CSS 寫法: .style1 a { color: red; }
style2 的 a 要設定粉色
CSS 寫法: .style1 a { color: pink; }

HTML:

// 設定 style1 跟 style2 兩個不一樣的 CSS,p 段落另外設定 content css 效果,都有使用到後代選擇器

<div class="style1">
  <h2>標題</h2>
  <a href="#">red</a>
  <a href="#">red</a>
  <a href="#">red</a>
  <p class="content">這是段落</p>
  <p>這是段落</p>
</div>
<div class="style2">
  <a href="#">pink</a>
  <a href="#">pink</a>
  <a href="#">pink</a>
</div>

CSS:

.style1 h2 {
  font-size: 30px;
}

.style1 a {
  color: red;
}

.style1 .content {
  font-weight: bold;
}

.style2 a {
  color: pink;
}

呈現畫面:


margin

margin 就是使一個區塊產生外邊界距離,意思是在邊界向外推擠一個距離,能推擠上右下左四個方向,在排版上會蠻常使用。

使用方式:
上右下左: margin: 距離;
上: margin-top: 距離;
右: margin-right: 距離;
下: margin-bottom: 距離;
左: margin-left: 距離;

HTML:

<div class="box">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis dolor libero excepturi atque odit laboriosam voluptatum mollitia rem assumenda ipsa pariatur praesentium, id molestias eveniet aspernatur sed expedita voluptate?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex exercitationem sequi mollitia nostrum ullam unde, aspernatur pariatur sed ducimus deleniti.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, laudantium!</p>
 </div>

CSS:

.box {
  font-size: 30px;
  border: 5px solid blue;
  width: 500px;
  margin-left: 30px;    //  box 向左推 30px
}

.box p {
  margin-bottom: 30px;   // p 段落向下推 30px
}

畫面:


padding

padding 就是在一個區塊內產生留白距離,例如我們想在區塊內部左邊推 30px 留白,而一個區塊內有多個區塊的話,就必須在內部每個區塊寫上 margin-left 向左推,可是這樣就會重複寫 margin-left ,此時就可以直接寫一個 padding-left 向內部左邊推擠 30px,來解決重複寫 margin-left 的問題。

使用方式:
上右下左: padding: 距離;
上: padding-top: 距離;
右: padding-right: 距離;
下: padding-bottom: 距離;
左: padding-left: 距離;

以下程式碼 padding 是寫向內推四個方向。
HTML:

<div class="box">
  <h2>大標題</h2>
  <ul>
    <li>列表</li>
    <li>列表</li>
  </ul>
  <a href="#">連結</a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis dolor libero excepturi atque odit laboriosam voluptatum mollitia rem assumenda ipsa pariatur praesentium, id molestias eveniet aspernatur sed expedita voluptate?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex exercitationem sequi mollitia nostrum ullam unde, aspernatur pariatur sed ducimus deleniti.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, laudantium!</p>
</div>

CSS:

.box {
  font-size: 30px;
  border: 5px solid blue;
  width: 500px;
  margin-left: 30px;
  padding: 30px;    // 在 box 向內四個方向推 30px
}

.box p {
  margin-bottom: 30px;
}

畫面呈現:

#html #css







你可能感興趣的文章

test

test

Spot the Difference - Difference in Difference

Spot the Difference - Difference in Difference

實作 PHP API & 留言板 SPA(下)

實作 PHP API & 留言板 SPA(下)






留言討論