CSS 層疊樣式表 Cascading Style Sheets 樣式通常是將他保存在外部的 .css 檔案文件中。
由簡單的 CSS 外部樣式表，使網頁開發提高工作效率可同時改變網站中所有頁面佈局和外觀樣式。
超連結的連結樣式
a加入所有超連結樣式a:link加入超連結文字樣式a:visited加入瀏覽過的連結文字樣式a:hover加入滑鼠指標指著連結樣式a:active加入按下啟用連結的樣式
文字風格樣式
CSS文字風格樣式範例
color: #0f0f0f;文字顏色font-family: Arial, Tahoma;文字風格字型font-size: 13px;文字大小font-weight: bold;文字粗體font-style: italic;文字斜體font-variant: small-caps;小字體letter-spacing: 1px;字體間距離line-height: 18px;設定行高text-decoration: line-through;加上刪除線text-decoration: overline;加上頂線text-decoration: underline;加上底線text-decoration: none;刪除連結底線text-transform: capitalize;字首大寫text-transform: uppercase;英文大寫text-transform: lowercase;英文小寫text-align: right;文字靠右對齊text-align: left;文字靠左對齊text-align: center;文字置中對齊text-align: justify;文字分散對齊vertical-align: sub;下標字vertical-align: super;上標字vertical-align: top;垂直向上對齊vertical-align: bottom;垂直向下對齊vertical-align: middle;垂直置中對齊vertical-align: text-top;文字垂直向上對齊vertical-align: text-bottom;文字垂直向下對齊word-spacing: 5px;設定詞的間距(詞間需有空白)word-wrap: break-word;任意斷字，適用於英文word-wrap: nowrap;強制水平排序不斷行
項目符號及編號
CSS項目樣式範例
list-style-type: none;沒有標誌，不編號list-style-type: disc;實心圓形符號list-style-type: circle;空心圓形符號list-style-type: square;實心方形符號list-style-type: decimal;阿拉伯數字list-style-type: decimal-leading-zero;阿拉伯數字(十進制前置零)list-style-type: lower-roman;小寫羅馬數字list-style-type: upper-roman;大寫羅馬數字list-style-type: lower-alpha;小寫英文字母list-style-type: upper-alpha;大寫英文字母list-style-type: lower-greek;希臘語list-style-type: armenian;亞美尼亞list-style-type: georgian;格魯吉亞語list-style-image: url(dot.gif);圖片式符號list-style-position: outside;凸排(預設值)list-style-position: inside;縮排
背景樣式 CSS背景樣式範例
background-color: #5f5f5f;背景色彩background: transparent;透明背景background-image : url(bg.gif);背景圖片background-attachment : fixed;浮水印固定背景background-repeat : repeat;重複排列-網頁預設background-repeat : no-repeat;不重複排列background-repeat : repeat-x;在 X 軸重複排列background-repeat : repeat-y;在 Y 軸重複排列background-position : 90% 90%;背景圖片 X 與 Y 軸的位置background-position : top;向上對齊background-position : bottom;向下對齊background-position : left;向左對齊background-position : right;向右對齊background-position : center;置中對齊
指定滑鼠游標的型態 CSS滑鼠樣式範例
cursor: crosshair;十字線型cursor: cell;十字小方格 (Firefox, Opera)cursor: move;十字箭頭cursor: all-scroll;四方捲動 (IE, Opera)cursor: n-resize;箭頭朝上cursor: s-resize;箭頭朝下cursor: e-resize;箭頭朝右cursor: w-resize;箭頭朝左cursor: nw-resize;箭頭朝左上cursor: sw-resize;箭頭斜左下cursor: se-resize;箭頭斜右下cursor: ne-resize;箭頭朝右上cursor: col-resize;改變直行數cursor: row-resize;改變橫欄數cursor: text;I 輸入文字符號cursor: vertical-text;垂直文字cursor: help;協助加一問號cursor: wait;等待中；漏斗cursor: progress;進行中；作業中cursor: pointer;手型，表示超連結cursor: not-allowed;無法使用cursor: context-menu;選單 (Opera)
框線樣式 CSS框線樣式範例
border-top:上框線border-bottom:下框線border-left:左框線border-right:右框線border:四邊框線border-style: solid實線框border-style: dotted點線框border-style: dashed分段線border-style: double雙線框border-style: groove立體內凸框border-style: ridge立體浮凸框border-style: inset凹框border-style: outset凸框
容器外緣及邊框空白(邊界)樣式 CSS邊界樣式範例
margin-top: 10px;上外緣值margin-right: 10px;右外緣值margin-bottom: 10px;下外緣值margin-left: 10px;左外緣值margin: 10px;四邊外緣值padding-top: 10px;上邊框空白padding-right: 10px;右邊框空白padding-bottom: 10px;下邊框空白padding-left: 10px;左邊框空白
物件定位 CSS物件定位範例
position : static;依照正常流程佈局position : relative; top: 10px; left: 10px;物件左上角開始位置position : absolute; top: 10px; left: 10px;網頁左上角開始位置position : fixed; top: 10px; left: 10px;固定在參考物上
- CSS 結構擬類型 Structural Pseudo-Classes 選擇器
- CSS 區塊網頁居中版面設計 - layout
- CSS Table 表格
- CSS position absolute 物件定位讓網頁元素置中
- CSS margin 外緣及邊界樣式範例
- CSS border 框線樣式範例
- CSS background 背景樣式範例
- CSS overflow「溢出邊界範圍」捲軸呈現方式
