知识篇 -- CSS基础语法

Ray Shine 2023/7/5 CSS

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

# 构成

CSS 由两个主要的部分构成：选择器，以及一条或多条声明。语法构成

# 写法

# 一、内联式不推荐

行内式：在 HTML 标签的 style 属性中书写 css 样式

<div style="width: 360px;height: 100px;background-color: red;"></div>

缺点

必须写在标签，没有脱离HTML标签
让标签结构繁重，不利于HTML结构的解读
一个CSS代码，只能给一个标签使用，如有多个标签使用相同样式，需要重写，增加代码量

# 二、内嵌式

在 HTML 文件，<head> 标签内部的 <style> 标签中。<style> 标签书写在 < title> 标签后面，所有 css 代码书写在 <style> 标签内部

<style type="text/css">
 div {
 width: 360px;
 height: 100px;
 background-color: red;
 }
 </style>

优点

实现结构与样式初步分离
多个标签可用同一段代码设置相同样式

缺点

结构与样式没有完全分离，依旧是写在HTML文件里面
在HTML中CSS代码过多，文件不美观

# 三、外联式（外链式 CSS）

在一个单独的扩展名为 .css 的文件中

/* 直接书写css规则 */
div {
 width: 360px;
 height: 100px;
 background-color: red;
}

外联式引用
- 外联式样式表必须引入到 HTML 文件中，才能正常进行加载
- 引入方式：在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入

<link rel="stylesheet" href="01.css" type="text/css">

优点

HTML 和 css 完全分离
多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量
一个 css 变化，多个 HTML 页面同时变化，减少工作量
一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层

# 四、导入式

利用 @import url(路径) 语句在内嵌式样式表 <style> 标签内部，或者在外联式样式表的内部，导入其他的外部的 .css 文件

 <style>
@import url(example.css);
h1 {
color: red;
}
</style>

缺点

效果与外联式样式表基本相同
由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，体验不好
实际工作中，较少使用导入式，推荐使用 外联式样式表

# 规则

写法，以内嵌式为例：
- 所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内
- css 在给某个标签设置样式前，必须使用选择器先选中标签
- css 样式的属性，属性名和属性值的键值对写法为 k:v;
- 给每个选择器添加的样式属性都必须写在一对大括号 {} 之内
- 给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来
```
<style type="text/css">
div {
width: 360px;
height: 100px;
background-color: red;
}
</style>
```
注意
1. 分号必要性：每条属性后面的分号必须写，如果不写，可能会导致后面所有的代码加载错误。
2. css 中所有属性与属性之间对空格、换行、缩进不敏感。
注释
```
/* 中间部分为注释内容 */
```
格式
1. 展开格式，开发过程使用，代码可读性强，便于纠错
```
div {
  width: 360px;
  height: 100px;
  background-color: red;
}
```
1. 紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输
```
div {width: 360px; height: 100px; background-color: red;}
```
大小写

CSS的英文可以大写，也可以小写，建议全部小写！
空格
- 选择器与大括号 {} 之间保留一个空格
- 冒号后面，属性值前面，保留一个空格
```
div {
  width: 360px;
  height: 100px;
  background-color: red;
}
```

← 简介盒模型 →