Merge pull request #8 from seasidejuvenile666/main

完成了16_DevTool、17_CodeStandards、18_UniswapHTML&CSS、19_BAYCHTML&CSS
WTFAcademy · Oct 13, 2022 · b356733 · b356733
2 parents a517d77 + 4ece7c8
commit b356733
Show file tree

Hide file tree

Showing 46 changed files with 1,584 additions and 0 deletions.
diff --git a/16_DevTool/img/16-1.jpg b/16_DevTool/img/16-1.jpg
diff --git a/16_DevTool/img/16-10.jpg b/16_DevTool/img/16-10.jpg
diff --git a/16_DevTool/img/16-11.png b/16_DevTool/img/16-11.png
diff --git a/16_DevTool/img/16-12.jpg b/16_DevTool/img/16-12.jpg
diff --git a/16_DevTool/img/16-2.jpg b/16_DevTool/img/16-2.jpg
diff --git a/16_DevTool/img/16-3.jpg b/16_DevTool/img/16-3.jpg
diff --git a/16_DevTool/img/16-4.jpg b/16_DevTool/img/16-4.jpg
diff --git a/16_DevTool/img/16-5.jpg b/16_DevTool/img/16-5.jpg
diff --git a/16_DevTool/img/16-6.jpg b/16_DevTool/img/16-6.jpg
diff --git a/16_DevTool/img/16-7.jpg b/16_DevTool/img/16-7.jpg
diff --git a/16_DevTool/img/16-8.png b/16_DevTool/img/16-8.png
diff --git a/16_DevTool/img/16-9.png b/16_DevTool/img/16-9.png
diff --git a/16_DevTool/readme.md b/16_DevTool/readme.md
@@ -0,0 +1,118 @@
+# WTF CSS极简教程: 16.开发者工具
+
+WTF CSS教程，总结/搬运自MDN CSS教程[开发者工具](https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools)和[调试CSS](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_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。
+
+## 什么是浏览器开发者工具？
+
+每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
+
+## 如何在浏览器中打开开发者工具
+
+开发者工具内置在您的浏览器的子窗口之中，大概像这样：
+
+![](./img/16-1.jpg)
+
+如何打开它？有三种方式：
+
+![](./img/16-2.jpg)
+
+![](./img/16-3.jpg)
+
+元素(Elements):DOM 浏览器和 CSS 编辑器
+
+开发者工具在打开时默认为Elements页面，如下图所示。这个工具可以让你看到你的网页的 HTML 运行时的样子，以及哪些 CSS 规则被应用到了页面上元素。它还允许您立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。
+
+![](./img/16-4.jpg)
+
+如果你看不到Elements,
+
+1. 点击“检查”选项卡
+2. 在 Internet Explorer 中，点击 DOM Explorer，或按 Ctrl + 1
+3. 在 Safari 中，控制就不是很清楚了，但是如果你没有选择的东西出现在窗口看到 HTML。按下按钮查看 CSS 样式。
+
+## 探索DOM检查器
+
+首先在DOM检查器中右键单击一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：
+
+![](./img/16-5.jpg)
+
+- 删除节点（或删除元素）：删除当前元素。
+- 编辑HTML（或添加属性/编辑文本）：让您更改HTML和看到在变化的结果。对于调试和测试非常有用。
+- :hover/:active/:focus（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。
+- 复制/复制为 HTML：复制当前选定的 HTML。
+- 一些浏览器也有复制 CSS 路径和复制 XPath，允许你选择复制当前的HTML元素CSS选择器或XPath表达式。
+
+要想编辑你的Element，你可以双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。
+
+## 探索CSS编辑器
+
+默认情况下，CSS编辑器显示当前所选元素应用的CSS规则：
+
+![](./img/16-6.jpg)
+
+以下功能特别有用：
+
+- 应用于当前元素的规则以相关度排序。越特定的规则显示的越靠前。
+- 点击每个声明旁边的复选框，看看如果删除声明会发生什么。
+- 点击每个简写属性旁边的小箭头显示属性的普通等效项。
+- 单击属性名称或值以显示一个文本框，您可以在其中键入新值以获取样式更改的实时预览。
+- 每个规则旁边是规则定义的文件名和行号。单击该规则将使开发工具跳转到自己的视图中显示，通常可以编辑和保存。
+- 您还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，您可以在其中为页面写入一个全新的声明。
+
+您会注意到CSS查看器顶部的一些可点击的选项卡：
+
+- 计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。
+- 盒子模型：这可以直观地表示当前元素的框模型，所以您可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。
+- 字体：在 Firefox 中，“字体”选项卡显示应用于当前元素的字体。
+
+## 检查CSS
+
+从页面上选择一个元素，可以通过以下方法：右键该元素，选择检查；从DevTools左侧HTML tree中选择该元素。试试选择class为box1的元素吧，它是页面上的第一个元素，周围画有边框。
+
+![](./img/16-7.jpg)
+
+如果查看HTML右边的StyleS栏，你应该能看到该元素的CSS属性与值。你能看到直接应用到box1类上的规则，还有其继承了祖先的CSS（该例中指`<body>`）。这在一种情况下就很有帮助——你看到有些CSS并非在计划之内（或许它们继承自某个父元素然而你没有覆盖它们）。
+
+另一个有用的功能是将简写属性展开的功能。在我们的示例里面使用了margin的简写。点击小箭头来展开界面，显示不同的完整属性和它们的值。
+
+![](./img/16-8.png)
+
+你可以在Styles面板活动的时候打开或关闭值，在你将光标悬浮在上面的时候，就会出现勾选框。取消勾选一个规则的勾选框，例如border-radius，CSS 就会停止应用。
+
+![](./img/16-9.png)
+
+## 编辑值
+
+除了开关属性以外，你还能编辑它们的值。选择了box1以后，点击显示应用在边框的颜色的色块（被涂上颜色的圆），会打开一个颜色选择器，然后你就能尝试一些不同的颜色，页面上的显示会进行实时的更新。类似地，你也可以用这种方法改变宽度或者边框的样式。
+
+![](./img/16-10.jpg)
+
+## 添加一个新属性
+
+你可以使用开发者工具添加属性。你可以点击在规则中合拢的花括号，开始向里面键入一个新的声明，此时你可以开始键入新的属性，开发者工具会展示给你一个自动填充的对应属性列表。在选择了font-size以后，键入你想要尝试的值。你也可以点击“+”按钮以添加一个对应于相同选择器的规则，将你的新规则加到那里。
+
+![](./img/16-11.png)
+
+## 理解盒模型
+
+在之前的课程里我们已经讨论了盒模型，现在开发者工具可以确实帮助你理解元素尺寸的计算方式。
+
+将这两个分别带有 box1 和 box2 类的盒子进行比较，它们可能都应用了相同的宽度（400 像素），但是 box1 显然更宽。你可以在布局面板上看到，它的box-sizing为默认的content-box，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。
+
+带有 box2 类的盒子使用了 border-box，所以此时内边距和边框的值是从你赋给元素的值里面减去的，也就是说页面上被盒子占据的空间大小就是你指定的大小，此例中为 width: 400px。
+
+![](./img/16-12.jpg)
+
+## 总结
+
+这一讲我们简单介绍了如何使用开发者工具，并用它来对CSS进行初步的调试。开发者工具的功能十分强大，同时它在不同浏览器中的细节也有所不同，这部分就留给学员们自己探索。
diff --git a/16_DevTool/调试CSS.html b/16_DevTool/调试CSS.html
@@ -0,0 +1,77 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Inspecting CSS</title>
+
+    <style>
+        body {
+            background-color: #fff;
+            color: #333;
+            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
+            padding: 0;
+            margin: 0;
+        }
+
+        .container {
+            padding: 20px 10px;
+            max-width: 900px;
+            margin: 40px auto;
+        }
+
+        .box1 {
+          width: 400px;
+          margin: 0 0 40px 0;
+          padding: 20px;
+          border: 5px solid rgb(75, 70, 74);
+          border-radius: .5em;
+        }
+
+        .box2 {
+          box-sizing: border-box;
+          width: 400px;
+          margin: 0 0 40px 0;
+          padding: 20px;
+          border: 5px solid rgb(78, 17, 66);
+          border-radius: .5em;
+        }
+
+        .special {
+          color: orange;
+        }
+
+        em {
+          color: hotpink;
+          font-weight: bold;
+        }
+
+    </style>
+
+</head>
+
+<body>
+    <div class="container">
+        <div class="box1">
+          <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
+            tomatillo
+            melon azuki bean garlic.</p>
+        </div>
+
+        <div class="box2">
+          <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
+            collard
+            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+        </div>
+
+        <p>Turnip <em class="special">greens</em> yarrow ricebean rutabaga endive cauliflower <em>sea lettuce</em> kohlrabi amaranth water spinach
+            avocado
+            daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
+            spinach
+            carrot soko.
+        </p>
+
+    </div>
+</body>
+</html>
diff --git a/17_CodeStandards/readme.md b/17_CodeStandards/readme.md
@@ -0,0 +1,169 @@
+# WTF CSS极简教程: 17.代码规范
+
+WTF CSS教程，总结/搬运自[MDN CSS教程](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing)，帮助新人快速入门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)
+
+---
+
+这一讲，我们介绍如何在编写时保持代码规范，从而使一个更大的样式表和大项目具有更强的可读性和可维护性。
+
+## 保持统一
+
+如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用Tab还是空格来缩进代码？如果是空格，用多少个？）
+
+一直遵守一系列规则，你会在编写 CSS 的时候省去不少精神上的预负担，因为一些决定已经定型了。
+
+## 将CSS格式化成可读的形式
+
+你可以看到很多 CSS 格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：
+
+```css
+.box { background-color: #567895; }
+h2 { background-color: black; color: white; }
+```
+
+还有的开发者更喜欢将所有的东西放在新的一行：
+
+```css
+.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}
+```
+
+CSS 不会管你使用哪种方式来进行格式化，我们的看法是，将每个属性值对放在新的一行会更好读。
+
+## 为你的CSS加注释
+
+在你的 CSS 里加入注释，不仅可以帮任何未来的开发者处理你的CSS文件，也可以在你离开项目一段时间后，帮你在回来时更轻松地重新上手。
+
+```css
+/* 这是一条 CSS 注释，
+它可以分成好几行。*/
+```
+
+在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段 CSS 的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是`||`。
+
+```css
+/* || General styles */
+
+...
+
+/* || Typography */
+
+...
+
+/* || Header and Main Navigation */
+
+...
+
+```
+
+你不必在你的 CSS 中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。
+
+为了对旧浏览器保持兼容，你用某种特殊方法使用了一种 CSS 属性，示例：
+
+```css
+.box {
+  background-color: red; /* fallback for older browsers that don't support gradients */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+```
+
+## 在你的样式表里面加入逻辑段落
+
+在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式。典型地，你可以为以下的元素设定规则：
+
+- `body`
+- `p`
+- `h1`,`h2`,`h3`,`h4`,`h5`
+- `ul`和`ol`
+- `table`属性
+- `a`
+
+在这段样式表里面，我们提供了用于站点类型的默认样式，为数据表格、列表等设立了一份默认的样式。
+
+```css
+/* || GENERAL STYLES */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+```
+
+在这段之后，我们可以定义一些实用类，例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西，那么你可以把它们加到这里。
+
+```css
+/* || UTILITIES */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+```
+
+然后我们可以加上在整个站点都会用到的所有东西，这可能是像基础页面布局、抬头或者导航栏样式之类的东西。
+
+```css
+/* || SITEWIDE */
+
+.main-nav { ... }
+
+.logo { ... }
+
+```
+
+最后我们可以在 CSS 里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。
+
+```css
+/* || STORE PAGES */
+
+.product-listing { ... }
+
+.product-box { ... }
+
+```
+
+通过使用这种方式排布代码，我们至少能大致了解，我们能在样式表的哪个部分寻找想要更改的东西。
+
+## 避免太特定的选择器
+
+如果你创建了很特定的选择器，你经常会发现，你需要在你的 CSS 中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有`main`类的`<article>`里面的带有`box`类的`<p>`上应用了规则。
+
+```css
+article.main p.box {
+  border: 1px solid #ccc;
+}
+```
+
+如果你之后想要在`main`外的什么地方上应用相同的规则，或者在`<p>`外的其他地方，你可能必须在这些规则中加入另一个选择器，或者直接新建个规则。或者，你也可以建立一个名为`box`的类，在任何地方应用。
+
+```css
+.box {
+  border: 1px solid #ccc;
+}
+```
+
+将东西设置的更为特定，有时也有意义，但是这一般与其说是通常实践，倒不如说是例外。
+
+
+## 总结
+
+这一讲我们介绍了在编写时如何保持代码规范，并给出了相应的示例。对一个前端开发人员而言，代码编写规范是一个十分重要的素养。