我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地:首页 > 网络学院 > 网页设计 > Html/Css > 样 式 表 全 接 触(2)
热门文章排行
热门文章排行 用CSS美化你的网页(11-24)
妙运用CSS样式表立刻改变鼠标的样式(12-07)
背景图的详细设定(12-07)
让字体美起来 (1)(10-21)
Xhtml(5):head区的其他设置(10-13)
精采文章排行
精采文章排行 HTML中meta作用(11-01)
奇妙的文字图形 font-family的非常用(11-01)
css网页设计技巧(11-01)
CSS制作的阴影链接文字(11-01)
CSS实现当前页的滑动门菜单效果方法(11-01)
技术专题推荐
网管论坛交流
 

样 式 表 全 接 触(2) 

作者:   来源:   点击:   日期:2006-10-13

 

2、类选择符

  单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :

code.html { color: #191970 }

code.css { color: #4b0082 }

以上的例子建立了两个类,css和html,供网页的CODE元素使用。CLASS属性是用来在网页中以指明元素的类,例如,<P CLASS=css>,每个选择符只允许有一个类。一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的css类也可以命名为effect。

3、ID 选择符

  ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:

<style type="text/css">

<!--

#first { color: green }

#second { color:teal }

-->

</style>

4、关联选择符

  关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符

P EM { background: yellow },这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

5、伪类和伪元素

  伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

  伪类或伪元素规则的形式如:选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 }

  伪类和伪元素不用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

   选择符.类: 伪类 { 属性: 值 }

  或

   选择符.类: 伪元素 { 属性: 值 }

6、定位锚伪类

   伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激 活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。一个有趣的效果是使当前(或"可激活")连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:

   A:link { color: red }

   A:active { color: blue; font-size: 125% }

   A:visited { color: green; font-size: 85% }

7、首行伪元素

  通常在报纸上的文章,例如"据新华社报道"中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

   P:first-line {




文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   相关文章:
·样 式 表 全 接 触(1) ·样 式 表 全 接 触(3)
·Xhtml(12):校验及常见错误 ·样 式 表 全 接 触(4)
·样 式 表 全 接 触(6) ·Xhtml(9):第一个css布局实例

   文章评论:(条)
  
 请留名: 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。