2-2 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