本文件介绍了 CSS 样式和基础知识，包括选择器、背景、文本、字体、链接、列表和表格的样式设置。重点展示了样式优先级、选择器的使用以及各种 CSS 属性的用法，确保跨浏览器的兼容性。内容详尽，适合初学者学习和了解 CSS 设计的基本元素。

1. CSS-Basic & Styling

2. 大綱
 Basic
 顯示優先順序
 Selector Id & Class
 Styling
 Backgrounds
 Text
 Fonts
 Links
 Lists
 Tables

3. Basic - 顯示優先順序
 Browser default
 External style sheet
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 Internal style sheet (in the head section)
 <style>
 div {
 Width: 100px;
 }
 </style>
 Inline style (inside an HTML element)
 <div style=“width: 100px;” ></div>
 若定義相同的樣式則判斷顯示優先權，愈下面愈優先顯示
 不同樣式則有層疊的效果，類似圖層的感覺

4. Basic - Selector Id & Class
 使用#定義Id
 將id 定義為red的html element 顏色改為紅色
 #red{ color: red; }
 使用.定義Class
 將class定義為center的html element 文字置中
 .center {text-align: center; }
 使用html element 名稱 定義 selector
 將div的顏色改為綠色
 div {color: green; }

5. Styling - Backgrounds
 Background-color : color
 color :
 HEX #ff0000 rgb(255,255,255) red
 Background-image: url(„img.gif‟)
 Background-repeat: repeat
 repeat-x repeat-y no-repeat
 Background-position: right top
 x% y% xpos ypos

6. Styling - Text
 Color : blue;
 HEX #00ff00 rgb(255,255,255)
 Text-align: center;
 Right
 Text-decoration: none;
 overline line-through underline
 Text-transform: capitalize;
 Uppercase lowercase
 Text-indent: 50px;
 1cm 10%

7. Styling - Font
 Font-family: "Times New Roman",Times,serif;
 Font-style: normal;
 Italic oblique (斜體)
 Font-size: 16 px;
 1 em (pixels/16 = em)
 使用 %與 Em 解決不同瀏覽器 resize 問題
 Body {font-size: 100%;}
 H1{font-size: 2em;}
 p {font-size: 0.8em;}

8. Styling - Links
 Links states:
 a:link – a normal, unvisited link
 a:visited – a link the user has visited
 a:hover – a link when the user mouse over it
 a:active - a link the moment it is clicked
 Rules:
 Hover 必須在 link & visited 之後定義
 Active 必須在 hover 之後定義
 常搭配Text-decoration、background-color
樣式使用

9. Styling - Lists
 使用於定義無序ul、有序列表ol
 List-sytle-type: circle;
 Square upper-roman lower-alpha
 list-style-image: url(„img.gif');
 解決跨瀏覽器的問題
 設定ul
 設定 list-style-type: none; 移除list標記
 設定padding & margin 為 0px，跨瀏覽器相容性
 設定ul中的li
 設定background-image，並設定background-repeat : no-repeat;
 設定background-position與padding-left

10. Styling - Tables
 border: 1px solid black;表格邊框
 border-collapse:collapse;摺疊邊框為單一邊框
 width:100%;
 height:50px;
 text-align:right;
 vertical-align:bottom;
 padding:15px;
 background-color:green;
 color:white;