# 掌握 Webflow 的關鍵概念: 網站如何構成 -  CSS

### **What is CSS?**

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FVCFELLqkkcNNiDGfmXgx%2Fimage.png?alt=media\&token=da9fc56f-9bdb-4204-9b68-47c290dd1ce3)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FDfGhpTkUxf48CAx1OrN3%2Fimage.png?alt=media\&token=d18adf3b-6474-453e-bd8f-5d1599fa85d6)

```javascript
# 1. CSS 的三種宣告方法

p { font-size: 120%; color: dimgray; }
p.smallcaps { font-variant: small-caps; }

<p class="smallcaps">Your paragraph here.</p>

<p style="color: #333;">Your paragraph here.</p>

```

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FUcRCFq0n33WAoBoat2Lq%2Fimage.png?alt=media\&token=48c1522b-4b28-4d76-a33a-cdc0c1aec5b0)

```javascript
# 2. CSS Example to Change Character Case

p { font-size: 120%; color: dimgray; }

p.smallcaps { font-variant: small-caps; }

<p class="smallcaps">Your paragraph here.</p>

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;
```

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FtnLlZkhPcvSCIee1D2o6%2Fimage.png?alt=media\&token=440437e4-fbe5-4401-b40e-e8140eb0b180)

```html
<p class="important">Your important paragraph here.</p>
p.important { border-style: solid; border-width: 5px; border-color: purple; }

---

<p id="important">Your important paragraph here.</p>
p.important { border-style: solid; border-width: 5px; border-color: purple; }
```

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fwto04kOHEHPkwiI5jXm1%2Fimage.png?alt=media\&token=689fedd1-9c3a-45df-8628-27af89a6327c)

```javascript
# 3. Easy CSS to Change Link Colors

a:link { color: gray; } 
a:visited { color: green; } 
a:hover { color: purple; } 
a:active { color: teal; }

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
```

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FAxvdDNfL7WezuhtdCutX%2Fimage.png?alt=media\&token=bd3f5b93-5a9e-4ac4-aae3-d5b1775ddf96)

```javascript
# 4. Remove Link Underlines With This Sample CSS

a { text-decoration: none; }
a:hover { text-decoration: underline; }
```

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FHUxYwhisXRxix7Wq1m2h%2Fimage.png?alt=media\&token=3903bf2e-4afb-4b61-9a5a-1db9e35ffc09)

```javascript
# Center-Align Elements With Basic CSS Code

.center { display: block; margin: auto; }
img { margin: auto; }
.centertext { text-align: center; }
<p class="centertext">This text will be centered.</p>
```

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FhAx2tIaMk2nKY4opKRLQ%2Fimage.png?alt=media\&token=6368f5c9-070f-4a7c-a7b6-cbacfe7caad7)<br>