html的基本了解2

最新推荐文章于 2024-07-08 22:44:43 发布

KBkongbaiKB

最新推荐文章于 2024-07-08 22:44:43 发布

阅读量898

点赞数 22

文章标签： html css 前端

本文链接：https://blog.csdn.net/KBkongbaiKB/article/details/136144455

版权

根据上章内容，我们深刻的认识到了标签的重要性，没有认识到其重要性的同学，请跳转到下面的内容进行学习。

html的基本了解1-CSDN博客https://blog.csdn.net/KBkongbaiKB/article/details/136144360

在上一章中，我们虽然用代码完成了自己所想要的图像，但是，我们也很容易发现代码存在的问题：

</div>

</body>

在这一串代码中，里面的内容太乱了，到后期的学习中这可能会严重影响我们对内容增删改查的时间，因此，我们可以引入下面这一概念：内部样式

什么是内部样式呢？很简单，就是将所有标签的属性用<style></style>包起来集中放到<head></head>里面，其形式如下：

<head>

<style>

选择器 {

样式属性1 ：样式值1;

样式属性2 ：样式值2;

...;...;

}

.box {

color: blue;

font-size: 30px;

}

</style>

</head>

显而易见，在上面内容中，.box对应选择器，color: blue对应样式属性1 ：样式值1。

那么什么是选择器呢？在了解之前，我们要知道一个定义，如下：

其中class我们可以了解为<div></div>这个标签的名字，我们可以通过class来找到对应的标签，借以来将属性传达给该标签。

了解了上面的知识，我们就可以对刚开始我们所用的代码进行修改了：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

在上面的代码中，我们很快可以找到页面的具体内容：

<body>

</body>

我们先将标签的属性提取出来，“color:red；color:blue”，然后对标签进行命名：

<body>

</body>

当然了，命名的内容可以随便取，甚至你也可以明明为"abcd"，只要自己可以找到就行。那么就会有人问了，“哎呀那我命名成中文可不可以啊？”，都是英文的代码你偏偏要弄个中文命名，既然这么闲的话你可以自己尝试尝试，反正我没弄过。

好了，完成了上面的操作，我们就可以将原先的代码改为一下的形式了：

<head>

<title>Document</title>

<style>

.wcy_1 {

color: red

}

.wcy_2 {

color: blue

}

</style>

</head>

<body>

</body>

不难理解，我们可以根据wcy_1这个名字来找到内容为“大家”的div，然后将 color: red的属性赋值给该div标签，具体效果是完全没有变化的。那么就会有人问了，“哎呀.wcy_2里面的“.”是什么意思呀？”，这个你目前就不需要了解了，你这样知道.wcy_2叫选择器，然后每个选择器都是这个写法就行。

为了让大家更清楚的看到内部样式对代码的“清洁”作用，我将上一章最后那个很乱的代码进行了修改，修改代码如下：

<!DOCTYPE html>

<head>

<title>我的第一个网页</title>

<style>

.body {

background: black;

height: 100vh;

/*弹性盒子*/

display: flex;

/*调整内容水平居中*/

justify-content: center;

/*调整内容垂直居中*/

align-items: center;

}

.wcy {

width: 300px;

height: 400px;

background: linear-gradient(30deg, red, blue);

border-radius: 5px;

position: relative;

/*绝对位置*/

}

.child {

width: 120%;

height: 120%;

background: red;

position: absolute;

/*相对位置*/

z-index: -1;

top: -10%;

left: -10%;

filter: blur(90px);

}

</style>

</head>

</div>

</body>

</html>

当然了，在这里还有对代码更好的处理方式，名叫外部样式

它很好的将网页中的内容和属性分开了，操作方法就是建立一个 .css的文件，然后在.html的文件里面引用 .css文件。怎么引用呢？代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

这个时候就会有人问了，“哎呀在哪里啊我找不到啊”，因此我为您单独写了出来，<link rel="stylesheet" href="index.css">，其中该代码要写在<head></head>中，且href=""里面的内容是我们所创建的 .css文件的名字。具体内容我将用截图的方式来为大家展示：

KBkongbaiKB

关注

22
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
html的基本了解2

这个时候就会有人问了，“哎呀在哪里啊我找不到啊”，因此我为您单独写了出来，<link rel="stylesheet" href="index.css">，其中该代码要写在<head></head>中，且href=""里面的内容是我们所创建的 .css文件的名字。其中class我们可以了解为<div></div>这个标签的名字，我们可以通过class来找到对应的标签，借以来将属性传达给该标签。根据上章内容，我们深刻的认识到了标签的重要性，没有认识到其重要性的同学，请跳转到下面的内容进行学习。
复制链接

扫一扫