【前端开发】：使用CSS类选择器编写Google字体样式

最新推荐文章于 2022-07-22 21:58:46 发布

Geeksongs

最新推荐文章于 2022-07-22 21:58:46 发布

阅读量1.7k

点赞数 3

文章标签： css css3 less html google

本文链接：https://blog.csdn.net/Geeksongs/article/details/113523707

版权

假设我们想要实现谷歌首页这样的样式字体该怎么办呢？如下所示：

从中可以看到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>

这样我们就可以得到我们新的字体了！如下所示：