HTML——css--选择器

原创

已于 2024-09-19 08:59:24 修改 · 1.1k 阅读

标签

#html #css #前端

于 2024-08-05 02:50:34 首次发布

scss

HTML中的标签为我们提供了一个盛放信息内容的容器，而如何让我们的信息变得更加直观明了，这个时候就需要我们的css来对页面进行装修美化。

借鉴上一个标签文章中动物之家的页面进行美化，我们在原来的基础上对其信息内容进行了适当的填充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
</head>
<body>
    <h1>动物介绍</h1>

    <h2>老虎</h2>
    <img src="img/picture1.jpg" alt="" width="200px">
    <p>老虎是典型的山地林栖动物，由南方的热带雨林、常绿阔叶林，以至北方的落叶阔叶林和针阔叶混交林，都能很好的生活。</p>
    
    <h2>兔子</h2>
    <img src="img/picture2.jpg" alt="" width="200px">
    <p>兔，是兔形目兔科 兔属草食性脊椎动物 。</p>
</body>
</html>

1.三种样式：

1.1行内样式：

如果我想要调整老虎、兔子的字体大小和颜色，就可以在对应标签的位置设置样式 style，该样式也被称作“行内样式”

<h2 style="font-size: 30px; color: blueviolet;">老虎</h2>
<h2 style="font-size: 30px; color: blueviolet;">兔子</h2>

效果如下所示：

1.2内部样式

但如果动物的种类不断增加，如行内样式的修改方式会使得代码变得冗长繁琐，这个时候我们可以考虑内部样式，在使用这个h2标签之前就设置好style的格式。

把该代码加入到动物之家.html的任意位置当中，便可以去掉加在h2标签里style样式

<style>
        h2{
            font-size: 30px; 
            color: blueviolet;
        }
    </style>

注意：该样式代码与其修改样式标签的前后位置关系并不会影响页面效果的生成

1.3外部样式：

现在我的文档之中只有一个.html文档，如果在设计多个文档，文档之间的样式要求又都不一样的情况下，我们可以考虑外部样式，通过创建.css文档，并将.html和.css联立起来，提高代码的健壮性和可修改性。

从这里我们也引入了该文章索要讲解的重点——css

css的创建与格式

为了方便我们后续的代码拓展，我们在HTML文件夹中创建一个css文件夹用于专门存放.css文档，创建动物之家.css文档，并将样式修改信息存放到里头。

而其存储方式与之前在.html的存储方式有所不同

选择器{

属性1:值1;

属性2:值2;

属性3:值3;

}

如何与css连接

下一步就是将css与对应的.html相连接，这里我们用link。由上一篇标签文章可知，link标签在head标签中存储。href为资源路径。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
    <link rel="stylesheet" href="css/动物之家.css">
</head>

最低0.47元/天解锁文章