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;
  }