css 的编写方式 & 最佳实践

css 提供了3种方法,可以将 css 样式 应用到 元素上.

• 内联样式(inline style)
• 内部样式表(internal style sheet),文档样式表(docoument style sheet),内部样式表(embed style sheet)
• 外部样式表(external style sheet)

还有一种在css文件中引入其他css 文件的方法 @import

每一种方式都需要掌握.

内联样式 (inline style)

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

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

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

内部样式表(interal style sheet)

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

<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 文件

最佳实践

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

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

目录:

reset.css:

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

partA.css

.classA {
  color: royalblue;
}

partB.css

.classB {
  color: red;
}

index.css

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

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>

效果