内联样式 (inline style)

内敛样式(inline style),也有人翻译成行内样式内联样式表存在于 HTML 元素的style属性之中的.

html 复制代码

   <div style="background-color: brown; color: white">haha</div>

css 样式之间用 ; 隔开,建议每条css 样式后面都加上分号 ;

内部样式表(interal style sheet)

将css 放在HTML 文件< head > 元素里的 < style > 元素之中

html 复制代码

<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" />
<title>Document</title>
<style>
  .one.two {
    color: red;
  }
</style>
</head>

外部样式表(external style sheet)

外部样式是将css 编写到一个独立的文件中,并通过 < link >元素引入进来.

使用外部样式表主要分为两个步骤第一步: 将css 样式在一个独立的css 文件中编写(后缀名为.css) 第二步: 通过 < link >元素引进来.

@import

可以在 style 元素或者 CSS 文件中使用 @import 导入其他的 css 文件

最佳实践

在日常开发中,这几种方式在不同的场景中都会使用到,比较创建的组合使用方式如下:

在项目中创建一个css 文件夹
在文件夹中创建index.css
编写诸如reset.css (重置css 属性的 css文件),业务css 文件等等
在index.css 文件中通过@import 方式引入第3步编写的css 文件
在主页面 html 中引入 index.css 文件

reset.css:

css 复制代码

body {
  margin: 0 0;
  padding: 0 0;
}
div {
  padding: 0px 0px;
  margin: 0px 0px;
}

partA.css

css 复制代码

.classA {
  color: royalblue;
}

partB.css

css 复制代码

.classB {
  color: red;
}

index.css

css 复制代码

@import url(./reset.css);
@import url(./partA.css);
@import url(./partB.css);
.container {
  background-color: aquamarine;
}

html:

html 复制代码

<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="container">
      <div class="classA">partA</div>
      <div class="classB">partB</div>
    </div>
  </body>
</html>

效果

css 的编写方式 & 最佳实践

内联样式 (inline style)

内部样式表(interal style sheet)

外部样式表(external style sheet)

@import

最佳实践