簡易說明CSS的使用方式，如class及id...以及定位點的使用方法

1. CSS教學
for 初學者

2. CSS規則
• CSS規則主要由”選擇器”+”屬性:值”組成。
selector { property: value; }

3. Id選擇器
• id 只有一個
• Id 用 # 字號表示
#sidebar {
text-align: right;
margin-top: 0.5px;
}
<div id=“sidebar”> </div>

4. • class 可以共用
• class 用 . 符號表示
.right {
text-align: right;
float:right;
}
<div class=“right”> </div>
<span class=“right”> </span>
Class選擇器

5. 常用CSS屬性
• 內距
• 外距
• 字型大小
• 字型顏色
• 字型
• 邊框
• 字上下間距
• 字對齊
padding: 15px
margin: 5px
font-size: 18px
color: #000
font-family: 微軟正黑體
border: 1px solid #eee
line-height: 5
text-align: right

6. 常用CSS屬性
• 長度
• 寬度
• 背景
• 上下對齊
height: 150px
width: 200px
background: #000
vertical-align: bottom

8. CSS狀態
• a:link 一般狀態，未連結時
• a:visited 已連結過
• a:hover 滑鼠滑過去
• a:active 滑鼠點擊時
實例 a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

9. 定位方式 float
float:left float:right
Clear:both

10. • 詳細介紹
定位方式 position (3個值的用法)
#div {
position: relative / absolute / static;
top: 10px;
bottom:20px;
left: 5px;
right: 10px;
z-index:0;
}