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

4657 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
+ ~. I0 X' o2 m! C+ S
4 z/ |3 X( X+ `3 M, o/ O8 ]1.基本语法规范+ v+ Y7 Z& o3 D1 F
分析一个典型CSS的语句:
8 ~2 A% T9 N3 b. \: h3 S5 l) w, I
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

+ p2 t; F9 {7 l) c6 o( n8 q1 A其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
8 m3 D! X+ W& A3 [% @* ~& P* b9 t样式声明写在一对大括号"{}"中; 7 V; J9 H6 R, b3 Z
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
4 \- S5 B4 [; K+ o"#FF0000"和"#FFFFFF"是属性的值(value)。7 e1 {- L3 e) h5 {/ ]8 |# m
7 Q3 I% \; d# g# J* b' p6 r0 O
2.颜色值" @. V. x  f! F& S
* `* k/ y+ |, \) m1 Z2 m0 H! n6 [
颜色值可以用RGB值写,例如:" J! Q( {% @; L! D: Z
  i+ S' o& z9 q6 L& J1 s) U! N
color : rgb(255,0,0)
  l+ b  N1 y) \" S  A6 c+ _
,也可以用十六进制写,就象上面例子  O- l' e. P# t; u. J
) N1 A+ x! p! ^" a: _
color:#FF0000

! y& B/ X5 ?& b) `) {5 P' L如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& R8 N7 s; }8 ]

- k6 N; h  d( [, k- u3.定义字体
& A  {* I) y! w7 |4 i8 S/ bweb标准推荐如下字体定义方法" v* X  p0 _3 r

7 R/ d( t0 q+ C
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) ~; Y% D* @+ Y% {
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
  ^. R# m8 a. F: z. u% F0 H% H- w' gLucida Grande字体适合Mac OS X;
, T0 r5 b/ e: j4 B5 JVerdana字体适合所有的Windows系统; ' b' K: H9 U- r2 q
Lucida适合UNIX用户 % f* O1 o2 u$ V: K' P  ]
"宋体"适合中文简体用户;
5 V! E: R" J* x4 v8 ~. J如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
* G% k7 m2 m5 J3 J. B
6 I0 n* `3 {; s8 p! p4 n; E. i5 S4.群选择器
5 v. H6 N& E1 ^! x8 T+ p
  n$ E  \# ~/ k; u当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
$ U) V  v6 b: K1 g
# l  w' K1 r. d4 Z! V: ]
p, td, li { font-size : 12px ; }
) Q+ [0 @# W& a& c" Q& f5 t4 d' t4 x
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ f- [, V  R4 c( G
3 d1 Y6 f5 E) |( F6.id选择器% W* L# z4 v9 c4 d7 s* b

" b! h6 s5 w; v% k% C% @1 {用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ Z, e6 l2 d" T
<div id="menubar"></div
- M: ~% Q- h) H
5 f( [8 _. j/ i/ u8 I) L
然后在样式表里这样定义:
8 r9 O4 R3 n9 f3 l$ x$ }  J) ~$ |- I
' u# X+ u( |  R2 K7 u) a
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 u% [3 W' b- |7 q" M# z
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
  r; S: q0 d* [4 |; ~) O9 Q7 l2 F0 t+ f" [3 `" `; w
id选择器也同样支持派生,例如:7 F$ A" K, c$ Z/ A' b& f. ]  }
#menubar p { text-align : right; margin-top : 10px; }

' N3 U6 o) Q, A0 m0 g5 f这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
, W- @0 \- W/ ^' m# V+ ^: z4 \+ q% J' S- ?, O
6.类别选择器
" l+ [1 R$ X6 Q9 g4 E. W. m3 n8 I6 d
& r! d8 c7 H3 z2 k0 Q在CSS里用一个点开头表示类别选择器定义,例如:
' N; m* _. ^: v( b5 s5 z
.14px {color : #f60 ;font-size:14px ;}
8 K% |1 X3 C% _( D  S
$ F/ G2 O2 j' U$ c! q$ X/ l' W
在页面中,用class="类别名"的方法调用:! f& M$ z; I+ F8 y% g% y
<span class="14px">14px大小的字体</span>
# d6 p* ~5 v! O* ?& Q2 x0 E- V
9 ^2 P5 e2 P& a0 k
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
' s) w6 I4 {- \" R* H( N/ n4 A
: v6 u0 |8 D, r* y7.定义链接的样式; ?4 N# V. c2 O: b7 ^8 |2 Y- Z- R
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
: U4 \, V$ `* y2 c7 s6 u
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! w  \# C9 N# |! {& f/ w3 r7 ~
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
/ F' K; T8 w0 t" |* a  H1 S+ G9 Ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 O$ V! P- V" G' X4 ?+ A5 {  I! i/ ~a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 k) h4 h$ M# C
$ v5 Y1 T5 s6 Y2 O/ v0 ~, w
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--+ j$ B4 w/ y3 S3 D
a                        { text-decoration: none; color: {LINK} }6 L0 c3 {( n# l% o# K0 D8 g
a:hover                        { text-decoration: underline }# H- g$ w4 R0 L; T; C4 V( j
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }" L- H1 C; S$ _" B$ A
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
1 W5 N2 B+ m$ C! I  H2 [input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
# J% j3 f# T1 c4 [: Y! Y& S# Oform                        { margin: 0; padding: 0}! ?  G) Z8 U4 Z3 Y( Z$ r. Q3 }9 D+ P
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }+ c! ]( e$ V9 R8 @% Y! s% P9 A1 a
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }2 C; \' J. F( Q5 F% H( M. J4 i4 u
.nav a                        { color: {TEXT} }
+ u" E( Q0 _. Z5 i8 @9 g0 S.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }+ q$ z; E& i1 T7 e
.header a                { color: {HEADERTEXT} }
7 X4 l7 Y& z& G# d+ ].category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }' z- H8 S+ I2 V9 ~
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
# f0 W" Y# S' d6 V, H$ R/ w.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }' x, }3 G( B) E( `8 p" X
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }) g6 v# N6 w2 `, a5 X- w
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }: w5 U0 T( h% e) I
.outertxt a                { color: {TEXT} }" f/ X0 p+ c0 N/ S- f3 ^0 g
.bold                        { font-weight: {BOLD} }
  t% Q- }: v4 j6 _  G.altbg1                        { background: {ALTBG1} }4 h7 a* d% B7 t! n* Q$ S( ?+ u! b
.altbg2                        { background: {ALTBG2} }, \/ f5 K+ r* i/ A. c$ }; k
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }% e$ F5 K0 V# b- z
.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}3 r4 n/ ?. d1 E% K
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
6 W! n- \. K6 g, j. u.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
3 P% u! P* {$ v7 z5 U6 m  U.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
& d' y( k/ b3 ~; z8 L( b.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
' b! |( z/ c1 m' m! n.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
8 k  o9 p, k* k. V' C.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
$ r+ k$ `/ z& l.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}# P5 c/ t, ^2 g) O' D
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}! H# E5 U6 ~6 x# [1 L. e) T' e
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; z, ?' T  L4 y

: L7 B" o% G( o2 J0 ]* x, \--></style>

4 s" m' I- b+ q% l
7 L5 X0 I+ g% ^- {上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-8-23 19:02 , Processed in 0.105733 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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