生活不外如是

關於部落格
密室遊戲攻略&介紹、討論


☺新朋友留言前請先詳閱版規,提問時請勿忘基本禮貌,感謝您的配合。

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  • 3423822

    累積人氣

  • 8

    今日人氣

    0

    訂閱人氣

CSS基本語法整理


CSS基本語法

【基本單位】

名稱 

語法 

說明 

數值單位 

pxptpcem
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: 

顯示 blockyes
隱藏 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: 

數值單位、smallmediumlarge
FONT-SIZE: 12px; 

粗細  

FONT-WEIGHT: 

一般 normal
lighter
較粗 bold
最粗 bolder
FONT-WEIGHT: bold;  

顏色  

COLOR:  

色碼16進位色碼表   英文色碼表 
COLOR: #336699; 

水平對齊
(文字、物件)  

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-wordkeep-all
WORD-BREAK: break-all; 

文字直書

WRITING-MODE: 

tb-rl
WRITING-MODE: tb-rl; 


背景

背景屬性  

語法  

樣式  

背景顏色

BACKGROUND-COLOR: 

色碼16進位色碼表   英文色碼表 
透明 transparent
BACKGROUND-COLOR: #000000; 

背景圖片 

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: 

色碼 16進位色碼表   英文色碼表 
BORDER-COLOR: #053d75; 

框線寬度 

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: 

numberauto、正負數字 (值越大表示越上層) 
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;
移動方向 toprightbottomleftt; (與實際位移效果相反)
移動幅度 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 


 


相簿設定
標籤設定
相簿狀態