diff --git a/blog/front-edn-learn/css-font.md b/blog/front-edn-learn/css-font.md
new file mode 100644
index 0000000000000000000000000000000000000000..d4fe120cd228fee9910a98774c864b0193b537cb
--- /dev/null
+++ b/blog/front-edn-learn/css-font.md
@@ -0,0 +1,229 @@
+# CSS 字体和文本样式
+
+## 字体大小
+
+```css
+/* 浏览器默认字体大小 16px */
+font-size: 16px;
+```
+
+```html
+<div style="font-size: 16px;">Hello World!</div>
+<div style="font-size: 26px;">Hello World!</div>
+```
+
+<output>
+<div style="font-size: 16px;">Hello World!</div>
+<div style="font-size: 26px;">Hello World!</div>
+</output>
+
+## 字体粗细
+
+```css
+font-weight: 400;
+```
+
+| 属性值 | 数值 | 效果 |
+| ------ | ---- | ---- |
+| normal | 400  | 正常 |
+| bold   | 700  | 加粗 |
+
+```html
+<div style="font-weight: normal">Hello World!</div>
+<div style="font-weight: bold">Hello World!</div>
+```
+
+<output>
+<div style="font-weight: normal">Hello World!</div>
+<div style="font-weight: bold">Hello World!</div>
+</output>
+
+## 字体样式
+
+```css
+font-style: normal;
+```
+
+| 属性值 | 效果 |
+| ------ | ---- |
+| normal | 正常 |
+| italic | 倾斜 |
+
+```html
+<div style="font-style: normal;">Hello World!</div>
+<div style="font-style: italic;">Hello World!</div>
+```
+
+<output>
+<div style="font-style: normal;">Hello World!</div>
+<div style="font-style: italic;">Hello World!</div>
+</output>
+
+## 字体系列
+
+```css
+/* 优先使用：微软雅黑 > 黑体 */
+/* 如果客户端都没有这些字体就选择一种无衬线字体 */
+font-family: 微软雅黑, 黑体, sans-serif;
+```
+
+| 操作系统 | 默认字体    |
+| -------- | ----------- |
+| windows  | 微软雅黑    |
+| Mac      | PingFang SC |
+
+常见字体系列
+
+| 常见字体系列             | 特点                               | 场景         | 该系列常见字体        |
+| ------------------------ | ---------------------------------- | ------------ | --------------------- |
+| 无衬线字体（sans-serif） | 文字笔画粗细均匀，并且首尾无装饰   | 网页         | 黑体、Arial           |
+| 衬线字体（serif）        | 文字笔画粗细不均匀，并且首尾有装饰 | 报刊书籍     | 宋体、Times New Roman |
+| 等宽字体（monospace）    | 每个字母或文字的宽度相等           | 程序代码编写 | Consolas、 fira Code  |
+
+```html
+<div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div>
+<div style="font-family: 宋体, Times New Roman, serif;">Hello World!</div>
+<div style="font-family: Consolas, fira Code, monospace;">Hello World!</div>
+```
+
+<output>
+<div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div>
+<div style="font-family: 宋体, Times New Roman, serif;">Hello World!</div>
+<div style="font-family: Consolas, fira Code, monospace;">Hello World!</div>
+</output>
+
+## 文本缩进
+
+```css
+/* 首行缩进2个字符 */
+text-indent: 2em;
+```
+
+取值
+
+- 数字 + px
+- 数字 + em(推荐：1em=当前标签的 font-size 大小)
+
+```html
+<p>Hello World!</p>
+<p style="text-indent: 2em;">Hello World!</p>
+```
+
+<output>
+<p>Hello World!</p>
+<p style="text-indent: 2em;">Hello World!</p>
+</output>
+
+## 文本水平对齐方式
+
+```css
+text-align: center;
+```
+
+| 属性值 | 效果           |
+| ------ | -------------- |
+| left   | 左对齐（默认） |
+| center | 居中对齐       |
+| right  | 右对齐         |
+
+可居中的标签
+
+- 文本
+- span a
+- input img
+
+内容居中需要给`父元素`设置居中属性
+
+```html
+<p>Hello World!</p>
+<p style="text-align: center;">Hello World!</p>
+```
+
+<output>
+<p>Hello World!</p>
+<p style="text-align: center;">Hello World!</p>
+</output>
+
+## 文本修饰
+
+```css
+/* 常用于清除a标签默认下划线 */
+text-decoration: none;
+```
+
+| 属性值       | 效果   |
+| ------------ | ------ |
+| underline    | 下划线 |
+| line-through | 删除线 |
+| overline     | 上划线 |
+| none         | 无     |
+
+```html
+<p style="text-decoration: none;">Hello World!</p>
+<p style="text-decoration: underline;">Hello World!</p>
+<p style="text-decoration: line-through;">Hello World!</p>
+<p style="text-decoration: overline;">Hello World!</p>
+```
+
+<output>
+<p style="text-decoration: none;">Hello World!</p>
+<p style="text-decoration: underline;">Hello World!</p>
+<p style="text-decoration: line-through;">Hello World!</p>
+<p style="text-decoration: overline;">Hello World!</p>
+</output>
+
+## 行高
+
+```css
+line-height: 1.5;
+```
+
+取值
+
+- 数字 + px
+- 倍数（当前标签 font-size 的倍数）
+
+文本高度
+
+- 上间距
+- 文本高度
+- 下间距
+
+应用：
+
+- 单行文本垂直居中：line-height=元素父元素高度
+- 取消上下间距：line-height=1
+
+```html
+<p style="line-height: 1">Hello World!</p>
+<p style="line-height: 1.5;">Hello World!</p>
+<p style="line-height: 3;">Hello World!</p>
+```
+
+<output>
+<p style="line-height: 1">Hello World!</p>
+<p style="line-height: 1.5;">Hello World!</p>
+<p style="line-height: 3;">Hello World!</p>
+</output>
+
+## font 属性简写
+
+层叠性：后面的样式覆盖前面的样式
+
+复合属性
+
+```css
+font: [font-style font-weight] font-size/line-height font-family;
+```
+
+在线配置 font 简写形式
+
+[https://developer.mozilla.org/en-US/docs/Web/CSS/font#live_sample](https://developer.mozilla.org/en-US/docs/Web/CSS/font#live_sample)
+
+```html
+<div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div>
+```
+
+<output>
+<div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div>
+</output>
diff --git a/blog/front-edn-learn/css.md b/blog/front-edn-learn/css.md
new file mode 100644
index 0000000000000000000000000000000000000000..57ea477a09bc16e499268a556eea44287c188af0
--- /dev/null
+++ b/blog/front-edn-learn/css.md
@@ -0,0 +1,135 @@
+# CSS 层叠样式表
+
+Cascading style sheets
+
+## 语法规则
+
+```
+选择器 {
+    属性名: 属性值
+}
+```
+
+## 书写位置
+
+```
+<head>
+    <title></title>
+
+    <style>
+        /* 这里写css */
+    </style>
+<head>
+```
+
+## CSS 引入方式
+
+| 引入方式 | 书写位置                   | 作用范围 | 使用场景     |
+| -------- | -------------------------- | -------- | ------------ |
+| 内嵌式   | style 标签                 | 当前页面 | 小案例       |
+| 外链式   | link 标签引入单独 css 文件 | 多个页面 | 项目中       |
+| 行内式   | 标签 style 属性中          | 当前标签 | 配合 js 使用 |
+
+（1）内嵌式
+
+- CSS 写在 style 标签中
+- style 标签可以写在页面任意位置，一般放在 head 标签中
+
+[](demo/css-1.html ':include :type=code')
+
+[](demo/css-1.html ':include height=165')
+
+（2）外链式
+
+- CSS 写在单独的`.css`文件中
+- 通过 link 标签引入到网页中
+
+[](demo/css-2.css ':include :type=code')
+
+[](demo/css-2.html ':include :type=code')
+
+[](demo/css-2.html ':include height=60')
+
+（3）行内式
+
+- CSS 写在标签 style 属性中
+
+```html
+<div style="color: green; background-color: #f1f1f1;">
+  这是一段设置了css样式的文字
+</div>
+```
+
+<output>
+<div style="color: green; background-color: #f1f1f1;">这是一段设置了css样式的文字</div>
+</output>
+
+## 基础选择器
+
+- 标签选择器
+- 类选择器
+- id 选择器
+- 通配符选择器
+
+（1）标签选择器
+
+```
+标签名 {
+    属性名：属性值;
+}
+```
+
+[](demo/css-3.html ':include :type=code')
+
+[](demo/css-3.html ':include height=50')
+
+（2）类选择器
+
+```
+.类名{
+    属性名：属性值;
+}
+```
+
+- 合法的类名：数字、字母、下划线、中划线
+- 一个元素可以有多个类名，空格隔开
+
+[](demo/css-4.html ':include :type=code')
+
+[](demo/css-4.html ':include height=140')
+
+（3）id 选择器
+
+```
+#元素id{
+    属性名：属性值;
+}
+```
+
+- 页面中唯一，不能重复
+- 一个标签只能有一个 id
+- id 选择器一般与 js 配合使用
+
+[](demo/css-5.html ':include :type=code')
+
+[](demo/css-5.html ':include height=50')
+
+（4）通配符选择器
+
+```
+*{
+   属性名：属性值;
+}
+```
+
+- 选中页面所有标签
+- 一般用于统一设置页面样式
+
+```css
+/* 清除内外边距 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+```
diff --git a/blog/front-edn-learn/demo/css-1.html b/blog/front-edn-learn/demo/css-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..d6bb72de2e11da476e3f19ce315f45ffab59bf62
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-1.html
@@ -0,0 +1,38 @@
+<!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>
+
+    <style>
+        p {
+            /* 这里是注释，快捷键ctrl + /  */
+            /* 文字颜色设置为红色 */
+            color: red;
+
+            /* 字体大小设置为30像素 */
+            font-size: 30px;
+
+            /* 背景颜色 */
+            background-color: green;
+
+            /* 设置宽度和高度 */
+            width: 600px;
+            height: 100px;
+            line-height: 100px;
+            text-align: center;
+        }
+    </style>
+
+</head>
+
+<body>
+    <p>这是一段设置了css样式的文字</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-2.css b/blog/front-edn-learn/demo/css-2.css
new file mode 100644
index 0000000000000000000000000000000000000000..91b14867e063abca22984c4fc2dd4a0beaea2c30
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-2.css
@@ -0,0 +1,5 @@
+/* css-2.css */
+
+p {
+  color: red;
+}
diff --git a/blog/front-edn-learn/demo/css-2.html b/blog/front-edn-learn/demo/css-2.html
new file mode 100644
index 0000000000000000000000000000000000000000..db75153212b206652dd8a711446bc6e3e024ca7d
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <link rel="stylesheet"
+          href="./css-2.css">
+</head>
+
+<body>
+    <p>这是一段设置了css样式的文字</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-3.html b/blog/front-edn-learn/demo/css-3.html
new file mode 100644
index 0000000000000000000000000000000000000000..e389b86a9362bc695ffc814cba7190747f49f6dd
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-3.html
@@ -0,0 +1,8 @@
+<style>
+    p {
+        color: red;
+    }
+</style>
+
+
+<p>你好，世界</p>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-4.html b/blog/front-edn-learn/demo/css-4.html
new file mode 100644
index 0000000000000000000000000000000000000000..ea81a6f84ad830822061462febb2b70740dfe598
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-4.html
@@ -0,0 +1,12 @@
+<style>
+    .red {
+        color: red;
+    }
+
+    .size {
+        font-size: 60px;
+    }
+</style>
+
+<div class="red">你好，世界</div>
+<div class="red size">你好，世界</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-5.html b/blog/front-edn-learn/demo/css-5.html
new file mode 100644
index 0000000000000000000000000000000000000000..a29fafa7f7879ed53984bcf7510b81677df9e876
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-5.html
@@ -0,0 +1,7 @@
+<style>
+    #name {
+        color: green;
+    }
+</style>
+
+<div id="name">你好，世界</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/form-1.html b/blog/front-edn-learn/demo/form-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..e89fa9204262c4e8c2289fc520f9f3c9c43b5add
--- /dev/null
+++ b/blog/front-edn-learn/demo/form-1.html
@@ -0,0 +1,54 @@
+<!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>Form Demo</title>
+</head>
+
+<body>
+    <h2>个人信息</h2>
+    <form action="">
+        <p>姓名:
+            <input type="text"
+                   placeholder="姓名">
+        </p>
+        <p>性别:
+            <label><input type="radio"
+                       name="sex"
+                       checked>男</label>
+            <label><input type="radio"
+                       name="sex">女</label>
+        </p>
+        <p>爱好:
+            <label><input type="checkbox"
+                       checked>足球</label>
+            <label><input type="checkbox">篮球</label>
+            <label><input type="checkbox">羽毛球</label>
+        </p>
+
+        <p>现居：<select>
+                <option value="">北京</option>
+                <option value="">上海</option>
+                <option value="">广州</option>
+                <option value="">深圳</option>
+            </select>
+        </p>
+
+        <p>个人简介：
+            <br />
+            <textarea cols="60"
+                      rows="10"></textarea>
+        </p>
+
+        <input type="submit"
+               value="提交">
+        <button type="reset">重置</button>
+    </form>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/blog/front-edn-learn/element.md b/blog/front-edn-learn/element.md
index 375732012d8fd323428c409996226aabe5c9a234..efeeb2cc1036c2161a39d7d842aaf4de87eac9aa 100644
--- a/blog/front-edn-learn/element.md
+++ b/blog/front-edn-learn/element.md
@@ -495,7 +495,6 @@ option 选项
 <output>
 <input type="radio" name="sex" id="man">
 <label for="man">男</label>
-
 <label><input type="radio" name="sex">女</label>
 </output>
 
@@ -526,7 +525,7 @@ option 选项
 
 ```html
 <!-- 单词之间有5个空格，最后只显示一个空格 -->
-hello      world
+hello world
 
 <!-- 实现单词之间有5个空格 -->
 hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
@@ -543,3 +542,9 @@ hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
 
 &copy;
 </output>
+
+## 综合案例
+
+[](demo/form-1.html ':include :type=code')
+
+[](demo/form-1.html ':include height=470')
diff --git a/blog/front-edn-learn/index.md b/blog/front-edn-learn/index.md
index d9f5242b367bb6966e0be8698230db9ff318f0fd..d77868e9717d8deae6bdbacf17a06642c38ce38e 100644
--- a/blog/front-edn-learn/index.md
+++ b/blog/front-edn-learn/index.md
@@ -10,9 +10,14 @@
 
 [菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
 
+[https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
 
 ## 内容
 
-1. [HTML基本认知](blog/front-edn-learn/basic.md)
+1. [HTML 基本认知](blog/front-edn-learn/basic.md)
 
 2. [标签元素](blog/front-edn-learn/element.md)
+
+3. [CSS 层叠样式表](blog/front-edn-learn/css.md)
+
+4. [CSS字体和文本样式](blog/front-edn-learn/css-font.md)