设计主页 > 网站制作 > CSS教程 >

学习CSS使用技巧教程(5)自定义类别

设计前沿收集 /  时间:2006-05-21 09:00

  上一节:单独调用

  自定义类别

  今天讲的有一个新知识“类别”。其实,这知识并不陌生!回想一下,在 HTML 标签中,有个属性叫 class,当时没有解释这个属性是干什么用的。其实,不是不解释,而是解释了也不会用,所以就暂时没有说,等到了今天。这个 class 属性,所以将之解释为“类别”属性,它有什么作用呢?它能够让我们在不同的标签中使用相同的 CSS 设定,举个例子如下: 我们在读书的时候,常常看到课本上有重点的地方,用红色或其它颜色标明。如果,今天我们的网页上,也想将一些比较重要的地方用“红色、粗体字”来显示,你会怎么做呢?:

原始代码 <font color="Red"><b>网页教学网</b></font>”
显示结果 网页教学网

  使用CSS实现重点突出

  用上面的那种方法是相当不错的!简单用易懂!不过,试想一种情形...若是在我们的网页中有 1000 多个所谓的“重点”,今天你突然想把重点通通换成“红色、粗体字”,那你该怎么办呢?这时,我们就讲用CSS来帮我们解决难题吧!而且,我们的“自定义类别”也就用上了!

样式语法 <style type="text/css">
.important { color:red ; font-weight:bold }
</style>
应用方式 <font class="important">网页教学网</font>

  首先,我们在在CSS表中自己做一个叫做 important 的类别,然后利用 class 属性,套用在网页中,不难吧!以后若是要将“红色”改成“蓝色”,那么只要改类别里的设置就行了!不管网页中有几万个“重点”,都不用怕了!

  自定义类别的用法

  看过了自定义类别的大概用法后,再来做详细的解说,如何自定义类别?自定义类别方法很简单,方法和一般的CSS声明没什么区别!唯一的不同是,CSS声明是针对某个标签的;而自定义类别则是不针对某个标签,而是要自己命名!

样式语法 <style type="text/css">
.important { color:red ; font-weight:bold }
</style>

  以上为例,.important { color:red ; font-weight:bold }就是我们自定义的类别,其中的{}部份和一般的 CSS 声明方法一模一样!差别就在前面的.important,没错!important 就是我们自定的名称,有了名称,才能调用。注意!前面记得在自定义名称前加一个小点“.”,这样就完成了自定义的一个类别!这个类别可以利用class 来调用!套用到任何标签中!

  下一节:文字属性