css样式表的三种方式

数据库 23 3213

1、行内样式表

行内样式就是使用style属性直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="width: 100px; height: 100px">style属性的设置</div>
</body>
</html>

2、内部样式表

内部样式表是把css样式写在标签中，并用style标签去声明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px; height: 100px
    }
  </style>
</head>
<body>
  <div class="box">类标签设置</div>
</body>
</html>

3、外部样式表

如果 CSS 样式被放置在网页文档外部的文件中，则称为外部样式表，一个 CSS 样式表文档就表示一个外部样式表。

<!-- link引入样式文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link type="text/css" rel="styleSheet"  href="/css.css" />
</head>
<body>
  <div class="box">link引入外部样式文件</div>
</body>
</html>

<!-- import 导入样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    @import url("/css.css");
  </style>
</head>
<body>
  <div class="box">import导入外部样式文件</div>
</body>
</html>

原文出处：