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

4851 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
- c2 y( @9 W# W' `' ^7 M% K/ V  g* P% F$ M4 r
1.基本语法规范& V2 R6 d0 @/ u; ~1 c
分析一个典型CSS的语句:2 `! I* X$ t' R+ r& _
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
+ w% {2 a$ T; v1 c3 k5 J" L
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 F0 ]7 r2 w/ E/ u7 Q* A# T* s样式声明写在一对大括号"{}"中;
  j, O/ ^8 y! n& l# ?% h: iCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
3 P7 ?) b' G! D; J" m"#FF0000"和"#FFFFFF"是属性的值(value)。* W9 R* |$ s0 }6 k: H* b+ ^# m

, q9 N9 N) p. V+ _3 a2.颜色值
- K, I7 u( y% g6 }% h9 x9 ^
$ Z7 S, U1 P$ b$ ~+ Z颜色值可以用RGB值写,例如:  I% @4 M1 Z9 l/ h0 {% T7 F

) E! i2 g; J$ Y2 c& w
color : rgb(255,0,0)
7 @7 }, e* n# o2 b
,也可以用十六进制写,就象上面例子. h9 C! C( i  Z" q( ^+ {
4 i; A6 F1 A$ J+ z9 f3 f, W
color:#FF0000

3 O2 L2 F; r% L0 l$ A1 K' U" G如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
0 {7 l5 k; b- I9 Z" E
1 V7 t. V+ F( V1 n3.定义字体6 q; t6 U$ w% w2 Q4 v5 P; s0 q$ U; N
web标准推荐如下字体定义方法% b4 E6 Q$ {( u, ?
: K# _' f1 J% p; s  v% z8 R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

0 A6 r: e; A8 p# @. R6 w) \  U字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; # `3 I1 D  P5 z: O; Y( D
Lucida Grande字体适合Mac OS X; 4 J0 j  P/ ^& m) q; j% K
Verdana字体适合所有的Windows系统; # X: v. k: @, C% H
Lucida适合UNIX用户
3 P, e1 x: n0 B" J"宋体"适合中文简体用户; ; m; `- a4 W# ?  ^+ S( z
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, v: _, g. \/ O. T* e1 X0 o: Z
  ]+ l) d$ I% ~4.群选择器
/ j+ F% N/ X( |* _1 v6 x* x; S- j- T, _4 Q2 x: e
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:' t- {& W3 w% k0 p) Y9 Q- Q  x

1 ^6 G8 N! _% b% g' y& ]( t
p, td, li { font-size : 12px ; }

1 p" d( G* W% u2 U! ]就是给li下面的子元素strong定义一个斜体不加粗的样式
# A% s, v' Z1 X+ e* |$ n
8 d4 p" Z6 X" Z! n6.id选择器
4 A* E% T; k9 D4 a
5 r, W' [+ q) T3 ]# B! ]用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
  k5 I- T0 X& ~
<div id="menubar"></div
& {. E% p( M8 ]
) v( D1 p9 ~6 v
然后在样式表里这样定义:
6 W3 C  k" F" T- C
! _9 g3 @5 h; x
; M8 z) m. W' r& j2 _4 L
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

7 `0 g3 ?  q8 Y( M9 O  D其中"menubar"是你自己定义的id名称。注意在前面加"#"号。% F% @8 \  U0 Q. i/ I* {* g4 z4 a/ `
  Z, `3 S$ K, ?+ C- n
id选择器也同样支持派生,例如:
: ~* g/ T# J9 i" i+ |- U0 I
#menubar p { text-align : right; margin-top : 10px; }
0 ^6 F! J: F' @) Z0 F% ]
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 ~( U. R) e  \
5 M' \! I6 v6 x% l' U0 S6.类别选择器
# ~& Q8 N+ L/ G# r
8 k: U2 m' c) G& |# r. w" o* y# t& i在CSS里用一个点开头表示类别选择器定义,例如:
8 t% y9 g: |1 v- B/ f
.14px {color : #f60 ;font-size:14px ;}
  }0 O! `1 T( e2 `9 V0 {
2 I* E# z3 W9 p/ O
在页面中,用class="类别名"的方法调用:
+ b4 b  I9 J6 o+ l5 I1 p
<span class="14px">14px大小的字体</span>

/ d4 E& r2 p) Z. f% @0 x+ b) u! v3 i: h
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
, Z$ d# m: h0 h" F
8 L) e) {* B& e9 v1 w1 {! g7.定义链接的样式3 p1 b8 K+ f5 h( F! R0 C- q
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
/ l3 g. l) k- X. N/ e
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 V. A" p2 o$ O- C7 C$ `; v
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 Q# F+ h& S; f/ |. ea:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 ]6 H4 Z! N! ba:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

7 X1 T$ t) b( Y, z) [% z& s+ _/ s$ v2 p  C" l
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
) Y4 r3 @7 H  G) C5 Wa                        { text-decoration: none; color: {LINK} }" ~; B- x9 ?& g5 W  j$ W! r
a:hover                        { text-decoration: underline }
$ Q7 p% e+ u- x! _! J! Sbody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }/ N5 n7 M) Q& o! i9 y+ a$ v6 f
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
/ D4 _1 f8 V) G3 V5 ~0 i) rinput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }' V5 ]. `. M+ r; M) g
form                        { margin: 0; padding: 0}
7 y/ Q$ a" t1 N9 U5 O! ~4 ~select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
. C) u9 @2 p! e( G6 Z& @; s+ j: n.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
7 Q5 Q2 s2 b& k.nav a                        { color: {TEXT} }
' K* T, ~+ \5 ^# T: |! W.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
* M  v4 U2 r" q9 O; L& o" J.header a                { color: {HEADERTEXT} }
* |, P( \5 {* K  q9 d) R6 k.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }' x/ `$ s# B! H* I
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
* h' ~1 v% m- e4 A  e6 r.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }% F6 s6 b8 E9 R- S& B$ o6 A
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }/ ?' ]* J) Y" U, w$ v5 ]
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }# }$ v$ ?7 Y" P4 ~# L
.outertxt a                { color: {TEXT} }
$ g% t: C5 t  S  v9 d) q% \; P% m.bold                        { font-weight: {BOLD} }
- t# o( ]( @; {.altbg1                        { background: {ALTBG1} }& y5 {) |0 ~: |4 q# E6 G, ~+ y, I3 T, {, V
.altbg2                        { background: {ALTBG2} }9 o" U4 o  T. }4 X
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }3 K" v8 B" P8 G% D2 C8 s
.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}2 s* t/ _- A* _0 i8 O4 ]3 I. s! @( X2 {
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } ) Q" q+ m: A4 Q( }, C
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}: k; @$ w2 q+ p" u* Y0 F( Z, l1 p' E
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
" J( p4 E" ]% I, B+ @. k9 C" L: ^.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
; k0 d! r. n9 s+ t% j# Z; o.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
$ `6 T$ D" B( ^* x' E) [. u.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}& o7 G8 Y0 O% u+ y5 v4 u; l+ ~
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}% b5 a: ^. }" v/ _/ L9 g
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}, V4 y/ P) C# t0 C2 k' h& B2 W
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}4 h, T# \4 E9 `' z
" ]" a: A, \5 h5 D* v- B4 ~, w
--></style>

5 t) D6 w9 o: E/ y9 ?3 v. }& q
, P$ \6 c4 A9 a- c+ @, k0 M上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-9-25 15:18 , Processed in 0.093525 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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