http://learn.shayhowe.com/html-css/terminology-syntax-intro

LESSON 1 Terminology, Syntax, & Introduction
HTML:Hyper Text Markup Language  結構

CSS:Cascading Style Sheets  樣式跟外觀

HTML

  1. Common Terms
  1. Elements:h1~h6, p, a, div, span, strong, em .....
  2. Tags:有開始跟結束
  1. <a> opening tags
  2. </a> closing tags
  1. Attribute: id, class, title , src, href
    <a href=”http://www.google.com”>Google</a>
  1. Structure & Syntax
  1. doctype
  2. html
  3. head (看不見的)
  1. meta
  2. title
  1. body

CSS

  1. Common Terms
  1. Selector:有分 IDs, Class, types 跟其他attributes 後面都接上大括號
    p{...}
  2. Properties:color, font-size
    p{
       color:#ff0;
       font-size:16px;
    }
  3. Value:#ff0 , 16px
    p{
       color:#ff0;
       font-size:16px;
    }
  1. Structure & Syntax
  1. CSS Syntax Outline
  2. Long & Short Hand

/* Long Hand */

p {

   padding-top: 10px;

   padding-right: 20px;

   padding-bottom: 10px;

   padding-left: 20px;

}

/* Short Hand */

p {

   padding: 10px 20px;

}

/* Short Hand */

p {

   padding: 10px;

}

  1. Comments
  1. HTML <!-- comments -->
  2. CSS /* comments */
  1. Selectors
  1. Type Selectors:針對tag
    p{...}
    body{...}
  2. Class Selectors:class attribute
    .awesome{...}
  3. ID Selectors:id attribute
    #container{...}
  4. Combining Selectors:復合的方式
    ul#social li {

   padding: 0 3px;

}

ul#social li a {

   height: 17px;

   width: 16px;

}

ul#social li.tumblr a {

   background: url('tumblr.png') 0 0 no-repeat;

}

  1. Referencing CSS
  1. 要使用CSS有很多種方式
  2. 引入檔案 會放在<head></head>中間
    <!-- External CSS File -->
    <link rel="stylesheet" href="file.css">
  3. 寫在HTML中
    <!-- Internal CSS -->
    <style type="text/css">
    p {
     color: #f60;
     font-size: 16px;
    }
    </style>
  4. 直接寫在 Inline裡面
    <!-- Inline CSS -->
    <p style="color: #f60; font-size: 16px;">Lorem ipsum dolor sit amet...</p>
  1. Reset
  1. 為了跨瀏覽器的樣式整合
    Cross Browser Compatibility 通常會使用一個 reset.css
  2. 作者是使用
    http://meyerweb.com/eric/tools/css/reset/