CSS基础语法与样式引入
1. CSS核心语法规则
CSS样式由选择器 和声明块两部分构成，核心语法格式：
css
选择器 {
属性1: 属性值1;
属性2: 属性值2;
/* 多条声明用英文分号分隔，最后一条声明分号可省略 */
}- 选择器：用于精准选中需要设置样式的HTML元素；
- 声明块：包裹在
{}内，由一条或多条「属性: 属性值」的键值对组成，属性与属性值之间用英文冒号分隔。
例如：
css
h1 {
font-size:20px;
color: #00F;
}
所有的h1标签的内容，都遵循以上样式2. 语法规范与注意事项
-
大小写规则：选择器严格区分大小写，属性和属性值不区分大小写，开发中统一使用小写；
-
引号规则：属性值由多个单词组成且包含空格时，必须为属性值添加英文双引号，例：
p{font-family:"Microsoft YaHei";}； -
单位规则：属性值的数字和单位之间不允许出现空格，例：
font-size:20px;为正确写法，20 px会导致浏览器解析失败； -
CSS注释：使用
/* 注释内容 */格式，单行/多行注释通用，注释内容不会渲染到页面中，常用于代码标注和样式临时禁用。cssdiv{ color:#B91720; width:800px; /* height:300px;background:red; */ /* 上述注释内容不会生效 */ }
3. 四种样式引入方式
| 引入方式 | 语法格式 | 特点与适用场景 |
|---|---|---|
| 内联样式（行内样式） | <标签名 style="属性:值;属性:值;"></标签名> |
仅对当前标签生效，优先级最高；无法复用样式，破坏结构与表现分离，不推荐大量使用 |
| 内部样式表（内嵌式） | <head>内写<style type="text/css">样式代码</style> |
仅对当前HTML页面生效，代码结构清晰；适合单页面样式开发、教学演示 |
| 引入外部样式文件 | <head>内写<link rel="stylesheet" type="text/css" href="css文件路径"> |
彻底实现结构与样式分离，一个CSS文件可被多个HTML页面复用；企业级开发首选 |
| 导入外部样式文件 | <style>内写@import url(css文件路径); |
与link功能类似，必须写在style标签内其他样式之前；加载性能弱于link，开发中少用 |