Title1

Title2

Title3

3-1 CSS 樣式表

一、CSS 参考手册

http://www.w3school.com.cn/cssref/index.asp

二、CSS 套用方式

  1. 行內套用 (Inline)
    <div class="container">
      <div class="row" style="margin:20px">
        <div class="col-md-4" style="background-color: #eee;border: 1px solid #ddd;">.col-md-4</div>
        <div class="col-md-4" style="background-color: #eee;border: 1px solid #ddd;">.col-md-4</div>
        <div class="col-md-4" style="background-color: #eee;border: 1px solid #ddd;">.col-md-4</div>
      </div>
      
      <div class="row" style="margin:20px">
        <div class="col-md-4" style="background-color: #eee;border: 1px solid #ddd;">.col-md-4</div>
        <div class="col-md-4" style="background-color: #eee;border: 1px solid #ddd;">.col-md-4</div>
        <div class="col-md-4" style="background-color: #eee;border: 1px solid #ddd;">.col-md-4</div>
      </div>
    </div>
  2. 嵌入套用 (Embed)
    <style type="text/css">
      .row {
        margin:20px;
      } 
      [class*="col-"] { 
        background-color: #eee;
        border: 1px solid #ddd; 
      } 
    </style> 
    
    <div class="container">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
      
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
    </div>

     

  3. 外部連接套用 (External Link)
    <link rel="stylesheet" href="https://www.ugm.com.tw/themes/asia_one_page_3/assets/css/style.css">

     

匯入套用 (Import)

<STYLE TYPE="text/css"> 
<!-- 
  @import url(http://https://www.ugm.com.tw/themes/asia_one_page_3/assets/css/style.css); 
--> 
</STYLE>

三、CSS 尺寸 (Dimension)

http://www.w3school.com.cn/css/css_dimension.asp