技术部 收藏本版 今日: 0 主题: 115

3965 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 n5 l) [% L) Z

, S' L' y+ n; y4 I( p( d0 X0 ]1.基本语法规范
+ Q4 v& ?3 d4 s  H分析一个典型CSS的语句:1 ?! ^3 v' v  n" _
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

' Y2 m$ }* C7 N' p2 `其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; : p5 N$ B: x. P8 T  r$ X) x
样式声明写在一对大括号"{}"中; 8 r# C( Q7 M( T9 ^' @
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 9 c& [; z9 G& a* n; V; m
"#FF0000"和"#FFFFFF"是属性的值(value)。
3 N. r0 d2 W2 H4 ?
8 J7 R" ^5 M$ g+ f9 h4 {2.颜色值
+ ~8 k) r3 o  q! Z% l- `7 o. e, ~  O* `, _
颜色值可以用RGB值写,例如:
! y' T: m, \5 M1 c8 f! l) d* X, y4 l7 J8 ^$ m, ?+ x
color : rgb(255,0,0)
3 K5 x1 U" K! ~# S
,也可以用十六进制写,就象上面例子% P$ P8 H6 o3 }

: O. F2 o. ]: k& ^. h* t
color:#FF0000

7 `. \9 r& ~4 i: q' V2 r5 s0 b% X如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。) z; W7 d6 |0 |  i8 f' f) p- ~

% y. Z7 q: g4 O3.定义字体
# a6 T) Z5 W, B8 Tweb标准推荐如下字体定义方法5 X0 O: v% z0 B0 U% H: {

* F5 j7 v& N1 i2 a" y$ W' s! f
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

( V7 _1 J' K2 b0 L7 {字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 9 D! ~, m) s5 t
Lucida Grande字体适合Mac OS X;
% J" J" @) O4 i% {5 K1 r8 Y4 l& W. C# q* \Verdana字体适合所有的Windows系统;
6 A+ S- k7 G2 ?9 w# F3 yLucida适合UNIX用户
, ]) S6 f5 a) \* C6 Q"宋体"适合中文简体用户; . P6 J9 p: t3 ?! @; O7 p4 V- a5 b1 ]
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
) l9 E3 g% S5 ?  i0 q$ Z  \- F3 j+ `7 t" S1 O  Z3 `
4.群选择器$ N% g: ?! f5 B/ i* r3 j/ w

% K9 I3 E7 j+ T/ p* p1 g当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 p7 m2 L, }! O% l. ]* P, t! }# \4 F" t1 K4 z3 X- ]
p, td, li { font-size : 12px ; }
9 N8 o$ }& x8 j6 w& [
就是给li下面的子元素strong定义一个斜体不加粗的样式! L; |* J' G1 j  Y" g9 `" S
- W9 L- M* H7 i: @( D7 `
6.id选择器, a  A& a: r: f/ T' f
& E) F! a4 ^4 ?' t! J( `
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 D- Z1 ^) @# t9 T% l/ R6 a+ J
<div id="menubar"></div
& N' Q9 N; z5 M- Z6 I
. V% L; K2 g4 X: D: L7 a6 [( b. A8 B
然后在样式表里这样定义:
5 D6 Y# p9 m) M7 j' E- @+ M, }) ?* ?1 @0 f6 l2 I3 f: k
. R8 Y* ?& t6 B5 T( q9 V- N7 @
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

- n' Q( [9 R2 V- l# Y$ S# `其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# y! C, A( L2 _/ V2 T! }
' F- ^- o# o8 `, B* D. k
id选择器也同样支持派生,例如:
( d! c# j( X/ ]$ B3 ~; D' B. {
#menubar p { text-align : right; margin-top : 10px; }

7 t, K$ ]& [. g1 U/ N! |" y3 X这个方法主要用来定义层和那些比较复杂,有多个派生的元素。8 H5 s, `- v& u' Y: ?& i

' r. M6 k" q& }# U. c, w& g6.类别选择器+ P0 }4 q9 I8 ^! O

( s; N. z( s6 T# @, S+ \% N* W在CSS里用一个点开头表示类别选择器定义,例如:
% b6 U4 o: r+ P4 }7 X1 {; ?5 R, [
.14px {color : #f60 ;font-size:14px ;}

4 h: Q* F0 x# Z2 ~  O
$ j9 l( C0 @/ \1 ~" Z在页面中,用class="类别名"的方法调用:: h8 R& F' X+ o+ }. b5 i
<span class="14px">14px大小的字体</span>

8 ~. o/ Z: D' c+ M: G4 h2 [
" Q! V& X0 p' ?这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: J6 p/ n2 Q4 D  ]( X; m  o" K+ |6 x7 a2 U6 B
7.定义链接的样式
- g: j& _) c: L3 r8 w( \$ _CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# _2 n7 |, O2 ?# Y: \
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
( |! K4 B! j1 U& |- h+ e/ La:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 s5 d' o8 I9 r) L5 i
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: p- Q7 y4 h) @. b
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

+ }# t$ f( C! K5 H, t
3 d' |3 j0 y/ [1 M, B) S! K以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--; N& |) j. I7 t3 M: u
a                        { text-decoration: none; color: {LINK} }
: U/ J9 h+ y5 g- i- ]8 za:hover                        { text-decoration: underline }; B  Y* o* v$ n- @# }3 j) ^' w
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }  R6 Q& ]1 K. x" W! w3 b
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
# N; B- ]* t, |+ L& X  {6 ainput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }4 S9 x7 H# S# f9 k3 b; ^
form                        { margin: 0; padding: 0}
3 s( o3 W  A3 w) Vselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
5 i( Y/ N! Y# o% e/ B.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }' q3 d9 Q8 f  w/ n& H: K7 G) e
.nav a                        { color: {TEXT} }1 t$ s! }* C: ^1 Z# F3 o2 S$ L
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }4 Z8 l5 J. h; V' h# G  w
.header a                { color: {HEADERTEXT} }
) g- `) G$ u, Y* @* f0 d.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
( A0 c6 Q; o6 u+ ?% i.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } ( A. ~8 C2 s0 T3 P
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }6 d. D  l' k6 y2 l* |: t
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
5 L. ]0 w1 M; \.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
: t% h! F; k! g.outertxt a                { color: {TEXT} }
, e- _" Q$ [2 G% q.bold                        { font-weight: {BOLD} }
/ }1 M0 \* @( o) n' h' |% k8 Y.altbg1                        { background: {ALTBG1} }% `) r& X# f. \* p& p
.altbg2                        { background: {ALTBG2} }
4 P' i9 t" ?4 C$ h: h.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
9 N8 I1 @! D/ B, V.popupmenu_popup {BORDER-RIGHT: {BORDERCOLOR} 1px solid; BORDER-TOP: {BORDERCOLOR} 1px solid; BACKGROUND: #ffffff; BORDER-LEFT: {BORDERCOLOR} 1px solid; COLOR: {CATTEXT}; BORDER-BOTTOM: {BORDERCOLOR} 1px solid}, Y5 @* ?! X1 B2 }( U& \
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } / U7 X8 ?9 E3 Y* i6 d9 p6 ~, p8 V" r
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
2 s# S/ v& ~8 ^) j# e* a9 ]5 D# X.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}0 ~) i% T" U, v/ G- E
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}6 K) C- Z  P% w2 u7 l
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
4 q0 U. I* o% G- N9 k4 U1 C.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}2 M/ Y/ t3 P! Q; g8 F& K
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}6 \/ G) \' X3 R. W/ }
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; h4 R1 U9 `# I- q0 G
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
/ n; a, @, ]0 m4 l' y, Q+ r' G( @: Q: j( h8 a* Y: H
--></style>
2 V# ^6 H: A4 E
, p2 \0 v: r8 t8 w3 N
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

傲天阁游戏公会
联系我们
咨询电话 : 020-88888888
事务 QQ : 85075421
电子邮箱 : admin@admin.com

小黑屋|手机版|Archiver|傲天阁游戏公会 ( 粤ICP备14058347号 )|免责声明

GMT+8, 2026-4-28 12:06 , Processed in 0.092051 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表