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

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

# 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;

<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; }

# 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; }

# 4. Remove Link Underlines With This Sample CSS

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

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