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

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

 

 

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

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

 

posted @ 2021-02-01 13:17  Geeksongs  阅读(367)  评论(0编辑  收藏  举报

Coded by Geeksongs on Linux

All rights reserved, no one is allowed to pirate or use the document for other purposes.