HTML第三节

发布于：2025-03-06 ⋅ 阅读:(84) ⋅ 点赞:(0)

一.初识CSS

1.CSS定义

A.内部样式表

B.外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./第一次.css">
</head>
<body>
    <p>这是p标签</p>
    <div>这是div标签</div>
</body>
</html>

P{
    color: aquamarine;
}
div{
    color: brown;
    font-size: 30px;
}

C.行内写法

二.选择器

1.标签选择器

注：1.所有的p标签都会设置成一个格式

2.类选择器（差异化）

注：1.先定义类，再使用类

2.一个class属性可以使用多个类名

3.定义类前面要加.

3.id选择器

4.通配符选择器

注：作用：清除页面中所有标签的默认格式，方便后续设置每一项格式

三.利用类选择器画盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .orange{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>
</html>