html5中的小方法（在css文件中创建一个新的css文件）

最新推荐文章于 2023-04-12 20:23:22 发布

菜鸡小陈

最新推荐文章于 2023-04-12 20:23:22 发布

阅读量827

点赞数 3

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_46380990/article/details/105639876

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

当我们需要给一个元素添加style时，普通方法是直接在元素框里写出样式，这样的话，写出的代码是不是有点不美观呢？如下所示：

<body>
  <div style="width:15.625rem;height: 15.625rem;background-color: black;">
   需要给div设置边框背景颜色
  </div>
 </body>

在这里插入图片描述
所以，就有了进阶版：在<head> </head>里面添加style。如下所示：我们对同一<div></div>里设置同一边框背景颜色：

<head>
  <meta charset="utf-8" />
  <title>div</title>
  <style type="text/css">
   .div{
    width: 15.625rem;
    height: 15.625rem;
    background-color: black;
   }
  </style>
 </head>
 <body>
  <div class="div">
   需要给div设置边框p背景颜色
  </div>
 </body>

在这里插入图片描述
这样写出的代码，相比于上一个显得更加美观，但是显得在页面中不够简便，所以我们又有了下一个表现方式（在css文件中创建另一个***.css文件）：

.div{
 width: 15.625rem;
 height: 15.625rem;
 background-color: black;
}

在这里插入图片描述

这样写出来的代码既美观又简洁。当代码错误时，也可以快速找到错误，以免浪费时间。
小白创作不易，喜欢就点个赞吧！！！

菜鸡小陈

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5中的小方法（在css文件中创建一个新的css文件）

当我们需要给一个元素添加样式时，普通方法是直接在元素框里写出样式，这样的话，写出的代码是不是有点不美观呢？如下所示：<body> <div style="width:15.625rem;height: 15.625rem;background-color: black;"> 需要给div设置边框背景颜色 </div> </body>...
复制链接

扫一扫