查看完整版本: css語法

css語法

html　　這地方加入語法就可以使右邊的捲軸變色了　捲軸顏色生成器 V%R_ R9n&pHE7P

mPrK$`
EDpq0[ body　　整個網誌的部份
:v?Mdgr-M9Lu 　　A 　　　 　超連結設定
3@(n"[ S.QB*| 　　A:link　　　尚未連結的超連結
] pzk5aP~:JG 　　A:visited　 連結過的超連結
;glJ1?2r e2V9A)D 　　A:active　　按下後的超連結bj/pK~/l.h3_|
　　A:hover　　 游標在連結上方時的超連結epr9L]
　　select　　　下拉選單的設定(每月文章匯集、好友名單)kj2H`:a!P|.D
　　　　td select　下拉選單的分類(設定於發文時)
NXe |d"D&?$~"pf 　　input　　　　按鈕(搜尋、發表新文章、網誌設定、樣式設定)
KK+T/{l+r&cZg 　　textarea　　文字區塊(發表新文章、回覆或修改CSS的小視窗) hJ)Kl(g!X#{
R0t)gn%p5YPX
#banner　　　網誌最上面的部份ln_#GY1N'D"~
　　.description　　　網誌描述的部份
*Q R Yf7KT 　　h1 .description　顯示首頁及單篇文章的部分
G Kf!vIQf^8g4a .fVA5W Wi4Al;L
#content　　網誌文章整體z0@x4Md:f+Q
　　.blog　　　一整篇文章的整體
/??lv:DV(~n5`8xp 　　　　.date　　　　　　　文章的日期/P}9G,l [ f
　　　　.blogbody　　　　　文章內容部份
P{"h
W6{,[ 　　　　.title　　　　　　 　文章的標題
K!Dv[5M-F W\ 　　　　.extended　　　　　繼續閱讀、文章分類、此分類下一篇
,DO|)N#R 　　　　.innertext 　　　　　文章內文:y Yf:T+x/G
　　　　.posted　　　　　 　文章作者資訊2U4Xo,w)P'E
　　　　.comments-head　　"給個回應"那一塊
.|a(t.Wn 　　　　.comments-body　　填寫個人資料和輸入回應的那一塊
'G0d4\]7vX4T 　　　　.comments-post　　文章回應及引用的作者資訊Au'u8^,Ky)q"? |

(]x/q
w \ #links　　行事曆、框架、連結那一大塊
#g `5k$sp3LZ7z 　　.calendar　　行事曆
#WRZ]M 　　　　.calendarhead　　行事曆的年月
/x['^:Q`1^O 　　　　span.calendar　　行事曆的日期
Ze2[,Z+b 　　.side　　　　　這是在左邊或右邊框架的內容部份
xnn hO\ 　　.sidetitle　　這是在左邊或右邊框架的標題部份w lT%t$i sV%w

[]Q+H n(It8_;n X0A 　　#boxProfile　　"XXX的地盤"區塊2},m%H])_P:GO,x2W
　　　　.boxProfile0　　　"XXX的地盤"的標題(在.sidetitle中)
j"_HbC:U 　　　　.boxProfile1　　　"XXX的地盤"的內容
&Dk'dC
@Y[$v&S 　　　　.boxProfileImg　　"XXX的地盤"中圖片那一塊
%Ju
\~(P w,[c 　　　　.boxProfileLink 　"XXX的地盤"裡的連結X3o{6nKHW$}&a5i@
s*wu]M!dmOn
　　#boxNewArticle　　"最新的文章"區塊

}5^I z}nfnD 　　　　.boxNewArticle0　 "最新的文章"的標題(在.side中)KTu2s$z_X
　　　　.boxNewArticle1　 "最新的文章"的內容
_6B"C&KvU OQd+B
F)Z/\9q?&{ 　　#boxCategory　　　"文章分類"區塊
d2b6ADY9?I&j 　　　　.boxCategory0　　　"文章分類"的標題{在.sidetitle中)
9y)Rq2?@)W,q 　　　　.boxCategory1　　　"文章分類"的內容
-g lY:X,Q)PV4}F
L
D
K gDN8pF#O 　　#boxDate　　　　　"文章彙集"區塊 $nx&]ky$^*eC
　　　　.boxDate0　　　　　"文章彙集"的標題{在.sidetitle中)
'Prk5L/Mw3l 　　　　.boxDate1　　　　　"文章彙集"中的內容
o!\XM K|Q$?!q%t 　　　　.boxDate1 select　設定"文章彙集"裡的每月文章下拉選單Qw%P?qW

6n#N(p+O~
\t)M6w@d`'r 　　#boxSearch　　　　"搜尋這個網誌的文章"區塊3J2m-~9cbU&PBK
　　　　.boxSearch0　　　　"搜尋這個網誌的文章"的標題(在.sidetitle中)
g,L6Dp!gL 　　　　.boxSearch1　　　　文章搜尋欄位 lB_#bp

Q$V-Cb4?u.U,j#z 　　#scupioSearch　　酷比文章"搜尋"區塊
V/ih'}2ox1K'ib3m 　　　　. scupioSearch0　　酷比文章"搜尋"的標題(在.sidetitle中)$k@K}VlUx
　　　　.scupioSearch1　　　酷比文章"搜尋"欄位K!x-Q4s}'du
Lbj F2Tu,q
　　#boxNewComment　"最新的回應"區塊
3Y
O4}J6W8|c(B 　　　　.boxNewComment0　　"最新的回應"的標題(在.sidetitle中)
^WtAZo1P 　　　　.boxNewComment1　　"最新的回應"的內容
GICB4z
y&tkfr2e ma 　　# boxFolder　　　自定的每個資料夾2Bi|&s^ k\5g R1Yi
　　　　.boxFolder0　　　　自訂的每個資料夾的標題(在.sidetitle中)
Z4l2@qYO:Y(Q
　　　　.boxFolder1　　　　自訂的每個資料夾的內容
,C#H{^+Dd 　　.syndicate　　　 RSS那一塊4}bvD"Ev
　　.powered　　　　 無名Logo及登入的地方
T]J3@ C9QI 9F6P T9S,W
2a*s f"]7A:kB
其實留言板、相簿、個人資料的CSS和網誌是大同小異的
]P*I&]6`iXn 接下來就列出不同的地方就好了　：ＰreY\(^r`

'ZC0}'}0J`0K
e+q|2^
E 相簿部分：
J#@mW M9\ small.c　　　　設定[留言板管理]、[樣式管理]、[我要留言...]中的[ ]符號及搜尋輸入方塊與按鈕

J2W9d[4P .description　相簿描述
5Yhano+C;W .side　　　　　相簿首頁每本相本的區塊
By$m%B(h .sidetitle　　　XXX的個人資料、XXX的網誌、XXX的留言板YXaITv%}h
td　　　　　　幾張相片、相簿容量、相簿空間使用狀況、單本相簿名稱、[相簿管理][樣式管理]的[ ]符號
O(@)@1a0A 6L5C!uC;GJ
X}6yX:gDTqK
留言板部分：`)\.C)xvr#c

!il;{+L&LQ5Ahr6L .description　留言板描述與留言數
6d#Q1P
|H%b2U'{ e@u small.c　　　　設定[留言板管理]、[樣式管理]、[我要留言...]中的[ ]符號及搜尋輸入方塊與按鈕
UG"@5o.R*Qp
H9w
　　.small-c select　　只設定好友名單
Q$Xo:W8N"Z+XVb!U 　　select.small-c　 　只設定搜尋工具的下拉選單
,O6IR T:VTm 　　input.small-c　　　只設定搜尋工具的文字輸入方塊和按鈕
#`&YT4qv
U#Q}/_y(T5m#K
.sidetitle　　　留言左邊的標題
_l{5Gr$M k^ .side　　　　　　留言右邊的內容
/X5q$Gs.jKR .replyside　　　板主的回覆2`G;hK7l^0V

-r5^/fl+x8om bwSm(]
X'uL&@
個人資料部分：
T1vD{E.Y/[
S[/d+v'UFv*p
small.c　　　　設定[留言板管理]、[樣式管理]、[我要留言...]中的[ ]符號及搜尋輸入方塊與按鈕
&bC9z?+{z%K .sidetitle　　個人資料左邊的標題
&`,Eq.v*Nu s .side　　　　　個人資料右邊內容YAMQB"w

E3t0e4c9Xa0W+y /j4? clyo;d[7w

#kw\eq%H/P*IQ t { }中可加入的語法整理：
0?4p0i L_g fi )Fl7J#dZAE1p

$|J+E._He 背景部份：7dF"[tK yR`Rv
background-color:#FFF;　設定背景的顏色
(X!c@x9S,t)` background-image:url("Image URL");　設定背景圖片eEO'~2O
L_
c
background-attachment:no-fixed;　背景圖片是否鎖定位置"Us3a2YOli z&C
background-position: 0% 0%;　設定背景圖片X與Y的位置(0%~100%，50%可輸入center)-_Qh&Sf;W"x } Q
background-repeat:no-repeat;　背景圖片是否要重複
N ti xagN 7E-O(V#ITa
框線：
}2I%^ N%TEL border:1px solid #FFF;　四周都有框線，粗細、樣式、色彩需同時存在\4k;SJ;A*pS+@:u
border-top:1px solid #FFF;　上邊框線O
hF`D4G6J ]
border-bottom:1px solid #FFF;　下邊框線
5OX,I,]"[D.F border-left:1px solid #FFF;　左邊框線dx)G0O2]"e oK`+y
border-right:1px solid #FFF;　右邊框線
1{n
ba+H3lT+{Da4[ 線條樣式整理： P` do.]\g
none　　無:U#A(hQ/q6^l
dotted　點
|]i+V2i dashed　虛線
S
~(}'y,J solid　實線
6iAiaWfZ,hd double　雙線
g0`#_R `mw
v;z groove　立體凹線
D,Hj2O:E2z P ridge　立體凸線D[{%J3[In)f3t
inset　立體嵌入線G6RT*w2D
outset　立體隆起線0U$~q/Pjt3}/S
#cvZ7n cV
Z{
與四周的距離：
A*x}*Kcb padding　與四周的距離)c|1P)jl~;ws
padding-top　與上面的距離
_xho8|\q] u padding-bottom　與下面的距離L:W?KF-z
padding-left　與左邊的距離
5h^U;^6b Zd padding-right　與右邊的距離
6Y(s|EQj ym&PDd9\d
加入display: none就可隱藏，所以小心不要亂放！`$P{|-cA-M"E1u

4R'j7cq[&cm)Ok:Y 留言板加入select.small-c,input.small-c{display:none;}可隱藏搜尋
tq E:~;Y-d N OI:\9[!T5m%q
游標在超連結上方時連結位移：Q#SSdZ:?@
a:hover{position:relative;top:1px;right:1px;}
Qam7b R D$t \U.["Y*R
連結底線消除：&mh|0F"B| L
text-decoration:none;1U/W9W0ZU+ld,jYZ"g
text-decoration:underline;　為連結有底限
UCc;C&REG 1il"Fg*i2QB
設定文字位置：
%LMe NM,f2P B text-align:center;　有left、center、right三種位置
'UX*uW9t/ze 設定字形：/KL r%xKv
font-weight:normal;　字形正常
w9Q7Fw'YV;HAR font-weight:bold;　字形粗體
h{{{ P
%p7qaDH 設定字型：1hO1vW,s"V
font-family:georgia, verdana, arial, sans-serif;$D3^)x.s9u-C0i#C3e

'b2?4] g:\Jq 設定透明度：
'~0Xj&E PJ2f[ filter:alpha(Opacity=100, FinishOpacity=60, Style=1)
,L3M4Q.w@b {
|*zD@Ma8` 文字間的距離w3gronfTZ
letter-spacing: .2em;