官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

通用选择器，用 * 匹配，样式辐射到全部范围：

<!DOCTYPE html>
<html>
<head>
    <title>通用选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }
    </style>
</head>
<body>
    <h1>通用选择器</h1>
    <p>“妈，三年之期到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p>“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p>“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p>“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
</body>
</html>

零基础学习CSS(2)——通用选择器、元素选择器、类选择器、id选择器_Html
元素选择器，通过元素匹配样式：

<!DOCTYPE html>
<html>
<head>
    <title>元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        p {
            text-indent: 2em;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }
    </style>
</head>
<body>
    <h1>元素选择器</h1>
    <p>“妈，<span>三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p>“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p>“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p>“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

零基础学习CSS(2)——通用选择器、元素选择器、类选择器、id选择器_前端开发_02
类选择器，采用全局属性 class 进行匹配：

<!DOCTYPE html>
<html>
<head>
    <title>类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h1>类选择器</h1>
    <p class="slogan">这是类选择器的使用</p>
    <p class="content">“妈，<span>三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

零基础学习CSS(2)——通用选择器、元素选择器、类选择器、id选择器_前端开发_03
id 选择器，通过 HTML 的 id 进行匹配，id 值必须唯一：

<!DOCTYPE html>
<html>
<head>
    <title>类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        #ol {
            color: red;
        }
    </style>
</head>
<body>
    <h1>类选择器</h1>
    <p class="slogan">这是类选择器的使用</p>
    <p class="content">“妈，<span id="ol">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

零基础学习CSS(2)——通用选择器、元素选择器、类选择器、id选择器_web开发_04