# 文字
# 顏色
<p>我是紅色的喔</p> |
p{ | |
color: red; | |
/*color: rgb(255,0,0);*/ | |
/*color: #ff0000*/ | |
/*color: hsl(0, 100%, 50%)*/ | |
} |
效果演示
我是紅色的
# 大小
<p class="red">我是一個紅色的大標題<p> | |
<p>我是一段內容喔</p> |
p{ | |
font-size: 20px; | |
} | |
p.red{ | |
font-size: 50px; | |
color: red; | |
} |
效果演示
我是一個紅色的大標題
我一段內容喔
# 行高
<p> | |
This is a paragraph with a standard line-height.<br> | |
The default line height in most browsers is about 110% to 120%.<br> | |
</p> | |
<p class="small"> | |
This is a paragraph with a smaller line-height.<br> | |
This is a paragraph with a smaller line-height.<br> | |
</p> | |
<p class="big"> | |
This is a paragraph with a bigger line-height.<br> | |
This is a paragraph with a bigger line-height.<br> | |
</p> |
p.small { | |
line-height: 0.7; | |
} | |
p.big { | |
line-height: 1.8; | |
} |
效果演示
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
# 對齊
<p class="center">這是第一段文字(中間)<p> | |
<p class="left">這是第二段文字(左邊)</p> | |
<p class="right">這是第三段文字(右邊)</p> |
.p{ | |
font-size: 20px; | |
} | |
.center { | |
text-align: center; | |
} | |
.left { | |
text-align: left; | |
} | |
.right { | |
text-align: right; | |
} |
效果演示
這是第一段文字(中間)
這是第二段文字(左邊)
這是第三段文字(右邊)
# 裝飾
<p class="overline">這是第一段文字<p> | |
<p class="line">這是第二段文字</p> | |
<p class="under">這是第三段文字</p> |
p{ | |
font-size: 20px; | |
} | |
.overline { | |
text-decoration: overline; | |
} | |
.line { | |
text-decoration: line-through; | |
} | |
.under { | |
text-decoration: underline; | |
} |
效果演示
這是第一段文字
這是第二段文字
這是第三段文字
# 陰影
<p class="shadow">我有影子ㄟ!!<p> |
p{ | |
font-size: 20px; | |
} | |
p.shadow { | |
text-shadow: 2px 2px red; | |
} |
效果演示
我有影子ㄟ!!
# 更改背景
# 顏色
<p>我是一段文字</p> |
body { | |
background-color: lightblue; | |
} |
效果演示
我是一段文字
# 圖片
<p>我是一段文字</p> |
body { | |
background-image: url(https://img.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg?size=626&ext=jpg); | |
} |
效果演示
我是一段文字
# 加上邊框
<p class="dotted">A dotted border.</p> | |
<p class="dashed">A dashed border.</p> | |
<p class="solid">A solid border.</p> | |
<p class="double">A double border.</p> | |
<p class="groove">A groove border.</p> | |
<p class="ridge">A ridge border.</p> | |
<p class="inset">An inset border.</p> | |
<p class="outset">An outset border.</p> | |
<p class="none">No border.</p> | |
<p class="hidden">A hidden border.</p> | |
<p class="mix">A mixed border.</p> |
p.dotted {border-style: dotted;} | |
p.dashed {border-style: dashed;} | |
p.solid {border-style: solid;} | |
p.double {border-style: double;} | |
p.groove {border-style: groove;} | |
p.ridge {border-style: ridge;} | |
p.inset {border-style: inset;} | |
p.outset {border-style: outset;} | |
p.none {border-style: none;} | |
p.hidden {border-style: hidden;} | |
p.mix {border-style: dotted dashed solid double;} |
效果演示
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A mixed border.
# 圓弧邊框
<p class="normal">Normal border</p> | |
<p class="normal round1">Round border</p> | |
<p class="normal round2">Rounder border</p> | |
<p class="normal round3">Roundest border</p> |
p.normal { | |
border: 2px solid red; | |
} | |
p.round1 { | |
border-radius: 5px; | |
} | |
p.round2 { | |
border-radius: 8px; | |
} | |
p.round3 { | |
border-radius: 12px; | |
} |
效果演示
Normal border
Round border
Rounder border
Roundest border
# Margin
<p>CSS Margin</p> | |
<div>This element has a margin of 70px.</div> |
div { | |
margin: 70px; | |
border: 1px solid #4CAF50; | |
} |
效果演示
CSS Margin
This element has a margin of 70px.
# Padding
<p>CSS Padding</p> | |
<div>This element has a padding of 70px.</div> |
div { | |
padding: 70px; | |
border: 1px solid #4CAF50; | |
} |
效果演示
CSS Padding
This element has a padding of 70px.
# 圖片
<img class="round1" src="https://media.tacdn.com/media/attractions-splice-spp-674x446/07/03/1c/9c.jpg" alt="Paris" height="200"> | |
<img class="round2" src="https://media.tacdn.com/media/attractions-splice-spp-674x446/07/03/1c/9c.jpg" alt="Paris" height="200"> | |
<img class="thumbnail" src="https://media.tacdn.com/media/attractions-splice-spp-674x446/07/03/1c/9c.jpg" alt="Paris" height="200"> |
img.round1 { | |
border-radius: 8px; | |
} | |
img.round2 { | |
border-radius: 50%; | |
} | |
img.thumbnail { | |
border: 1px solid #ddd; | |
border-radius: 4px; | |
padding: 5px; | |
} |
效果演示
