育將電腦工作室 - 線上書籍

網站、部落格架設
========

一、CSS 参考手册

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

二、CSS 套用方式

1. 行內套用 (Inline) ```
  <pre class="brush:as3;">
  <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) ```
  <pre class="brush:as3;">
  <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) ```
  <pre class="brush:as3;">
  <link rel="stylesheet" href="https://www.ugm.com.tw/themes/asia_one_page_3/assets/css/style.css">
  ```
 
匯入套用 (Import)

```
<pre class="brush:as3;" style="margin-left: 40px;">
<STYLE TYPE="text/css"> 
 
</STYLE>
```

三、CSS 尺寸 (Dimension)

[http://www.w3school.com.cn/css/css\_dimension.asp](http://www.w3school.com.cn/css/css_dimension.asp)

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown