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

4883 3

重点教程一:CSS

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

- k/ B* F! B& |8 [6 s. p1.基本语法规范% _  \# G* w: C4 _' G, e5 E
分析一个典型CSS的语句:
+ f% O1 [  }0 x1 U' g& g
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 R6 Y3 Z: r9 ^) v4 r2 d# V2 g
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 0 s) ?7 _0 M7 g
样式声明写在一对大括号"{}"中; & S+ ~! T0 [. l; e4 ]# n( n, I) t
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# K6 Q( O' ~3 I! U5 V$ G"#FF0000"和"#FFFFFF"是属性的值(value)。
  Q/ Q+ W: i: o8 S
+ I. G( J% f6 ^$ n0 Z  z$ L5 r2.颜色值  \0 f. V' X2 Y- A( s
! Q6 ~, R9 k6 ]5 }
颜色值可以用RGB值写,例如:
. M7 Q& Z( h: p
/ }- N; _" x# m' e3 l$ }+ u+ z' ]
color : rgb(255,0,0)

7 j# ^# T4 _. ^5 O8 u6 x- b,也可以用十六进制写,就象上面例子8 b$ P$ v0 q& F+ c) O- \

6 A) T! H" O( |: |# g! u- r
color:#FF0000
" y; T0 @! A) M6 f8 Y  J) ]
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。: l2 K" _* D: l7 c

" F& z$ S% X$ v2 O# O+ s3.定义字体2 n  j3 g# A# }" ?
web标准推荐如下字体定义方法# r! K, m$ f( k  ]2 P  t' z& ], K
% Y2 g, Y: L9 t/ y( w
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 X6 {# K  O, U" M2 |/ Y
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 4 @% h; S( ?* e  Q! Q' z
Lucida Grande字体适合Mac OS X; 0 d! d# h6 g1 A
Verdana字体适合所有的Windows系统;
8 k7 ~# e: }5 N( q# CLucida适合UNIX用户
7 o; D5 n. t2 \& A8 P"宋体"适合中文简体用户; $ ^" U7 E4 O5 `$ ~
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 S. ~$ [- z6 B: B6 v. Y* o, J0 Y- h  |- @
4.群选择器: F' H6 q/ _+ j' N4 y9 _
1 `" u/ n2 W: C# g( G) {: x
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
: O$ p$ b) r4 W2 i9 O9 u9 [3 I
0 ]5 Y; R" ~9 F" [" _& W2 N
p, td, li { font-size : 12px ; }
1 Q  e1 N. D( p; W# H* q1 c
就是给li下面的子元素strong定义一个斜体不加粗的样式+ [0 f; o/ A' C

( n& j" G3 U) ~) B8 ^4 u) b6.id选择器
( K2 l7 I4 Q) E& h  R# c* v$ Y, v" K# r# h( q+ B. S! J2 ?, g
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
+ a% ~  f7 A1 h2 H9 b
<div id="menubar"></div

" t6 v" i4 t, y  \  D1 @
7 F3 d) a* e$ ?- h* H$ O5 H6 ~9 ?然后在样式表里这样定义:
2 G: b. v5 F. v" k0 K9 v9 B" o  f- V$ X7 M: p5 U" A  s

) [# A( }, A# ]% y' |
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! `; P6 U; _0 _& N# z' T8 J& p
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。; ^; v/ ^7 V# I6 e
2 L" \' h  Y# i: c& L. E' h
id选择器也同样支持派生,例如:
9 m4 [2 K: j7 s! }
#menubar p { text-align : right; margin-top : 10px; }

; [% ~, r( a* t; }, c这个方法主要用来定义层和那些比较复杂,有多个派生的元素。0 D7 t. P& u6 ^# N

' B2 |& y: p/ v6 h  l3 [; T, V$ @# m4 u6.类别选择器7 z" l3 x  g5 E3 Z% w  O, y2 t

- g% I' e/ t2 [) K在CSS里用一个点开头表示类别选择器定义,例如:# I1 x1 q# u% X
.14px {color : #f60 ;font-size:14px ;}

+ z$ m* s1 K- V
: x! a) d0 m8 F, X在页面中,用class="类别名"的方法调用:
  w: K5 g# M% ~) e  L& _
<span class="14px">14px大小的字体</span>

, d, j3 y5 K! U  l; n) X9 x: k* e1 P  V
这个方法比较简单灵活,可以随时根据页面需要新建和删除。0 o: B! t# U  @1 g/ ~! E( `, U
8 k1 u: D  {" c
7.定义链接的样式
: w) J% E( f% W: R( y) b2 R9 {CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:" j' a& b9 ]) S) |5 U
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 }0 \* v2 K' W+ Ra:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
* B' I" I! ?* q8 @/ k: ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& j& R" x9 z8 p. p* k7 [4 p/ Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

. B( q8 d3 K) `; _, L9 y$ o2 w% h3 J) }* P
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
' Q0 `: c( o9 ^: v( r/ |a                        { text-decoration: none; color: {LINK} }
9 [4 s: Z7 ?3 `% B6 N" n1 ?# Ua:hover                        { text-decoration: underline }8 V" W: Y' h. i4 b/ O
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
7 V' r7 Z& q; O( itable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }; l) k% h/ V, ~* U' o3 i: m" ~
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
- T4 l. m- A" i( {' ~# i/ ~form                        { margin: 0; padding: 0}
5 g* f$ C- v* G1 E5 Y1 bselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }& @- q1 k: K2 k0 l* s
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
8 U( U* X. z8 `& n6 \.nav a                        { color: {TEXT} }
5 V( N& n$ P* {.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
/ A" q2 b% u# }2 _3 ^.header a                { color: {HEADERTEXT} }
% P) ]1 I, ?. e; c.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }: L, Y. v; b; a% k! e
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
; Y3 ~+ B$ t; @, O8 v2 ?.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
* z$ V6 H# w) J. I4 u+ D  W.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
. n4 M4 y0 `7 N$ `% W) Y.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
- A0 }. d* g+ M; [  N1 Q.outertxt a                { color: {TEXT} }* p9 V' F7 ~$ U4 F2 |1 s+ C9 a- l
.bold                        { font-weight: {BOLD} }
& a% u  n2 e# N  [1 z.altbg1                        { background: {ALTBG1} }; ~, M& D% a6 W# F1 _0 h9 g
.altbg2                        { background: {ALTBG2} }
/ q4 m4 p6 r. }* f* H5 t/ \5 n* m.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }; y# c. T5 g1 l4 b* G% z  n
.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}
; z' J& `/ l  b2 S0 l, ^.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
" i. Q) h* r8 I( g" U.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
3 y$ u& X& {# v.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; }/ `5 q: o3 n5 E& e
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
) c7 C( i5 n) t3 O' @+ ^9 }) a* @.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }5 Y5 c3 b+ n  Y
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
5 v" M8 Z, K& O  n0 H.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}" b, e2 }$ r( l( p, N: _" \
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}' {  L* o* E  {( g" u" x; k
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
9 ~( S* J2 K3 ~1 B: }
0 ^+ n) R5 L' o7 ^5 M: k5 v--></style>

5 r) Q0 s9 Q' Y9 J
$ t4 }9 T2 \9 g0 j& O上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-9-30 20:09 , Processed in 0.097820 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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