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

3971 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。% C' P* y& M! [+ D: W- a
* f% f6 `7 w; A
1.基本语法规范  ]$ a2 a8 S6 e
分析一个典型CSS的语句:
- u) ^/ D9 o7 W2 f  M- v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
) Y( U5 m7 ]5 R1 L# ~
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / X" G$ i/ c: g# \) x3 S
样式声明写在一对大括号"{}"中;
! H5 J( R( @, M3 Q8 g! Y/ E1 t& s1 MCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
, E; _& s$ u% L2 h  F6 i3 d"#FF0000"和"#FFFFFF"是属性的值(value)。: C4 h$ W; ^$ k, _6 G; `9 ~0 H& d
& K. _3 C1 U) q9 ~0 V* m, w
2.颜色值% A3 J& h6 y& L
: i1 d1 x1 t4 Q( ^9 |7 p
颜色值可以用RGB值写,例如:
4 ?3 [1 o, O0 h
$ T0 J; ?+ O9 B. u% k* a
color : rgb(255,0,0)
' ~8 j+ A% m7 h: s
,也可以用十六进制写,就象上面例子
5 _' g7 }3 ~1 M1 Z2 b; a- g. g
- A7 V( r* i2 ~
color:#FF0000

6 w0 V7 S: s5 q: C" |2 a2 c6 K如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。2 s# l: g: o' @- T

' u: K5 @" t& n0 c+ Z8 K3.定义字体
( s' y* m' P# b- O# k* Xweb标准推荐如下字体定义方法
0 F+ p+ i& E, P0 ~) R
" V0 i; H7 n( L$ ?9 ^* N/ @* a
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

6 x0 ^- }6 I" C# m( G字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ' k% k7 Z$ p% i: g# S; d
Lucida Grande字体适合Mac OS X; 7 [$ X7 l2 h5 a, {0 Q* U4 h" D( _
Verdana字体适合所有的Windows系统;
& `8 S( x# d: @: nLucida适合UNIX用户
' J/ G" L7 Z* w7 t; x5 k"宋体"适合中文简体用户;
5 B& ^: a1 W  K4 o. b2 J如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;8 n: e, r) m8 n* G) V& n/ U

6 r; `) \) |! s( y4.群选择器
) Y+ x' i. J$ G! Z' d% _* u- w0 v1 j  n* b' R3 f
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 p7 z/ ?7 w! j0 `

: E/ p6 _% {+ ]- V. |9 D' y4 A
p, td, li { font-size : 12px ; }
- Y7 {( y& P1 N5 [9 u
就是给li下面的子元素strong定义一个斜体不加粗的样式, l* w0 R! s; k0 b; Y+ o

+ Y4 x0 V+ V( s& R8 t6.id选择器" @" V2 O( i9 O# S
0 {8 D1 Z, {  e- x
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* ?9 e! X" \0 c
<div id="menubar"></div
" W. r3 a& i; h- j8 C4 x& ^

& O, H; i! m4 ?* v7 @. Q5 ~/ l& B然后在样式表里这样定义:
) U4 W( I3 N! d4 e" `) h4 c4 O% e" Z5 U9 I/ o2 d
& U. K1 p7 i9 L% L: n. z" Y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

- h" U0 O0 |9 ?) p: r/ i( U- {+ s其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
2 ]! p7 S, T# N. J% ~/ E0 N0 Y8 N: T' v
id选择器也同样支持派生,例如:$ k: U0 x& s$ I& ~% Y+ ^- F0 o
#menubar p { text-align : right; margin-top : 10px; }

4 n/ _% a. ~- \/ _这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
* Y# @, c7 g. X, @8 ]4 h
0 F' f; n6 o' f2 v6.类别选择器: D2 B; A9 @9 z7 ~# v9 H

8 ~7 k5 B' h2 X4 \( J1 ^在CSS里用一个点开头表示类别选择器定义,例如:* S; {4 Q& R0 n' H
.14px {color : #f60 ;font-size:14px ;}
6 i: c& @3 H2 a, }# B0 z/ V
7 T( D3 h& T$ a. v0 U8 Z1 e; _
在页面中,用class="类别名"的方法调用:5 S9 F, m0 g# Y) r7 U
<span class="14px">14px大小的字体</span>

# ]  L) y  Q' g$ c* Y9 c! S% w( y) s# t9 p3 Q5 j% Z% G: W
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
  t% k; l) q* n1 D& N8 V+ h7 z0 r* l8 o* ~
7.定义链接的样式/ y+ o- b0 N1 T- p2 J; c
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
/ v4 z% G. `4 e8 \3 I+ {3 X: ^: W; r( S
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 K+ p4 Z0 o: g. e% Z+ n
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
4 ]8 e; ?$ C- F1 ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 B0 x" N; Y  V0 [2 Y3 ]
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

6 U9 \% M) N, w9 i: W$ U3 M. b
) E( t- B0 C8 G, u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
: q4 @7 s' g+ V( Pa                        { text-decoration: none; color: {LINK} }
2 X7 I8 d5 T! @2 ya:hover                        { text-decoration: underline }
: ?: h- ?: d& X: d2 G* Mbody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
$ |; d' R! Q0 @+ u+ Xtable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }* W+ O' T0 @: O  h+ \' L+ ?
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
4 o" t$ H9 {7 c7 _4 ?/ Jform                        { margin: 0; padding: 0}
2 {; i7 B& ~" O3 xselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
2 P0 d1 H; z) Q- _0 D6 F4 l.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
/ V5 g1 O. A& D) a' V) _# s.nav a                        { color: {TEXT} }. z5 N4 P$ q8 ^" c
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }& [# O$ o8 F1 F; e; l. f- y* N9 @
.header a                { color: {HEADERTEXT} }5 ?0 O. c/ h' l2 y, v
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
# Z2 f1 h9 n9 L.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
, Q2 |- o. ?3 V" A5 v$ e.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
: T/ d. Q8 s( F# c3 r9 m! @% b.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
) Z' k9 F  t9 H1 p' `" ^.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }* S( l3 E( x8 `7 m" E
.outertxt a                { color: {TEXT} }0 @8 ?; Q- u3 B& M5 Y2 M& i% k
.bold                        { font-weight: {BOLD} }
  O- c4 o" z% b5 h! `% d' _.altbg1                        { background: {ALTBG1} }' Y' }9 G5 I: X
.altbg2                        { background: {ALTBG2} }7 F$ Y/ s& p; _! Y) n
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }4 ^! G# }5 N3 |, @4 `
.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}
8 f$ O# Y! f" ?: _4 `! G.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
, g1 \2 P# T6 j.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
8 z6 D* u8 `9 {% i8 O$ ]/ I0 l7 r.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; `1 e4 [4 q% W3 a" e
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
1 a, K+ i2 X# I.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }, a5 ^! |) z; _. W) w
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}' |+ Y/ k. C5 f- k* @
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
; h+ }+ ?4 x2 ~9 d.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}0 }; o, E. A9 r8 \' x. A$ i9 ?' b
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}  |" |6 r3 d5 u( V$ L2 z1 y% I6 r) B
+ e! P/ r. ^1 y: k" R9 G! L* i
--></style>
2 l0 J! {2 _. p/ N6 G

+ I8 C! o2 F8 t1 k' Y上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-4-29 18:40 , Processed in 0.101271 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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