Merge pull request #10 from killerk999/main

Add 02_Syntax、03_Selectors、04_BoxModel
WTFAcademy · Oct 15, 2022 · ffb43e2 · ffb43e2
2 parents 55c299e + c564447
commit ffb43e2
Show file tree

Hide file tree

Showing 24 changed files with 636 additions and 3 deletions.
diff --git a/02_Syntax/Demo/index.html b/02_Syntax/Demo/index.html
@@ -0,0 +1,23 @@
+<!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>Demo</title>
+
+  <style>
+    h1 {
+      color: green; font-size: 50px;
+    }
+  </style>
+
+  <link rel="stylesheet" href="styles.css">
+
+</head>
+<body>
+
+  <h1 style="color: red; font-size: 50px;">Hello CSS</h1> 
+
+</body>
+</html>
diff --git a/02_Syntax/Demo/styles.css b/02_Syntax/Demo/styles.css
@@ -0,0 +1,4 @@
+h1 {
+  color: blue;
+  font-size: 50px;
+}
diff --git a/02_Syntax/img/2-1.png b/02_Syntax/img/2-1.png
diff --git a/02_Syntax/img/2-10.png b/02_Syntax/img/2-10.png
diff --git a/02_Syntax/img/2-11.png b/02_Syntax/img/2-11.png
diff --git a/02_Syntax/img/2-12.png b/02_Syntax/img/2-12.png
diff --git a/02_Syntax/img/2-2.png b/02_Syntax/img/2-2.png
diff --git a/02_Syntax/img/2-3.png b/02_Syntax/img/2-3.png
diff --git a/02_Syntax/img/2-4.png b/02_Syntax/img/2-4.png
diff --git a/02_Syntax/img/2-5.png b/02_Syntax/img/2-5.png
diff --git a/02_Syntax/img/2-6.png b/02_Syntax/img/2-6.png
diff --git a/02_Syntax/img/2-7.png b/02_Syntax/img/2-7.png
diff --git a/02_Syntax/img/2-8.png b/02_Syntax/img/2-8.png
diff --git a/02_Syntax/img/2-9.png b/02_Syntax/img/2-9.png
diff --git a/02_Syntax/readme.md b/02_Syntax/readme.md
@@ -0,0 +1,104 @@
+# WTF CSS 极简教程: 2.CSS 语法
+
+WTF CSS 教程，总结/搬运自[MDN CSS 教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS)，帮助新人快速入门 CSS。
+
+**推特**：[@WTFAcademy\_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
+
+**WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+这一讲，我们介绍 CSS 语法，以及在文档中应用 CSS 的三种方式。
+
+## 语法
+
+CSS 规则集由选择器和声明块组成，如下图所示：
+
+![](./img/2-1.png) ![](./img/2-2.png)
+
+选择器指向你要设置样式目标元素。
+
+声明块由 `{` 开始，`}` 结束。
+
+声明块包含一条或多条声明, 声明之间使用 `;`分隔。
+
+每条声明都包含一个 CSS 属性名称和一个值，以 `:` 分隔。
+
+上图代码意思是：所有 `<h1>` 元素的文本颜色为红色，文本大小为 50 个像素。
+
+## 引入方式
+
+在 HTML 中我们有三种使用 CSS 的方式：
+
+1. 外部 CSS
+2. 内部 CSS
+3. 行内 CSS
+
+### 外部 CSS
+
+要使用外部 CSS ，首先要创建 CSS 文件。一个 CSS 文件要以 `.css` 扩展名保存，如下图所示。
+
+![](./img/2-3.png)
+
+为了把 `styles.css` 和 `index.html` 连接起来，可以在 HTML 文档中，`<head>` 标签里面加上下面的代码：
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+![](./img/2-4.png)
+
+`<link>` 标签里面，我们用属性 `rel`，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 `href` 指定，寻找 CSS 文件的位置。
+
+### 内部 CSS
+
+内部 CSS 样式，是在 `<head>` 内使用 `<style>` 标签定义，如下图所示。
+
+![](./img/2-5.png)
+
+### 行内 CSS
+
+行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
+
+它的使用方法是直接将 `style` 作为属性，添加到目标元素上，规则如下图所示。
+
+![](./img/2-6.png)
+
+以上三种引入 CSS 的方式都可以达到相同的效果，使页面中的 `<h1>` 元素的文本颜色为红色，文本大小为 50 个像素。 如下图所示。
+![](./img/2-7.png)
+
+但我们最常用的还是外部 CSS ，这可以使 HTML 与 CSS 分离。
+
+### 层叠顺序
+
+这时候你可能会有疑问，如果我同时使用其中两种或者三种，那么元素会优先使用那种样式呢？
+
+下面这个 Demo 可以解决你的疑惑。
+
+![](./img/2-8.png)
+
+![](./img/2-9.png)
+
+我们在内部、外部、内联 CSS 中，给 `<h1>` 元素 分别指定文本颜色为蓝色、绿色、红色。此时产生的效果如下图所示。
+
+![](./img/2-10.png)
+
+此时我们把内联样式去掉。
+
+![](./img/2-11.png)
+
+改变外部 CSS 与内部 CSS 顺序。
+
+![](./img/2-12.png)
+
+由以上 Demo 我们可以得出结论，如果我们同时使用多种 CSS ，它们的优先级为：
+
+1. 行内样式
+2. 外部和内部样式表（优先级取决于所在位置，后面的覆盖前面的)
+3. 浏览器默认样式 （不引入任何 CSS 时，浏览器默认的样式）
+
+## 总结
+
+这一讲，我们知道了如何属性 CSS 样式，以及不同的引入方式，其中行内样式具有最高的优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
diff --git a/03_Selectors/readme.md b/03_Selectors/readme.md
@@ -0,0 +1,263 @@
+# WTF CSS 极简教程: 4.选择器
+
+WTF CSS 教程，总结/搬运自[MDN CSS 教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS)，帮助新人快速入门 CSS。
+
+**推特**：[@WTFAcademy\_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
+
+**WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+这一讲，我们来详细了解一下选择器。
+
+## 什么是选择器？
+
+CSS 选择器规定了 CSS 规则会被应用到哪些元素上。
+
+## 选择器的种类
+
+我们可以将 CSS 选择器分为以下四类：
+
+1. 基本选择器
+
+2. 分组选择器
+
+3. 组合选择器
+
+4. 伪选择器
+
+### 基本选择器
+
+#### 通用选择器
+
+选择页面上所有元素。
+
+语法：`*`
+
+示例：
+
+```css
+* {
+
+}
+```
+
+#### 元素选择器
+
+按照给定的元素名称，选择所有匹配的元素。
+
+语法：`elementname`
+
+示例：
+
+```css
+/* 匹配所有 <h1> 元素 */
+h1 {
+
+}
+
+/* 匹配所有 <input> 元素 */
+input {
+
+}
+```
+
+#### 类选择器
+
+```html
+// 我有一个类名
+<h1 class="one">Hello CSS</h1>
+
+// 我有两个类名，分别为："one" 与 "two"
+<h1 class="one two ">Hello CSS</h1>
+```
+
+我们可以给元素设置 `class` 属性，class 的值是一个以空格分隔的元素的类名（classes）列表，一个元素可以有多个类名。
+
+类选择器就是按照给定的 class 属性的值，选择所有匹配的元素。类选择器以 `.` 开头，后面跟类名。
+
+语法：`.classname`
+
+示例：
+
+```css
+/* 匹配所有 class 属性中含有 "one" 类的元素 */
+.one {
+
+}
+```
+
+#### ID 选择器
+
+```html
+// 我的 ID 为 "one"
+<h1 id="one">Hello CSS</h1>
+
+// 我的 ID 为 "two"
+<h1 id="two">Hello CSS</h1>
+```
+
+按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。id 选择器以 `#` 开头，后面跟 id 值。
+
+语法：`#idname`
+
+示例：
+
+```css
+/* 匹配 id 为 "one" 的元素 */
+#one {
+
+}
+
+/* 匹配 id 为 "two" 的元素 */
+#two {
+
+}
+```
+
+#### 属性选择器
+
+按照给定的属性，选择所有匹配的元素。属性选择器，使用 `[ ]` 选取带有指定属性的元素。
+
+语法：`[attr]`
+
+示例：
+
+```css
+/* 匹配 所有具有 autoplay 属性的元素 */
+[autoplay] {
+
+}
+```
+
+### 分组选择器
+
+#### 选择器列表
+
+选择器列表是将不同的选择器组合在一起的方法，常被称为并集选择器或并集组合器。选择器列表使用 `,` 分隔的列表来对选择器进行分组。
+
+语法：`A, B`
+
+示例：
+
+```css
+/* 同时匹配 <span> 元素和 <div> 元素。 */
+div, span {
+
+}
+```
+
+### 组合器
+
+#### 后代组合器
+
+选择前一个元素的后代节点。
+
+语法：`A B`
+
+示例：
+
+```css
+/* 匹配所有位于任意 <div> 元素之内的 <span> 元素。 */
+div span {
+
+}
+```
+
+#### 直接子代组合器
+
+选择前一个元素的直接子代的节点。
+
+语法：`A > B`
+
+示例：
+
+```css
+/* 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。 */
+ul > li {
+
+}
+```
+
+#### 一般兄弟组合器
+
+选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
+
+语法：`A ~ B`
+
+示例：
+
+```css
+/* 匹配同一父元素下，<p> 元素后的所有 <span> 元素。 */
+p ~ span {
+
+}
+```
+
+#### 紧邻兄弟组合器
+
+选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
+
+语法：`A + B`
+
+示例：
+
+```css
+/* 匹配所有紧邻在 <h2> 元素后的 <p> 元素。 */
+h2 + p {
+
+}
+```
+
+#### 列组合器
+
+选择属于某个表格行的节点。
+
+语法：`A || B`
+
+示例：
+
+```css
+/* 匹配所有 <col> 作用域内的 <td> 元素。 */
+col || td {
+
+}
+```
+
+### 伪选择器
+
+#### 伪类
+
+CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
+
+示例：
+
+```css
+/* 匹配所有曾被访问过的 <a> 元素。 */
+a:visited {
+
+}
+```
+
+更多[伪类详解](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes)
+
+#### 伪元素
+
+伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
+
+示例：
+
+```css
+/* 匹配所有 <p> 元素的第一行。 */
+p::first-line {
+
+}
+```
+
+更多[伪元素详解](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements)
+
+## 总结
+
+这一讲，我们学习了非常重要的 CSS 选择器，没有它我们就不能精准给目标元素添加样式，我们一定要熟练掌握它！
diff --git a/04_BoxModel/img/4-1.png b/04_BoxModel/img/4-1.png
diff --git a/04_BoxModel/img/4-2.png b/04_BoxModel/img/4-2.png
diff --git a/04_BoxModel/img/4-3.png b/04_BoxModel/img/4-3.png
diff --git a/04_BoxModel/img/4-4.png b/04_BoxModel/img/4-4.png
diff --git a/04_BoxModel/img/4-5.png b/04_BoxModel/img/4-5.png
diff --git a/04_BoxModel/img/4-6.png b/04_BoxModel/img/4-6.png