iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Modern Web

HTML 與 CSS 學習筆記系列 第 11

Day11 - HTML 與 CSS (2) - 選擇器、margin、padding

選擇器

之前有介紹過選擇器,可參考以下連結,今天介紹後代選擇器

  • type selector (標籤選擇器):Day07
  • Pseudo-classes (擬態選擇器):Day07
  • class selector (類別選擇器):Day08
  • id selector (ID 選擇器):Day08

後代選擇器

  • descendant selector:就如名字是在特徵內指定內部的子特徵或是類別等參數,再進一步設定需要的屬性
  • 當我們在一個大段文章內,想要把連結都指定某個設定時,可以怎麼做呢?
    • 把每個連結都各自進行設定,但數量一多就難保不會有漏掉的
    • 把文章的這個區塊設定一個關於連結的後代選擇器,就可以省掉逐一設定的功夫

HTML

<div class="style">
    <h2>後代選擇器</h2>
    <a href="#">連結</a>
    <a href="#">連結</a>
    <a href="#">連結</a>
    <p class="test">段落1</p>
    <p>段落2</p>
</div>

CSS

.style{
    color: blue;
}
.style a{
    color: red;
}
.style .test{
    color: gray;
    font-weight: bold;
}

顯示結果如下

margin

  • 產生特徵區塊外的邊界距離,我覺得就像 word 的版面設定一樣
  • 內部的區塊元素會依照父元素(上一層)自適應延伸佔滿
  • margin:值如 10px,會在上下左右都有 10px 的間隔
    • margin-top:只在上方有邊界
    • margin-bottom:只在下方有邊界
    • margin-left:只在左方有邊界
    • margin-right:只在右方有邊界

padding

  • 產生特徵區塊內的空白距離,我覺得就像 word 的段落間距或行間距一樣
  • padding:值如 10px,會在上下左右都有 10px 的留白
    • padding-top:只在上方有留白
    • padding-bottom:只在下方有留白
    • padding-left:只在左方有留白
    • padding-right:只在右方有留白

參考以下檔案,比較一下各區塊間設定的差異

HTML

<div class="box1">
    <h2>margin 與 padding</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
</div>
<div class="box2">
    <h2>margin 與 padding</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
</div>
<div class="box3">
    <h2>margin 與 padding</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
</div>

CSS

.box1 {
    border: 10px solid gray;
    margin-left: 20px;
    /* margin-bottom: 20px; */
    /* padding-left: 10px; */
    /* padding-bottom: 10px; */
}

.box2 {
    border: 10px solid gray;
    margin-left: 10px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 50px;
}
.box3 {
    border: 10px solid gray;
    margin: 20px;
    padding: 10px;
}

結果如下圖,比較 box1box2box3 之間設定不同的值,出現的差異會在哪個位置

臨時測試

在進行測試的時候想說怎麼都沒有照著設定的屬性顯示,可以看出下面的 CSS 哪邊出問題嗎?

style{
    color: blue;
}

答案明日公布

參考資料

次回

一樣是 HTML 和 CSS 的綜合介紹


上一篇
Day10 - HTML 與 CSS (1) - 區塊元素、行內元素
下一篇
Day12 - HTML 與 CSS (3) - Box Model
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言