引入css的四种方式

Doe

已于 2022-02-26 13:52:18 修改

阅读量3.5k

点赞数 1

分类专栏： # CSS3学习笔记文章标签： css

于 2022-02-26 12:21:20 首次发布

本文链接：https://blog.csdn.net/weixin_43613849/article/details/123148051

版权

CSS3学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、内嵌式

2、外联式

3、行内样式

4、import

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./外联.css">
  <title>Document</title>
</head>
<style>
  @import url(./外联css2.css);

  .innerCss {
    height: 100px;
    width: 100px;
    background-color: yellow;
    margin: 20px;
  }
</style>

<body>
  <div class="innerCss">
    这是用内嵌式的块
  </div>
  <div class="outerCss">
    这是用外联式的块
  </div>
  <div class="lineCss" style="height: 100px;width: 100px;background-color: greenyellow;margin: 20px;">
    这是用行内样式的块
  </div>
  <div class="importCss">
    这是用importd导入的块
  </div>
</body>

</html>

.outerCss{
  height: 100px;
  width: 100px;
  background-color: pink;
  margin: 20px;
}

.outerCss{
  height: 100px;
  width: 100px;
  background-color: burlywood;
  margin: 20px;
}

Doe

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
引入css的四种方式

1、内嵌式2、外联式3、行内样式4、import代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid..
复制链接

扫一扫