自定义类别
今天讲的有一个新知识“类别”。其实,这知识并不陌生!回想一下,在 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 来调用!套用到任何标签中!