假设我们想要实现谷歌首页这样的样式字体该怎么办呢？如下所示：
从中可以看到Google当中的G和小写的g均为蓝色，o和e均为红色，剩下的一个o和l分别为黄色和绿色。我们可以使CSS当中的class选择器来完成这字体的编写，首先我们使用span标签来表示Google这个单词如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>谷歌</title> <style> span { font-size:100px; } </style> </head> <body> <span>G</span> <span>o</span> <span>o</span> <span>g</span> <span>l</span> <span>e</span> </body> </html>
这样使用了span标签这个行内元素之后，以及在css当中编写了span标签所对应的字体的大小，因此字体已经是相当大了。现在我们重新编码，将css当中每一个元素所对应的颜色的class以及css有关颜色的代码写在head标签内，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>谷歌</title> <style> span { font-size:100px; } .red { color:red; } .green { color:green; } .blue { color:blue; } .yello { color:yellow; } </style> </head> <body> <span class="blue">G</span> <span class="red">o</span> <span class="yello">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </body> </html>
这样我们就可以得到我们新的字体了！如下所示：
