前端编程课程十一、：CSS 基础入门基本语法

本阶段核心目标：掌握CSS的核心运行逻辑、基础语法、3种引入方式，能让CSS成功作用于HTML元素，独立写出第一个可运行的CSS样式，理解"层叠样式表"的浅层含义，为后续选择器、布局学习打牢最底层基础。

学习核心方法：每学一个知识点，立刻手写3-5个小案例 （比如学了文字样式，就写一个标题+段落的样式；学了选择器，就用不同选择器给同一个元素加样式），拒绝"眼会手不会"。

学完之后掌握：CSS的基本语法、引入方式、注释，知道CSS如何作用于HTML，能写简单的样式。

CSS的核心作用：分离结构（HTML）和样式（CSS），理解"层叠"的初步含义（多个样式可作用于同一个元素）；

CSS基本语法：选择器 + 声明块（属性: 值;），必须记住属性值后加分号 、大括号包裹声明块这两个基础规则；
CSS的3种引入方式：

行内样式（style属性）：快速测试，不推荐开发使用；
内部样式（style标签）：小案例使用，适合单页面；
外部样式（link标签）：开发首选，实现HTML和CSS完全分离，重点掌握；

CSS注释：/* 注释内容 */，学会给代码加注释，提升可读性；
第一个实战：给HTML页面的标题、段落、链接添加简单样式（文字颜色、大小、对齐）。

整体学习节奏：按「知识点讲解+即时实操+课后小练习」推进，每个知识点配套1-2个小实操，全程手写代码，拒绝只看不动手，单知识点耗时控制在10-20分钟，每天学习结束完成1个综合小案例。

课程前置说明

已完成「学前知识+学前准备」：掌握HTML基础结构、常用标签、class/id属性，搭好VS Code+Chrome的开发环境，能创建并关联HTML和CSS文件；
本阶段所有实操均基于学前准备的CSS-Learn文件夹（index.html + style.css），无需新建文件，逐步修改即可；
核心要求：记住基础规则，能独立写出"选择器+样式"的完整代码，能排查"样式不生效"的3个基础问题（语法错误、路径错误、选择器未匹配）。

第1天：CSS核心认知 + 基础语法 + 2种核心引入方式

模块1：CSS是什么？核心作用&设计理念（10分钟，理解为主）

1.1 官方定义

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述HTML文档样式的标记语言，并非编程语言，无逻辑判断、循环等功能，仅负责"样式设置"。

1.2 核心作用（3个核心，记死）

分离结构（HTML） 和样式（CSS）：HTML只写页面"有什么"（标题、段落、图片），CSS只写"长什么样"（颜色、大小、位置），便于后期维护（改样式不用动HTML）；

统一样式，批量复用：给多个HTML元素设置相同样式，只需写一次CSS代码（比如所有标题都设为红色）；

层叠扩展：多个CSS样式可同时作用于一个元素，按规则叠加/覆盖（比如先设文字红色，再设文字加粗，最终文字"红色+加粗"）。

1.3 为什么要学CSS？

没有CSS的HTML页面是"纯文字骨架"，杂乱无章；有CSS的HTML页面能实现视觉美化、合理布局，达到日常浏览的网页效果（比如百度、淘宝的视觉样式）。

即时思考

观察身边的网页（比如掘金），区分"哪些是HTML结构"（标题、文章列表、按钮），"哪些是CSS样式"（文字颜色、按钮大小、布局排列）。

模块2：CSS 基本语法（20分钟，重点记忆+实操，CSS的"造句规则"）

2.1 核心语法结构（唯一规则，必须记死，CSS所有代码都遵循此规则）

选择器 + 声明块，整体结构如下：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS /* 选择器：告诉浏览器"给谁加样式"（匹配HTML元素） */ 选择器 { /* 声明块：包裹在大括号{}中，告诉浏览器"加什么样式" */ 属性1: 值1; /* 声明：属性和值用冒号:分隔，结尾必须加分号;（核心易错点） */ 属性2: 值2; /* 多个声明之间换行/空格均可，推荐换行，代码更整洁 */ } |

2.2 语法三要素详解（结合实操理解，无抽象概念）

|-----|----------------|-------------------------|------------------------------------|
| 要素 | 作用 | 示例 | 注意事项 |
| 选择器 | 匹配要设置样式的HTML元素 | div、.test、#box | 必须正确匹配，否则样式不生效 |
| 属性 | 要设置的样式类型 | color（颜色）、font-size（字号） | 为CSS预定义关键字，不能自定义 |
| 值 | 样式的具体设置 | red（红色）、24px（24像素） | 需匹配属性的取值规则（比如color属性可设red，不可设24px） |

2.3 核心语法规则（3个必守规则，踩坑重灾区）

声明块必须用大括号 {} 包裹，缺一不可；
每个声明的属性和值之间必须加冒号 :（英文半角），不能用中文冒号；
每个声明的结尾必须加分号 ; （英文半角），最后一个声明可省略，但推荐必加（避免后续添加声明时忘记加分号导致语法错误）。

2.4 即时实操：写第一个CSS基础语法代码（直接在style.css中编写）

步骤1：在index.html的body中添加一个基础标签（比如h1）：

|-----------------------------------------------------------------------|
| HTML  <body> <h1>我的第一个CSS样式</h1> </body> |

步骤2：在style.css中编写CSS代码，给h1标签设置样式：

|--------------------------------------------------------------------------------------------------------------|
| CSS /* style.css - 元素选择器：匹配所有h1标签 */ h1 { color: red; /* 文字颜色：红色 */ font-size: 30px; /* 文字大小：30像素 */ } |

步骤3：右键index.html → Open in Default Browser，打开浏览器查看效果：h1标题变为红色、30px大小，说明语法正确、样式生效。

2.5 基础排错：样式不生效？先查这3点

查语法：是否漏写{}、:、;，是否用了中文符号；
查选择器：选择器是否和HTML标签名一致（比如写的是h2，HTML里是h1）；
查路径：确认HTML中已通过<link>标签正确引入style.css（学前准备的代码未修改则无需检查）。

模块3：CSS 注释（10分钟，必会，提升代码可读性）

3.1 注释作用

对CSS代码进行说明，方便自己/他人理解代码含义（比如"导航栏标题样式"），注释内容不会被浏览器解析，不影响页面样式。

3.2 CSS注释语法（唯一语法，和HTML注释区分开）

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS /* 单行注释：注释内容包裹在/* 和 */ 之间 */ h1 { color: red; /* 单行注释：设置文字为红色（行内注释，推荐） */ } /* 多行注释：适合注释大段代码/模块说明比如：页面基础样式 - 所有标题的通用样式支持换行，同样包裹在/* 和 */ 之间 */ h2 { font-size: 24px; } |

3.3 注释规范（开发必备，早期养成习惯）

模块开头加多行注释：说明该模块的作用（比如"首页头部样式"）；
复杂样式加行内注释：说明该样式的目的（比如"margin-top: 20px; 拉开和上一个元素的间距"）；
注释不冗余：简单样式（比如color: red;）无需注释，避免代码杂乱。

即时实操：给之前写的h1样式添加注释（style.css中修改）

|--------------------------------------------------------------------------------------------------------|
| CSS /* 页面主标题样式 - 第一个CSS测试样式 */ h1 { color: red; /* 文字颜色：红色 */ font-size: 30px; /* 文字字号：30像素 */ } |

模块4：CSS 3种引入方式（30分钟，重点掌握2种，开发核心）

CSS要作用于HTML，必须通过"引入方式"建立关联，共有3种引入方式，按开发使用优先级排序：外部样式（推荐）> 内部样式 > 行内样式，各有适用场景，需全部掌握并能区分差异。

4.1 引入方式1：外部样式表（link标签引入，开发首选，重点中的重点）

4.1.1 核心原理

将所有CSS代码写在独立的.css文件 中（比如style.css），在HTML的<head>标签中通过<link>标签引入该文件，实现HTML和CSS的完全分离，是企业开发、项目开发的唯一选择。

4.1.2 语法格式（记死，学前准备已用，重新强化）

|--------------------------------------------------------------------------------------------------------|
| HTML  <link rel="stylesheet" href="CSS文件路径" type="text/css"> |

4.1.3 属性说明

rel="stylesheet"：声明当前引入的是样式表文件，不可修改；

href：核心属性，设置CSS文件的路径（相对路径/绝对路径），路径错误则样式完全不生效；

type="text/css"：声明文件类型为CSS，HTML5中可省略（浏览器会自动识别），推荐保留，兼容性更好。

4.1.4 适用场景

所有正式开发、项目开发（单页面/多页面）；

多页面复用样式：多个HTML文件可引入同一个CSS文件，实现样式统一（比如网站的所有页面的导航栏样式都写在一个CSS文件中，所有HTML页面都引入它）。

4.1.5 实操验证

直接使用学前准备的index.html，<head>中已存在<link rel="stylesheet" href="./style.css">，修改style.css中的h1样式（比如把color改为blue），刷新浏览器，标题颜色变为蓝色，验证外部样式生效。

4.2 引入方式2：内部样式表（style标签引入，小案例/临时测试用）

4.2.1 核心原理

不创建独立的CSS文件，直接在HTML的<head>标签中添加<style>标签，所有CSS代码写在<style>标签内部，实现HTML和CSS的部分分离（仅在当前HTML文件中生效）。

4.2.2 语法格式

4.2.3 关键注意事项

<style>标签必须写在 <head> 标签内（规范），写在body内虽可能生效，但不符合W3C标准，禁止使用；

style标签内的CSS代码语法和外部样式表完全一致（选择器+声明块），无需修改；

内部样式表的样式仅对当前HTML文件生效，其他HTML文件无法复用。

4.2.4 适用场景

快速制作单页面小案例（比如本阶段的基础实操）；

临时给某个HTML文件添加专属样式（不影响其他页面）；

开发初期的快速测试（无需切换CSS文件，直接在HTML中写样式）。

即时实操：在index.html中添加内部样式（覆盖之前的外部样式，观察效果）

保留<head>中的link标签（不删除）；
在link标签下方添加style标签，给h1设置绿色；
刷新浏览器，h1标题变为绿色，说明内部样式优先级高于外部样式（浅层认知，后续选择器优先级会详细讲解）。

4.3 引入方式3：行内样式（style属性，仅临时测试用，不推荐开发）

4.3.1 核心原理

不使用CSS文件或style标签，直接在单个HTML标签 上添加style属性，将CSS样式写在style属性的值中，实现"给单个元素单独设置样式"，完全混合HTML和CSS，破坏分离原则。

4.3.2 语法格式

|-------------------------------------------------------------------------------------------------|
| HTML  <标签名 style="属性1: 值1; 属性2: 值2; ...">内容</标签名> |

4.3.3 关键注意事项

style属性是HTML属性，写在HTML标签内部，不是CSS标签；

style属性的值是多个CSS声明的集合，无需写选择器和大括号，直接写"属性:值;"，多个声明之间用分号分隔；

行内样式仅对当前标签生效，子标签不会继承（比如div设置style，内部的span不会生效）。

4.3.4 适用场景

紧急临时测试（比如快速验证某个样式是否生效，改完即删）；

个别元素的极端专属样式（全项目仅这一个元素需要，且后续不会修改）；

开发中禁止大量使用（会导致HTML代码杂乱，样式无法复用，后期维护成本极高）。

即时实操：给h1标签添加行内样式（覆盖内部样式，观察效果）

|-------------------------------------------------------------------------------------------------------------|
| HTML  <h1 style="color: purple; font-size: 35px;">我的第一个CSS样式</h1> |

刷新浏览器，h1标题变为紫色、35px，说明行内样式优先级高于内部样式（浅层认知，后续重点讲解优先级规则）。

4.4 3种引入方式对比（表格总结，记死适用场景）

|-------|----------------|-----------------|------------------|-----------------|
| 引入方式 | 语法形式 | 优点 | 缺点 | 适用场景 |
| 外部样式表 | link标签引入.css文件 | 完全分离、多页面复用、易维护 | 需创建独立文件，略繁琐 | 企业开发、项目开发、多页面应用 |
| 内部样式表 | head内的style标签 | 单页面复用、无需切换文件 | 仅单页面生效，无法跨页面复用 | 单页面小案例、临时测试 |
| 行内样式 | HTML标签的style属性 | 单个元素快速设置、无需写选择器 | 混合结构和样式、无法复用、维护难 | 紧急临时测试、个别元素专属样式 |

4.5 实操要求

将index.html中的内部样式（style标签）和行内样式（style属性）全部删除 ，恢复到仅用外部样式表（link引入style.css） 的状态，后续所有学习均以外部样式表为主（符合开发规范）。

模块5：第1天综合小案例（20分钟，巩固当天所有知识点）

案例要求

基于index.html + style.css，用外部样式表实现以下效果，严格遵循CSS基础语法，添加合理注释：

在body中添加3个元素：h1（主标题）、p（段落）、a（链接）；
给h1设置：文字蓝色、字号32px；
给p设置：文字黑色、字号18px；
给a设置：文字红色、字号16px；
所有CSS代码添加模块注释和行内注释。

案例参考代码

验证标准

刷新浏览器，能看到对应元素的样式全部生效，代码无语法错误，注释规范，仅使用外部样式表。

第2天：CSS 层叠初步认知 + 基础样式属性入门 + 样式生效排查

模块1：CSS "层叠"的浅层认知（20分钟，理解核心，为后续优先级打基础）

1.1 "层叠"的核心含义（大白话解释，无抽象概念）

"层叠"是CSS的核心特性，简单说就是：多个CSS样式规则可以同时作用于同一个HTML元素，浏览器会按一定规则将这些样式"叠加"或"覆盖"，最终呈现一个综合效果。

1.2 层叠的2种表现形式（结合实操理解，本阶段仅浅层掌握）

形式1：样式叠加（多个样式不冲突，共同生效）

同一个元素设置多个不冲突的样式，浏览器会将所有样式叠加，最终元素拥有所有样式效果。

实操示例：给h1标签同时设置color（红色）、font-size（30px）、font-weight（加粗），效果为"红色+30px+加粗"。

|---------------------------------------------------------------------------------------------|
| CSS h1 { color: red; /* 颜色 */ font-size: 30px; /* 字号 */ font-weight: bold; /* 加粗 */ } |

形式2：样式覆盖（多个样式冲突，按规则保留一个）

同一个元素设置多个冲突的样式（比如同时设置color: red和color: blue），浏览器会按"优先级规则"保留其中一个，另一个被覆盖。

实操示例：给h1标签同时设置color: red和color: blue，最终显示蓝色（后写的样式覆盖先写的样式，本阶段核心规则）。

|---------------------------------------------------------------------|
| CSS h1 { color: red; /* 被覆盖，不生效 */ color: blue; /* 生效，最终颜色 */ } |

1.3 本阶段必记的2个层叠规则（简单规则，后续会补充完整优先级）

同一种引入方式 ：CSS代码中后写的样式覆盖先写的样式（冲突时），不冲突时叠加；
不同引入方式：优先级从高到低为「行内样式 > 内部样式 > 外部样式」（冲突时），不冲突时叠加。

即时实操：验证层叠规则

在style.css中给p标签先设置color: gray，再设置color: #333，观察最终颜色；
给p标签添加行内样式style="color: orange"，观察最终颜色（行内覆盖外部）；
删除行内样式，恢复外部样式，验证叠加规则（同时设置color和font-size，均生效）。

模块2：CSS 基础样式属性入门（30分钟，掌握5个高频属性，会用即可）

本阶段无需记忆所有样式属性，只需掌握5个最基础、最高频的样式属性，能实现简单的文字样式设置，后续会按模块系统讲解所有属性。

2.1 核心说明

所有样式属性均写在声明块中，遵循"属性: 值;"的规则；

属性值需匹配属性的取值规范，比如字号必须加单位（px为主），颜色可设英文单词（red/blue）或十六进制（#ff0000/#f00）；

以下属性均适用于所有文字类元素（h1-h6、p、a、span等），直接使用即可。

2.2 5个高频基础样式属性（逐个讲解+实操）

|-----------------|----------|-----------------------------------------------|----------------------------|
| 属性名 | 作用 | 常用取值 | 示例 |
| color | 设置文字颜色 | 英文单词/十六进制/#RGB | color: red; / color: #f00; |
| font-size | 设置文字字号 | 数字+px（像素，主流） | font-size: 20px; |
| font-weight | 设置文字粗细 | bold（加粗）/ normal（正常）/ 数字（400=正常，700=加粗） | font-weight: bold; |
| text-align | 设置文字水平对齐 | center（居中）/ left（左对齐，默认）/ right（右对齐） | text-align: center; |
| text-decoration | 设置文字装饰线 | none（无装饰线）/ underline（下划线）/ line-through（删除线） | text-decoration: none; |

2.3 关键注意事项（踩坑重灾区）

font-size必须加单位：CSS中除了"0"，所有数值型属性值都必须加单位，比如font-size: 24（错误，无单位）、font-size: 24px（正确）；
text-decoration的核心用法：a标签（链接）默认有下划线（text-decoration: underline），开发中常设置为none去掉下划线；
text-align的生效范围 ：仅对块级元素生效（h1-h6、p、div等），行内元素（span、a等）需设置父元素的text-align实现对齐。

即时实操：给index.html的所有元素设置综合样式

效果验证

刷新浏览器，主标题居中、红色加粗，段落深灰色，链接橙色无下划线，实现简单的视觉美化。

模块3：CSS 样式不生效的基础排查方法（20分钟，核心能力，必须掌握）

学习CSS初期，最常见的问题是"写了代码但样式不生效"，本阶段掌握5个基础排查方法，能解决90%的入门级样式不生效问题，后续会补充高级排查方法。

3.1 排查步骤（按顺序排查，从简单到复杂，记死）

步骤1：检查CSS语法错误（最常见）

漏写大括号{}、冒号:、分号;；

使用中文符号 （比如：；{}），CSS仅支持英文半角符号；

选择器、属性名拼写错误（比如把color写成coler，font-size写成fontsize）。

步骤2：检查选择器是否匹配HTML元素

选择器名和HTML标签名/类名/id名拼写不一致（比如选择器是h2，HTML是h1；选择器是.test，HTML是class="test1"）；

选择器类型错误（比如用id选择器#test，但HTML是class="test"）。

步骤3：检查CSS文件引入路径（外部样式表专属）

href属性的路径错误（比如CSS文件在css文件夹中，路径写成./style.css，正确应为./css/style.css）；

CSS文件名拼写错误（比如引入的是style.css，但实际文件是styles.css）。

步骤4：检查样式是否被覆盖（层叠规则）

同一种引入方式中，是否后写的样式覆盖了先写的样式；

是否有行内样式/内部样式覆盖了外部样式（可临时删除其他样式，单独测试）。

步骤5：检查浏览器缓存（易忽略）

浏览器会缓存CSS文件，修改后可能未刷新，导致样式不生效；

解决方法：Chrome浏览器中按Ctrl+F5（强制刷新），或右键检查→Network→勾选Disable Cache（禁用缓存）。

3.2 浏览器开发者工具基础排查（核心工具，提前入门）

Chrome的「检查」工具是CSS调试的神器，本阶段掌握2个核心操作：

打开开发者工具：右键页面→检查，或按F12/ Ctrl+Shift+I；
核心面板：Elements（元素面板）

左侧：HTML结构，点击某个元素（比如h1），可查看该元素的所有HTML属性；
右侧：Styles （样式面板），显示该元素匹配的所有CSS样式，生效的样式为黑色，被覆盖的样式会有删除线，语法错误的样式会有红色感叹号。

即时实操：故意制造1个样式不生效问题，用排查方法解决

比如：将style.css中的color写成coler，打开开发者工具，查看Styles面板的红色感叹号，修正后刷新，验证样式生效。

模块4：第2天综合小案例（30分钟，融合本阶段所有知识点）

案例名称

简单个人简介页面（纯HTML+CSS外部样式，无复杂布局）

案例要求

基于index.html + style.css，仅使用外部样式表，严格遵循CSS基础语法；
HTML结构：包含h1（个人简介）、h2（基本信息）、p（2行个人信息：姓名、年龄）、a（我的博客链接），所有元素按顺序排列；
CSS样式要求：

h1：文字蓝色、36px、加粗、水平居中；

h2：文字#666、24px、正常粗细；

p：文字#333、18px、行高24px；

a：文字红色、16px、去掉下划线，鼠标悬浮时显示下划线（提前用a:hover，感知伪类）；

所有CSS代码添加模块注释 ，关键样式添加行内注释；
验证层叠规则：给h2先设置color: gray，再设置color: #666，观察最终效果；
用开发者工具检查所有样式是否生效，无被覆盖、无语法错误。

案例参考代码

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS /* style.css - 简单个人简介页面样式：所有元素基础样式 */ /* 主标题：个人简介 */ h1 { color: blue; /* 文字颜色：蓝色 */ font-size: 36px; /* 文字字号：36像素 */ font-weight: bold; /* 文字粗细：加粗 */ text-align: center; /* 水平对齐：居中 */ } /* 二级标题：基本信息（验证层叠规则：后写覆盖先写） */ h2 { color: gray; /* 被覆盖，不生效 */ color: #666; /* 生效，最终颜色 */ font-size: 24px; /* 文字字号：24像素 */ font-weight: normal; /* 文字粗细：正常 */ } /* 段落：个人信息 */ p { color: #333; /* 文字颜色：深灰色 */ font-size: 18px; /* 文字字号：18像素 */ line-height: 24px; /* 行高：24像素，拉开行间距 */ } /* 链接：我的博客 */ a { color: red; /* 文字颜色：红色 */ font-size: 16px; /* 文字字号：16像素 */ text-decoration: none; /* 去掉默认下划线 */ } /* 鼠标悬浮在链接上：显示下划线（简单伪类，提前感知） */ a:hover { text-decoration: underline; /* 显示下划线 */ } |

验证标准

浏览器中所有样式均生效，链接鼠标悬浮时显示下划线；
开发者工具中无红色感叹号（无语法错误），h2的color: gray有删除线（被覆盖）；
代码注释规范，仅使用外部样式表，无行内/内部样式；
能独立排查任意样式不生效的问题（比如故意修改选择器、拼写属性名，能快速找到并解决）。

本阶段学习目标验收（必做，确保掌握所有核心内容）

基础能力验收（能独立完成以下所有操作）

能准确说出CSS的核心作用和3个引入方式的适用场景；
能独立写出CSS的基础语法（选择器+声明块），无语法错误；
能区分"样式叠加"和"样式覆盖"，掌握本阶段的2个层叠规则；
能熟练使用5个基础样式属性（color、font-size、font-weight、text-align、text-decoration）；
能通过"5个排查步骤+开发者工具"解决样式不生效的基础问题。

代码能力验收（能独立完成"简单个人简介页面"案例）

无需参考代码，能从零开始创建HTML文件、关联CSS文件，写出符合要求的HTML结构和CSS样式，代码规范、注释完整，样式全部生效。

本阶段课后拓展（可选，耗时10-20分钟，为下一阶段铺垫）

查阅MDN文档，了解CSS颜色的3种取值方式（英文单词、十六进制、RGB），尝试用十六进制设置颜色（比如#ff6600）；
了解CSS字号的其他单位（em），尝试将px改为em（1em=16px，比如2em=32px）；
尝试给div标签设置样式，感知"块级元素"的样式特点，为下一阶段"选择器+盒子模型"铺垫。

本阶段核心知识点总结（3句话记死）

CSS的核心语法是「选择器+声明块」，必须遵循"{}包裹、:分隔、;结尾"的规则，仅支持英文半角符号；
开发中优先使用外部样式表，实现HTML和CSS完全分离，行内样式仅用于临时测试；
CSS层叠的核心是"叠加不冲突样式，覆盖冲突样式"，本阶段记住「后写覆盖先写、行内>内部>外部」的简单规则。

作业：电脑屏幕居中绿色显示 "CSS 你好！"

第一步：新建一个文件夹（命名为：CSS-Learn，英文命名，避免中文路径问题）；

在文件夹内新建两个文件：index.html（HTML结构）、style.css（CSS样式）；

打开这个文件夹，

第二步：用记事本打开index.html文件加入以下代码，以创建基础HTML结构；

<!DOCTYPE html>

<head>

<title>CSS测试</title>

</head>

<body>

<div class="test">CSS学习开始啦！</div>

</body>

</html>

第三步：用记事本，打开style.css，加入以下代码，以创建CSS格式

/* style.css */

/* 给class为test的div加样式 */

.test {

color: red; /* 文字红色 */

font-size: 24px; /* 文字大小24像素 */

text-align: center; /* 文字居中 */

margin-top: 50px; /* 上边距50像素 */

}

第四步：双击 index.html 运行，请将正确结果打在评论区。

前端编程 课程十一、：CSS 基础入门 基本语法

前端编程课程十一、：CSS 基础入门基本语法