CSS之基础知识01

本文最后更新于：2023年10月4日 下午

前端三剑客之 CSS

  • HTML：负责网页的架构
  • CSS：负责网页的样式，美化
  • JavaScript（JS）：负责网页的行为

样式申明

可以通过多种方式定义样式表。

行内样式

行间样式、内联样式、行嵌样式都是行内样式这个意思

1
2
3
<div style="color: green; margin-top: 30px;border: 1px solid red;width: 500px">
  晚生隆海
</div>

外部样式

使用 link 标签引入外部样式文件，需要注意以下几点。

  • link 标签放在 head 标签内部

  • 样式文件要以 .css 为扩展名

  • 一个页面往往需要引入多个样式文件

    属性 说明
    rel 定义当前文档与被链接文档之间的关系
    href 外部样式文件
    type 文档类型 
1
<link rel="stylesheet" href="lh.css" type="text/css" />

内部样式

在网页上创建嵌入的样式表，通常写在 <head></head> 里面使用<style></style>书写

1
2
3
4
5
6
7
8
9
10
11
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>晚生隆海</title>
  <style>
    p {
      color: green;
      border: solid 1px #ccc;
    }
  </style>
</head>

导入样式

使用 @import 可以在原样式规则中导入其他样式表，可以在外部样式、style标签中使用。

可以使用以下两种方式导入

1
@import "lh.css" @import url("lh.css");
1
2
3
4
5
6
7
8
9
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>晚生隆海</title>
  <style>
    <style>
      @import "lh.css";
  </style>
</head>

其它知识

空白

在样式规则中可以随意使用空白，空白只是看不见但同样占用空间，所以可以结合其他工具如 webpack 等将css 压缩为一行。

注释

注释是对定义样式规则的说明，便于后期维护理解

1
2
3
4
body {
  /* 这是注释的使用 */
  background: red;
}

错误

样式规则如果存在错误，解析器会选择忽略，并不会影响其他样式规则。

以下代码的longhai:red 是无效样式但不影响后面的 font-size:100px; 规则使用。

默认样式

有些标签默认含有内外边距，且不同浏览器大小也不一样。为了统一我们可以重置标签的 CSS 默认样式。

最简单的方式就是使用插件css-reset完成，你也可以在 vscode 等编辑器中定义代码片段。

CSS
#CSS
CSS之基础知识01
https://pythl.com/archives/fb7cdd7c.html
作者
晚生隆海
发布于
2018年4月21日
更新于
2023年10月4日
许可协议