Day7CSS的引入方式与选择器

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS的引入方式</title>
    <link rel="stylesheet" href="./2.my.css">
</head>
<body>
    <p>噢多么美丽的一颗心</p>
    <div style="color: blue; font-size: 30px;">怎么会，怎么会，就变成了一滩烂泥</div>
</body>
</html>

image

选择器
image
1.标签选择器
选中标签名作为选择器，选同中名标签设置相同的样式，即如果是p标签选择器，则该文件中的所有p标签都会因为这个选择器而变化，没有差异化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
</body>
</html>

image

2.类选择器
image
与标签选择其不同的是类选择器可以通过自定义类名来实现标签的差异化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .red {
            color: blue;
        }
        .bigfont{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class="red">12345678</p>
    <div class="red">323233233</div>
    <!-- 那么同样的，一个标签也可以使用多个类名,类名之间用空格隔开 -->
    <div class="bigfont red">987654321</div>
</body>
</html>

image
类选择器在定义时，最好做到见名知意，不用纯数字与中文，用英文命名

3.id选择器
其作用与类选择器相似，差异化设置标签的显示效果
但id选择器一般配合js使用，很少设置CSS样式
定义id选择器:#id名
使用id选择器:id=id名
且同一个id选择器在一个页面只能用一次（但在代码层面上是可以多次运用的，但实际这样做会导致其他错误，即典型的语法上无错，逻辑上有误）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* 定义 */
        #red{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- 使用 -->
     <div id="red">开往北京的火车</div>
</body>
</html>

image

4.通配符选择器
image
即可以直接将选择器的内容覆盖到页面内所有的标签,且不用一个一个去调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <p>船长</p>
    <div>程艾影</div>
    <h1>我们的时光</h1>
</body>
</html>

image

posted @ 2025-10-29 23:23  冰涿  阅读(11)  评论(0)    收藏  举报