转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
创建并引用样式类         ★★★★

创建并引用样式类

作者:闵涛 文章来源:闵涛的学习笔记 点击数:629 更新时间:2009/4/23 13:46:59
    在用CSS进行网站设计时,会遇到一种情况:相同的标志可能在不同的地方显示的效果不一样。怎么办呢,有一种办法即是采用上节所讲的直接插入式,逐个逐个地进行属性设置,如果该类标志比较少,这倒还可以;如果多了,可就有点令人厌烦了。
  解决的办法就是采用样式类。
  样式类,顾名思义是样式的分类,它可以根据不同的风格需要对某一类型的标志设置几种不同的CSS属性,也可以对整个风格分成几个类而不是只针对某一种类型的标志。
  一、样式类的建立
  样式类可在我们上节讲的外部文件与文档头方式中建立,而不能在直接插入式中建立。它的建立格式有以下两种:


  在第一种方式中,我们可对某一类型的标志建立样式类,如: 



  上边的例子中,所有段落标志的字体都为宋体,大小为10pt,颜色为红色,由于排版的需要又分成了三个样式类,分别具有不同的排版属性,从这个例子你可以看出层叠样式单之所以为层叠,其意义也在于此。
  第二种方式的用处则在于它规定的样式类,没有特定于某一类标志,而是其它类型的标志都可以用。 如:



它规定了三个样式类,几乎所有的类型都可以引用它们。
   有一点要注意,样式类与我们上节所讲的统一风格形式并不相冲突,样式类更多地强调了风格的异,而统一的设置形式则强调了风格的同。两者常相互结合,实现样式风格的叠加,使网页风格在整体统一的基础上而各自又绚丽多彩。
  二、样式类的引用
   样式类的引用很简单,只需在标志后面设置Class属性值为样式类名即可,引用格式如下:
    <标志 Class="样式类名">
  如我们上边用第一种方式建立的样式类在一个段落标志中引用,
   <P Class="isLeft">你好,欢迎你来到网页制作学习园地</p>。
  要再次提醒一下,用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中;而第二种则没有限制。
  如果我们要动态改变某个引用了样式类的标志风格, 可通过脚本语言来修改标志对象的className属性,具体方式如下:
  所要修改标志的标识号.style.className="样式类名",如对一标志<p id="p1" class="isLeft">hello</p>修改为右排列的样式,在脚本语言中修改语句如下:
   p1.style.className="isRight"



没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台