學習筆記-使用CSS變更HTML標籤特性

CSS Reset 清空瀏覽器預設樣式

如果只有寫 html，則瀏覽器會有預設的 CSS 樣式帶入
在 Google 上搜尋 CSS reset 點以下連結可以查詢到 CSS reset Code 將這個網頁裡的 code 貼入 自己的 style.css 就可以 reset 預設樣式
貼完之後再寫自己的 CSS code，則下方的 CSS 權重會大於上方，所以會以自己寫的 CSS 為最後呈現

BLOCK 區塊元素

區塊元素特性:

1. 盡可能的占滿版面
2. 區塊元素會另起一行進行呈現

如上圖，a 標籤沒有占滿版面，也沒有另起一行呈現，所以不是區塊元素
從 Computed 中可以看到是 Auto x Auto

INLINE 行內元素

行內元素特性:

1. 比較常用在段落
2. 沒辦法設定寬高

SPAN

SPAN 本身沒什麼意思，是用來點綴排版用的行內標籤
寫法例如:

<p><span>今天</span> 天氣真好</p>

或是使用 class 寫法

<p><span class="red">今天</span> 天氣真好</p>

.red {
  color: red;
}

想要讓行內元素變成區塊元素的話，需要在 CSS 中加入 display:block
這時候設定長寬才能體現

a {
  display: block;
}

如果區塊元素想要變成行內元素的話，需要在 CSS 中加入 display:inline

後代選擇器

div 這個容器裡面可以放很多小型容器

<div class="style1">
  <a href="#">red</a>
  <a href="#">red</a>
  <a href="#">red</a>
  <p>這是段落</p>
  <p>這是段落</p>
</div>

.style1 a {
  color: red;
}
.style1 p {
  font-weight: bold;
}

也可以寫成這樣，P 用 class 來定義 CSS

<div class="style1">
  <a href="#">red</a>
  <a href="#">red</a>
  <a href="#">red</a>
  <p class="content">這是段落</p>
</div>

.style1 a {
  color: red;
}
.style1 .content {
  font-weight: bold;
}

Margin x Padding

區塊元素會因盡可能佔滿整個空間，會依照父元素寬度自適應延伸占滿 Margin 跟 Padding 的差別在於，Margin 是從 Box 向外推，Padding 是向內推