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

4611 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
! P& e6 A/ C# h' w: h% U0 {
; k* ]" @7 N0 K6 Z: i1.基本语法规范# q- u' K& L5 v
分析一个典型CSS的语句:
  U! o- O& E9 u3 ?9 J. m
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

5 K2 ]: x" N) I5 ~  B5 e其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
7 x2 O8 [5 j9 G. f/ G. Z样式声明写在一对大括号"{}"中;
5 a7 m# L5 b" A$ F7 WCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 7 i# [9 ]3 K7 \% t; a, t0 B+ S* v$ _! y
"#FF0000"和"#FFFFFF"是属性的值(value)。
0 }: k2 m- i8 i) K/ F& h; a1 G/ ]" c& ^0 y9 C9 R
2.颜色值
7 D( v- ]1 O% j+ {; m6 n2 ?( i8 Z2 i/ `
颜色值可以用RGB值写,例如:
+ {* n, M0 {4 [' F2 h  ]; B9 t2 U- ?9 m
color : rgb(255,0,0)
. w/ g5 c2 n* g/ m! S
,也可以用十六进制写,就象上面例子
5 I3 |8 U% u( n- C: L
, E) [: j6 i8 d# }
color:#FF0000

! T- o3 q6 A; l# A如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。' q* W( p$ s, F3 _
2 ]' E" d+ u  i  ]
3.定义字体
& G. W0 o" l& L  P' |8 b5 V" k& Gweb标准推荐如下字体定义方法
8 ?# a* Z# q# m' U; _! H0 S7 {# K% ]' _9 k
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
# o4 C" h2 ]9 x* r
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; % N* Q! u1 O, J, T  p
Lucida Grande字体适合Mac OS X;
2 d* z3 J& H; z" M  o2 E1 ?Verdana字体适合所有的Windows系统;
1 G3 o, n$ e4 l  I- W- oLucida适合UNIX用户
& ?/ Z) ]: y& `9 h  g5 U"宋体"适合中文简体用户;
7 x4 n5 H4 O! i. S( t# j- A( R; I+ U, q' F如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
( ?) e8 h1 X0 H2 i6 I+ H/ ]9 d+ ^) w
4.群选择器( H, e( P* F$ Q
- ?7 a+ y0 J/ e* v
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. A/ U; L% j; d# d0 g- S) T0 Z0 a- _

  B# B, w) f4 ?% Q. G
p, td, li { font-size : 12px ; }
5 e( O& H( V9 V8 l% T
就是给li下面的子元素strong定义一个斜体不加粗的样式1 H! p' [* |5 F4 ]- d4 H% r

3 L8 U. W% v9 W- }' o* I  ?6.id选择器0 k7 i2 D/ N! T3 \. Q9 m& Z
% r" m  R* K1 u) G/ M- y6 y
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 @5 g" a! c3 ^0 F5 v! {; k
<div id="menubar"></div
  Q' _: `! T- j4 M- e. M5 D
3 l1 D; \  @# j; U
然后在样式表里这样定义:
& N  |  I  l  ~( b9 ^8 K0 s7 D: k9 r! I
5 D# c3 r) ?( L7 C- P+ z
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

) o" ?! r- U* o! t/ E2 q3 i" P3 `其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' r* r: h: J* Y% W3 F, ?  H+ }
6 p0 `6 N1 i! m" @2 iid选择器也同样支持派生,例如:( {( n; X. ^- `  @
#menubar p { text-align : right; margin-top : 10px; }

( }) D1 P  u" H6 {, ^' W1 U' x这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
4 s- {! p+ U. l' `& \2 s1 }& p0 z6 |3 `( ?2 _6 g0 r, _: v& S" E0 Y
6.类别选择器3 C+ W# Y; J( i, }
/ C( n+ f# L, G  K: t
在CSS里用一个点开头表示类别选择器定义,例如:
0 N1 a  j4 O& ~3 [) g) Y3 ?5 ~
.14px {color : #f60 ;font-size:14px ;}

" h6 a5 _8 @2 v( n  g" _5 @0 r" o! J: ?7 m) X* D  `2 i# u
在页面中,用class="类别名"的方法调用:8 }7 B3 X! X5 C. X
<span class="14px">14px大小的字体</span>
. b/ c' r; R! v$ C

: k/ m5 z# x0 J4 y这个方法比较简单灵活,可以随时根据页面需要新建和删除。; r9 z: y/ {1 }3 L4 Z

9 b6 F2 }* b' _7 d7.定义链接的样式
. b( i2 c$ K( @. m& @CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
. o9 m8 d! K. q) U+ |
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
9 `  l6 |2 V2 Fa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* {! A5 C+ R* x) ?% A! r2 r
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}. @+ B1 {8 w; g  s% i4 M7 ^
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

/ t* k0 R, k; z' Q0 h* V4 N* j$ S% z1 ^) o7 s. R5 E. [/ E6 f
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
; S0 ]+ Q5 [& }a                        { text-decoration: none; color: {LINK} }" G4 A) ]9 a  c7 O. p# _
a:hover                        { text-decoration: underline }. r9 ~3 y1 @5 V) ^3 @
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
, B- u' }( v$ ^0 t, V. H( wtable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }7 O7 I+ y+ C. R" O/ A
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
* i0 W9 @9 n/ k; a, N3 T6 g, aform                        { margin: 0; padding: 0}
7 Q- J& }, ]! cselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
& `0 l8 w( q& V7 [2 _2 N.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }" t5 [$ H' M) A
.nav a                        { color: {TEXT} }8 N/ m% S" q; C( U2 t( Q
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }4 U: W! _, a' h5 \
.header a                { color: {HEADERTEXT} }1 [& n, }7 e5 T" V. @
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }( B4 H  g$ O  p7 K% q
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
+ k/ C+ X# L- g! f& V0 |* T' r.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }+ h4 x/ t" s9 D* ^
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
# D/ D% M6 E+ B8 {# P.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
5 T8 }2 k! g/ o9 J, m) `.outertxt a                { color: {TEXT} }& v+ ^( w, x% a( \3 j4 |
.bold                        { font-weight: {BOLD} }: i: _& W* U; ?. m- r& h$ B
.altbg1                        { background: {ALTBG1} }
, n2 I: f, K7 D* u! Z.altbg2                        { background: {ALTBG2} }' S% Z% t! ^: N5 i& A3 C& K
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }2 f5 [$ {7 a( S6 Z; ]$ j+ U
.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}
; S' t1 T: h# O8 Y7 X4 K3 \! G.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
  R. w. V: A- v' n7 l% m.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}+ j! z6 h% N  Q& k2 }: z/ P
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
+ z# Q9 b* j3 |.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
8 p7 I) T4 ^  R' ]1 c4 H2 @.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }; ]4 Z8 q$ M! {- `) u7 [
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}5 P1 q4 Z- ]! @1 M( Z: L6 [
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}! P  j  ~* G5 Z
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}# A3 q+ H8 ]7 P7 G5 N
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}% l. v9 I/ @, G) E6 M. Z/ i) D
! [" i: D. @: W8 f$ e0 n& }
--></style>
* t+ \: l- Z4 P+ i5 n

7 e) m$ b; ^5 a2 Y上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-8-15 15:48 , Processed in 0.085037 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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