CSS 常用語法

CSS 層疊樣式表 Cascading Style Sheets 通常是以另外檔案保存的 .css 檔案文件中。通過設計的 CSS 外部樣式表來控制網頁樣式的語言,可以讓網頁的內容和樣式設置分離更容易的分別管理,從而提高工作效率和維護性。CSS 是一種用來控制網頁樣式的語言,它可以讓網頁的基本內容和版面設計分離,從而提高工作效率和維護性。CSS 有多種方式可以引入網頁中。

使用 Cascading Style Sheets 外部樣式表,也就是將 CSS 代碼寫在獨立的文件中,然後在網頁中通過規定當前文檔 Link Tag Reference 標籤引用。可以讓多個網頁共用同一個樣式表減少重複代碼,也更容易整合 Central Management 集中管理基礎理念和模式,應用於網頁設計修改和更新的解決方案。

<link rel="stylesheet" href="site-style.css">

文字風格樣式 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背景樣式範例

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; /*十字小方格*/
cursor: move; /*十字箭頭*/
cursor: all-scroll; /*四方捲動*/
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; /*選單*/

框線樣式 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項目樣式範例

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; /*縮排*/

超連結的連結樣式

a /*加入所有超連結樣式*/
a:link /*加入超連結文字樣式*/
a:visited /*加入瀏覽過的連結文字樣式*/
a:hover /*加入滑鼠指標指著連結樣式*/
a:active /*加入按下啟用連結的樣式*/

CSS 規範描述網頁核心語言開發設計、設定網頁樣式及佈局文件的結構化元素如何美化呈現,在 HTML 套用 CSS 實現更加靈活和高效的樣式處理。條件化樣式、允許開發者根據不同的條件來應用樣式,使得頁面可以根據不同設備、媒體特性或用戶偏好來呈現不同的樣式,實現跨平台的樣式兼容性。