关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

CSS样式类之常规类

作者:佚名   时间:2014-03-11   分享到:

CSS样式类之常规类
    使用CSS2类能够在文档级样式表名外部样式表中为同一个元素创建多种不同的样式。在文档后面的部分,通过包含与样式相关的class属性,且将其中一个预定义的样式指定为name值,就可以明确地选择要对该标签的特定情况应用何种样式。
常规类
    在技术论文中,可能需要为摘要定义一种段落样式,为方程式定义另一种样式,并为居中的引用定义第三种样式。为每一个段落定义一种不同的样式类,就可以将这些段落区分开来:

<style type="text/css">
<!--
p.abstract {font-style: italic;
   margin-left: 0.5cm;
   margin-right: 0.5cm}
p.equation {font-family: Symbol;
   text-align: center;}
h1,p.centered {text-align: center;
    margin-left: 0.5cm;
    margin-right: 0.5cm}
-->
</style>
 
    首先,请注意在这个示例中定义类是一件很简单的事情,就是把以句点分隔的类名作为后缀加到样式规则的选择符标签名称后面。与XHTML兼容的选择符是标准标签的名称,而且必须是小写字符,与此不同,类名可以是字母、数字和连字符的任何派排列,但是必须是一个字母开头。但是要注意,类名是区分大小定的,因此abstract与AbsTRact不同。与选择符一样,类可以与其他选择符一起列举,之间用逗号分开即可,如第三个示例所示。类的惟一限制是它们无法嵌套;例如,p.equation.centered的用法是不允许的。
    因此,示例中的第一条规则创建了名为“abstract”的段落样式类,它的文本是以斜体显示的,与左右边界的距离都是0.5厘米。同样,第二个段落样式类“equation”告诉浏览器要居中显示文本,并用Symbol字体显示文字。最后一条样式规则创建的样式是文字居中显示,并与边界与0.5厘米的距离,这种样式被应用于所有一级标题,还用该样式创建了名为“centered”的<p>标签类。
    要使用标签的特殊类,可以为该标签添加class属性,对于一个段落来说,class属性的值就是用于那个标签的类名。



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/contact/20151229/n7328.html

上海联楷网络新闻