CSS之二

  • 很多屬性都有分top, bottom, left, right. 通常可以合在一行寫, 有四種組合.
    1. padding: 25px 50px 75px 100px (上25, 右50, 下75, 左100)
    2. padding: 25px 50px 75px (上25, 左右50, 下75)
    3. padding: 25px 50px (上下25, 左右50)
    4. padding: 25px (上下左右都25)
  • Grouping
    • 可以用逗號隔開幾個selectors, 這幾個的效果是一樣的.
      h1,h2,p {
      color: green;
      }
  • Nesting
    p {
    color: blue;
    text-align:center;
    }
    .marked {
    background-color: blue;
    }
    .marked p {
    color: white;
    }
  • 要把某個東西隱藏起來. 用display: none; 或是visibility: hidden; 但是這兩個有點不同.
    • display: none; (東西消失, 後面的東西擠過來)
    • visibility: hidden; (東西消失, 但是還是會佔據一塊同樣大小的位置, 後面的東西不會擠過來)
  • block element
    • 像是<h1>, <p>, <div>這種, 它會把所有可用的寬度都佔掉. 而且在前後都換一行.
  • inline element
    • 像是<span>, <a>這些, 它只會用掉它自己需要的寬度.
  • 以上這兩種屬性, 可以用display來改掉.
    li {
    display: inline;
    }

留言

這個網誌中的熱門文章

買車記

怎麼在兩台linux server間用scp而不需打密碼?

Costco退貨真爽快