CSS|导入方式

最新推荐文章于 2023-10-26 17:40:43 发布

Alan_Lowe

最新推荐文章于 2023-10-26 17:40:43 发布

阅读量125

点赞数 1

分类专栏： # CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_45985728/article/details/119081077

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|导入方式

1.行内样式

之前html的学习当中已经用到过style了，就是在标签元素中，编写一个style属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性-->
<h1 style="color: red;text-align: center">标题1</h1>

</body>
</html>

在这里插入图片描述

2.内部样式

内部样式就是在head中添加一个style标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
<!--内部样式-->
  <style>
    h2{
      color: blue;
    }
  </style>
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性-->
<h1 style="color: red;text-align: center">标题1</h1>

<h2>标题2</h2>

</body>
</html>

将h2改成了蓝色：

在这里插入图片描述

3.外部样式

使用link标签引用外部的css文件：

css文件：

h3{
    background-color: aqua;
}

将h3背景改为aqua，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
<!--内部样式-->
  <style>
    h2{
      color: blue;
    }
  </style>
<!--外部样式-->
    <link rel="stylesheet" href="Style-demo02.css">
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性-->
<h1 style="color: red;text-align: center">标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

</body>
</html>