发新话题
打印

样 式 表 全 接 触(2)

样 式 表 全 接 触(2)


2、类选择符
# Z9 ?1 D% X4 U3 {7 C+ j% d% C9 f$ L" s0 \2 Q  F7 w2 x( M
  单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :  7 V# Z0 B* L5 @0 W

6 z) Q9 a" b$ [) ^: u! u6 ycode.html { color: #191970 }  
9 Z% D/ [2 }8 R* `6 U5 b: u: ?
code.css { color: #4b0082 }  
7 `) l$ |1 q" U' y6 W
: u# r+ ]9 w" |9 q+ t6 q以上的例子建立了两个类,css和html,供网页的CODE元素使用。CLASS属性是用来在网页中以指明元素的类,例如,P CLASS=css,每个选择符只允许有一个类。一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的css类也可以命名为effect。  : F" g. m( t" _9 ~2 O! L" U: [3 A

% v# e$ v- M8 Q5 @, e8 w3、ID 选择符  
) b) }) m7 i3 J% K: p1 @# [; e. Q
9 {  \* Q, j& y  ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:  9 _7 S# ~, L3 u; v

: r  A" a5 k% Lstyle type="text/css"  5 s; c7 n3 ?0 z" X6 d' I, }

" j. K  j% [& X/ V! K!--  
5 S7 G8 G$ J! ~( y( o% @; t, k, K4 ]4 b
#first { color: green }  
. l  m# H7 Z5 [6 d7 G% B' ^9 N5 I, w3 R# n9 n
#second { color:teal }  
" W3 |3 T/ e' x+ l4 G5 c9 X( L) D( q$ N( F5 G: v; W
--  
; x  s4 _8 n6 @: Z% r2 N" V+ ]
7 g. X) \  n( b+ e& R6 W) |/style  9 _2 U- }* M4 y; L6 n

$ j( N8 ], S! e7 g$ A4、关联选择符  
: e0 f. c, d8 x% b+ H7 w( X! z; r, x: P  e
  关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符  ! j# p3 z. q1 H. ^5 T* Q

" E  l1 P( X$ {! i. M: A: yP EM { background: yellow },这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。  5 F- J0 s+ `% s& T7 _
1 y& n8 V. r* A/ h* e
5、伪类和伪元素  ! V6 }' B9 b+ w: j

$ Z: B9 }. b! j$ U1 {5 o4 p$ [  伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。  
3 C- G7 J2 Q3 \. W7 K
6 g0 b$ G6 r0 b) x  S1 Y* a  伪类或伪元素规则的形式如:选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 }  
4 M; p5 d7 i( v# c* N. K% C* m
; @' k7 z# P7 B4 w& p3 H5 A* Y  伪类和伪元素不用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:  
* `2 Q: k8 Y: [& L8 n4 i% k( }  x) s6 J: r  W- D
   选择符.类: 伪类 { 属性: 值 }  9 `0 M9 |; P0 T/ v
" k6 W& E4 e( y- t1 f5 X! o) e
  或  
6 D# b. s! s- t& i
! D# o9 M. H" Z9 L8 ]3 q" k   选择符.类: 伪元素 { 属性: 值 }  
7 U$ y/ R8 S0 E" C7 ]; k2 P' Y9 m9 a% C
6、定位锚伪类  , z& s" n1 Y+ z3 c- z/ b

; j. ~$ M4 Z8 w: O1 x& {* C   伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激 活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。一个有趣的效果是使当前(或"可激活")连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:  % x- m5 w6 ?% G4 M( W# [! x
  t2 [5 f, }9 f  q& [; [7 y7 B
   A:link { color: red }  " f; B7 L1 h' b; f

  R5 f  z) u9 O+ ?+ s: D8 Q) k   A:active { color: blue; font-size: 125% }  ' M6 q, r) J3 V( n1 b7 d
9 x2 r) D1 ~, }
   A:visited { color: green; font-size: 85% }  
, P  d' x  |' M& }! Y2 m- U: c
3 c0 [! \4 G/ F: J2 z2 J5 e: k7、首行伪元素  
) ~6 l) J: t8 \0 [9 e2 h7 p" h
* e7 \) N. p' y  u0 V  通常在报纸上的文章,例如"据新华社报道"中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:  1 u, O! f( d, M" b' ]% A+ Q4 [

1 W, J& n- a+ H& B6 ]" _   P:first-line {



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题