CSS基本語法
【基
本單位】
【背景】
【邊界、內距】
【框線】
【定位 】
【項目符號】
【超連結】
【捲軸色彩 】
點
此看圖解範例
【滑鼠游標】
此
篇文章引用自:http://blog.yam.com/pailing/article/2909667
名稱
|
語法
|
說明
|
數值單位
|
px、pt、pc、em、
en、in 、% ..... |
% =
percentage 百分比
in = inches 英 吋 cm = centimeters 公 分 mm = millimeter 公 釐 px = pixels 像素 pt = points 點 數(1 point=1/72 英 吋) pc = picas 倍 卡(1 pica=12 點) em = 全形字，即大寫字母 ”M” 的高度 en = 半形字，1/2 em ex = x-height ，即小寫字母 "x" 的高度 |
顯示/隱藏
|
DISPLAY:
|
顯示 block或yes隱藏
none◎DISPLAY: none;
|
顯示/刪除
|
VISIBILITY:
|
刪除 hidden顯示
visible繼承 inherit
◎VISIBILITY: visible; |
寬度
|
WIDTH:
|
數值單位、百分比%
自動調整 auto◎WIDTH: 200px; |
高度
|
HEIGHT:
|
數值單位、百分比%
自動調整 auto© HEIGHT: 90%; |
文字屬性
|
語法
|
樣式
|
字型
|
FONT-FAMILY:
|
標楷體、新細明體、Arial
....(可設多種字型)◎FONT-FAMILY: 新細明體,Arial,Tahoma…..;
|
樣式
|
FONT-STYLE:
|
一般 normal斜體
italic◎FONT-STYLE: italic;
|
大小
|
FONT-SIZE:
|
數值單位、small、medium、large◎FONT-SIZE:
12px;
|
粗細
|
FONT-WEIGHT:
|
一般 normal細
lighter較粗 bold最粗
bolder◎FONT-WEIGHT: bold;
|
顏色
|
COLOR:
| |
水平對
齊
(文 字、物件) |
TEXT-ALIGN:
|
靠左對齊 left置中對齊
center靠右對齊 right分散對齊
justify (僅文字)◎TEXT-ALIGN:
center;
|
垂直對齊
(文字、物件) |
VERTICAL-ALIGN:
|
靠上對齊 top置中對齊
middle 靠下對齊 bottom對齊文字底部baseline
對齊文字頂端text-top
(僅文字)
對齊文字底部text-bottom (僅文字)◎VERTICAL-ALIGN: text-top; |
上下標字
|
VERTICAL-ALIGN:
|
上標字 super 下標字
sub◎VERTICAL-ALIGN: super;
|
字元間距
|
LETTER-SPACING:
|
數值單位 (預設=0
)◎LETTER-SPACING: 1.5em;
|
行列高度
|
LINE-HEIGHT:
|
數值單位 (一列底線到另一列底線的高度)
◎LINE-HEIGHT: 24px; |
文字加劃線
|
TEXT-DECORATION:
|
無劃線 none刪除線
line-through頂線 overline底線
underline
◎TEXT-DECORATION: underline; |
英文大小寫
|
TEXT-TRANSFORM:
|
大寫 uppercase小寫
lowercase 字首大寫 capitalize◎TEXT-TRANSFORM:
capitalize;
|
文字縮排
|
TEXT-INDENT:
|
數值單位
◎TEXT-INDENT: 26pt; |
文字轉換
|
FONT-VARIANT:
|
一般 normal小寫字母轉換為較小的大寫字母
small-caps
◎FONT-VARIANT: small-caps; |
單詞間距
|
WORD-SPACING:
|
數值單位
◎WORD-SPACING: 1px; |
斷字
|
WORD-BREAK:
|
預設normal 允許中文斷字 break-all 允許英文斷字 break-word、keep-all
◎WORD-BREAK: break-all; |
文字直書
|
WRITING-MODE:
|
tb-rl◎WRITING-MODE:
tb-rl;
|
【背景】
背景屬性
|
語法
|
樣式
|
背景顏
色
|
BACKGROUND-COLOR:
| |
背景圖片
|
BACKGROUND-IMAGE:
|
url (*圖片網址*);
※圖片格式.jpg、.gif、.bmp
◎BACKGROUND-IMAGE: (*圖 片網址*); |
重複排列
|
BACKGROUND-REPEAT:
|
不重複 no-repeat全部重複
repeat (預設)垂直軸重複 repeat-y水平軸重複
repeat-x◎BACKGROUND-REPEAT: repeat;
|
背景圖位置
|
BACKGROUND-POSITION:
|
靠左 left置中
center靠右 right靠上
top靠下 bottom
x與y軸位置 50% 90% (以百分比表示)◎BACKGROUND-POSITION: center; |
背景固定
|
BACKGROUND-ATTACHMENT:
|
背景固定
fixed背景隨捲軸捲動 scroll
◎BACKGROUND-ATTACHMENT: fixed;◎ |
背景半透明
|
FILTER:
Alpha
|
(opacity= 0~100);
opacity= 透明度，數字越小透明度越高 ◎FILTER: Alpha(opacity=75); |
【邊界、內距】
邊界屬性
|
語法
|
樣式
|
與外邊
界距離
|
MARGIN:
|
自動調整 auto;上邊界margin-top:
數字px;
下邊界margin-bottom: 數字px ;左邊界margin-left:
數字px;右邊界margin-right:
數字px;
|
◎四
邊單獨宣告：margin-top: 0px; margin-right: 10px; ……◎四
邊相同距離同時宣告：MARGIN: 10px;◎四
邊不同距離同時宣告：MARGIN: 1px 2px 3px 4px; (順序為上、右、下、左)
| ||
與內邊緣距離
(內緣留 白) |
PADDING:
|
上邊界padding-top: 數字px;
下邊界padding-bottom: 數字px ;左邊界padding-left:
數字px;右邊界padding-right:
數字px;
|
◎四邊單獨宣告：padding-top:
5px; padding-right: 10px; ……◎四邊相同距離同時宣告：PIDDING:
15px;◎四邊不同距離同時宣告：PIDDING: 2px 4px 6px 8px; (順序為上、右、下、左)
| ||
視窗水平位置
|
LEFT:
|
與視窗左邊緣距離 LEFT: 正負數字px;
◎LEFT: -30px; |
視窗垂直位置
|
TOP:
|
與視窗上邊緣距離 TOP: 正負數字px;
◎TOP: 50px; |
【框線】
邊框屬性
|
語法
|
樣式
|
框線樣式
|
BORDER-STYLE:
|
無框 none點線
dotted虛線 dashed單實線
solid雙實線 double立體嵌入線 inset立體隆起線
outset立體凹線(溝線) groove立體凸線(脊線)
ridge
◎BORDER-STYLE: solid; |
框線顏色
|
BORDER-COLOR:
| |
框線寬
度
|
BORDER-WIDTH:
|
數字px (數越大框線越粗)◎BORDER-WIDTH: 2px;
|
◎四邊相同樣式同時宣告：border:1px #336699 solid;
◎四邊單獨宣告：border-top:1px #336699 solid; border-right:1px #336699 solid;…… | ||
【定位 】
定位屬性
|
語法
|
說明
|
定位方
式
|
POSITION:
|
絕對位置 absolute相對位置
relative預設位置 static
◎POSITION: absolute; ◎ |
層疊級數
|
Z-INDEX:
|
number、auto、正負數字
(值
越大表示越上層)
◎Z-INDEX: 20; |
元件位置
文字 圍繞位置 |
FLOAT:
|
無 none (預設)左邊 left中間 center右邊 right ◎FLOAT: left;
|
清除左右元件
|
CLEAR:
|
無 none (預設)清除左邊區塊
left清除右邊區塊 right左右區塊皆清除
both ◎CLEAR: both;
|
【項目符號】
名稱
|
語法
|
說明
|
項目符號
|
LIST-STYLE:
|
list-style:url
(*項目符號位置*);
|
符號圖片
|
LIST-STYLE-IMAGE:
|
list-style-image:url
(*圖片網址*); ※圖片格式.dot、.gif
|
符號位置
|
LIST-STYLE-POSITION:
|
縮排 inside凸排
outside
◎LIST-STYLE-POSITION: inside; |
符號樣式
|
LIST-STYLE-TYPE:
|
無none、實心圓disk
(預
設)圓圈circle、實心方形square、數字decimal、
小寫英文lower-alpha、大寫英文upper-alpha、 小寫羅馬字lower-roman、大寫羅馬字upper-roman ◎LIST-STYLE-TYPE: none; |
【超連結】
連結屬性
|
語法
|
樣式
|
所有連結
|
a
| |
連結格式
|
a:link
| |
瀏覽過連結
|
a:visited
| |
按下連結
|
a:active
| |
滑鼠移至
|
a:hover
| |
連結線
|
TEXT-DERCORATION:
|
刪除連結底線
none加底線:underline
◎TEXT-DERCORATION: underline; |
連結位移
|
定位position:relative;
移動方向 top、right、bottom、leftt;
(與
實際位移效果相反)
移動幅度 px (值 越大，位移幅度越大) ◎滑鼠移至時向右下位移：a:hover {POSITION: relative; TOP: 1px; LEFT: 1px;} | |
連結文字縮放
|
◎滑鼠移至連結時字體大小 a:hover {FONT-SIZE: 16px;}
| |
【捲軸色彩 】
點
此看圖解範例
捲軸元件
|
語法
|
捲軸顏
色
|
SCROLLBAR-FACE-COLOR:
色碼;
|
箭頭顏
色
|
SCROLLBAR-ARROW-COLOR:
色碼;
|
軸軌顏
色
|
SCROLLBAR-TRACK-COLOR:
色碼;
|
左、上
外邊框
|
SCROLLBAR-3DLIGHT-COLOR:
色碼;
|
左、上
內邊框
|
SCROLLBAR-HIGHLIGHT-COLOR:
色碼;
|
右、
下外邊框
|
SCROLLBAR-DARKSHADOW-COLOR:
色碼;
|
右、下
內邊框
|
SCROLLBAR-SHADOW-COLOR:
色碼;
|
自動調
整隱現
|
OVERFLOW: auto;
|
刪除捲
軸
|
OVERFLOW:
hidden;
|
刪除水平捲軸
|
OVERFLOW-X:
hidden;
|
刪除垂直捲軸
|
OVERFLOW-Y:
hidden;
|
【滑鼠游標】
樣式
|
語法
|
自動改
變樣式
|
CURSOR:
auto;
|
一般選擇
|
CURSOR:
default;
|
選擇說明
|
CURSOR:
help;
|
十字
|
CURSOR:
crosshair;
|
忙碌中
|
CURSOR:
wait;
|
選取文字
|
CURSOR:
text;
|
點選連結
|
CURSOR:
hand;
|
移動、搬移、拖曳
|
CURSOR:
move;
|
指示
|
CURSOR:
pointer;
|
箭頭朝上
|
CURSOR: n-resize;
|
箭頭朝
下
|
CURSOR:
s-resize;
|
箭頭朝左
|
CURSOR:
w-resize;
|
箭頭朝右
|
CURSOR:
e-resize;
|
箭頭朝左上
|
CURSOR:
nw-resize;
|
箭頭朝左下
|
CURSOR:
sw-resize;
|
箭頭朝右上
|
CURSOR:
ne-resize;
|
箭頭朝右下
|
CURSOR:
se-resize;
|
自訂游標樣式
|
CURSOR: url(*游標網址*);
※游
標格式 .cur、.ani
|
發表文章
0 我有話要說！留言請進→:
張貼留言