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

最新推荐文章于 2024-07-05 08:30:59 发布

Geeksongs

最新推荐文章于 2024-07-05 08:30:59 发布

阅读量563

点赞数 1

文章标签： css html css3 js less

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

版权

ID选择器和class类选择器的不同是:每一个ID只能够被html调用一次，而css当中所编写的class则可以被html调用多次，我们使用ID选择器编写一个谷歌样式的字体，如果需要选择同样的颜色，则需要更换不同的id名称，使用class类选择器编写谷歌字体样式的网页如下：

https://www.cnblogs.com/geeksongs/p/14356090.html

当前使用ID选择器编写之后的式样如下：

代码入下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>谷歌</title>
    <style>
    span
    {
    font-size:100px;
    }
    /#自定义的class需要在前面加上句号，也就是“.”，已经具有标签就不需要加上英文里的句号了！#/
        #red
        {
        color:red;
        }
        #red_two
        {
        color:red;
        }
        #green
        {
        color:green;
        }
        #blue
        {
        color:blue;
        }
        #blue_two
        {
        color:blue;
        }
        #yello
        {
        color:yellow;
        }
    </style>
</head>
<body>
<span id="blue">G</span>
<span id="red">o</span>
<span id="yello">o</span>
<span id="blue_two">g</span>
<span id="green">l</span>
<span id="red_two">e</span>
</body>
</html>