iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

轉生成感性腦初學網頁的文組大小姐系列 第 23

DAY23:HTML學習筆記-CSS-簡寫

今日進度

HTML5‧CSS3 最強圖解實戰講座的Lesson7

學習筆記

今日新知

  • margin/padding簡寫

    • 1個個別:
      • margin-top:A;
        margin-right:A;
        margin-bottom:A;
        margin-left:A;
      • 簡寫:margin:A;
    • 2個個別:
      • margin-top:A;
        margin-right:B;
        margin-bottom:A;
        margin-left:B;
      • 簡寫:margin:A B;
    • 3個個別:
      • margin-top:A;
        margin-right:B;
        margin-bottom:C;
        margin-left:B;
      • 簡寫:margin:A B C;
    • 4個個別:
      • margin-top:A;
        margin-right:B;
        margin-bottom:C;
        margin-left:D;
      • 簡寫:margin:A B C D;
  • border簡寫

    • 個別:
      • border-color:#FFD306;
        border-width:1px;
        border-style:solid;
      • 簡寫:border:#FFD306 1px solid;
  • background簡寫

    • 個別:
      • background-color:#FFD306;
        background-image:url(圖片檔案路徑檔名.png);
        background-position:left top;
        background-repeat:repeat-x;
      • 簡寫:background:#FFD306 url(圖片檔案路徑檔名.png) left top repeat-x;

心得

搞懂簡寫的邏輯後,好像也沒很難XDD
一切都是自己想太多
/images/emoticon/emoticon37.gif

初學者學習日誌,文章內容若有打錯歡迎直接糾正我,謝謝大家><


上一篇
DAY22:HTML學習筆記-CSS-背景圖
下一篇
DAY24:HTML學習筆記-CSS-盒子模型
系列文
轉生成感性腦初學網頁的文組大小姐30

1 則留言

0
soft_soft
iT邦新手 5 級 ‧ 2020-09-24 19:53:06

加油加油~

緋尼藍 iT邦新手 5 級 ‧ 2020-09-24 20:31:17 檢舉

加油/images/emoticon/emoticon08.gif

我要留言

立即登入留言