• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

创建并引用样式类_css

css 搞代码 7年前 (2018-06-11) 174次浏览 已收录 0个评论

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

创建并引用样式类_css

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

创建并引用样式类_css

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

创建并引用样式类_css

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

欢迎大家阅读《创建并引用样式类_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:创建并引用样式类_css

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址