---
# System prepended metadata

title: CSS簡易裝飾
tags: [網頁設計]

---

# CSS簡易裝飾

## 基本文字調整
color: lightcoral;
text-align:center
font-weight: 600; <span style=color:#01B468>*文字粗細(盡量用數字)</span>
font-size: 24px;
line-height: 1.8; <span style=color:#01B468>*行距</span>  
letter-spacing: 3px; <span style=color:#01B468>*文字間距</span>
text-indent: 60px; <span style=color:#01B468>*文字一開始的空格</span>
text-decoration: underline dotted; <span style=color:#01B468>*段落文字裝飾 可查mdn</span>

display: table-cell;
vertical-align: middle; <span style=color:#01B468>*先放進table再垂直置中</span>

## Border設計


<h4 style=color:red>統一設置 border: 1px solid #4d4d4d </h4>

基本設置
```
border-style： ;邊框樣式
border-top|bottom|left|right: ;
border: ; 四邊框線
border-width: ; 邊線的寬度
border-color： ;邊線的顏色
```
圓角屬性
```
border-radius:5px;  *四角
border-radius:  左上 右上 右下 左下
border-radius: 99em;  *圓形
```
邊框設計
<p style="border-style:solid">實線</p>

`solid `

<p style="border-style:dotted">點線</p>

`dotted`

<p style="border-style:dashed">虛線</p>

`dashed`

<p style="border-style:double">雙線</p>

`double`


## 超連結樣式

target="_blank" > 另開視窗
`<a href="" target="_blank" title=”點我可以前往某個地方的連結”>點我可以前往某個地方</a>`

color: inherit; <span style=color:red>*移除超連結顏色</span>
text-decoration: none; <span style=color:red>*移除超連結底線</span>

:hover  <span style=color:red>*滑鼠在物件上</span> 
`a:hover{border-color:red; border-style:dotted;}`

:active  <span style=color:red>*滑鼠點住不放</span>
:visited  <span style=color:red>*已經點過的連結</span>

相關連結：超連結簡易動





