聊完HTML後，接下來是CSS的局啦

講到CSS，他是一種程式語言嗎？不是！

雖說是風格頁面語言(style sheet language)，但其實是「階層樣式表」，用來美化專用～

• CSS : Cascading Style Sheets
  • HTML是骨架，那CSS可以為骨架穿上衣服，增添顏色或型態
• 基本操作
  • color:green; →改變文字顏色
  • background-color : yellow; →加上底色
  • font-size:14px; →字體大小
  • ont-weight:600; →字體粗細
  • font-family:Arial; →改變字型
  • text-align:center; →使文字置中
  • letter-spacing:12px; →調整字距
  • line-height:100px; →調整行距
  • text-shadow; →文字上設置陰影
  • padding; → 內容周圍的空格
  • border; →box 外圍的實線
  • margin; →元素外部的空間

上述那些怎麼使用呢？我們舉簡單的元素選擇器為例，來看一下CSS 的rule set

• CSS rule set
  

  • 選擇器(Selector) : 指定某特定元素，選擇HTML中會被影響的部分
  • 宣告(Declaration): 宣告的規則，比如某屬性變化成某屬性值
  • 屬性(Properties): 要變化的屬性
  • 屬性值(Property value):該屬性變化的量值

這樣看起來已經可以實作出許多樣式！

但當希望每個段落的文字都可以有不同樣式時，簡單的元素選擇器就不太夠用了

• 利用選擇器包樣式

  • 元素選擇器(element Selector) :

    • div, p等元素裡面的內容都套用指定格式

    div{
    	color:green;
    }
    

  • 類別選擇器(class selector) :

    • 遇到某class，裡面的內容都套用指定格式
    • .class

    .class{
    	color:green;
    }
    

  • ID選擇器(ID selector) :

    • 遇到某ID，裡面的內容都套用指定格式 #ID
    • 每個ID選擇器只能使用一次，就像身分證字號一樣

    #example{
    	color:green;
    }
    <p> id='example' example CSS</p>
    

下一篇會提到CSS如何與HTML合作，明天見