From dc000aabbf1066af36220330d4d525faa0a929d0 Mon Sep 17 00:00:00 2001 From: Marico Xing Date: Wed, 28 Jul 2021 17:49:11 +0800 Subject: [PATCH 01/10] note project init --- CSS.md | 484 ++++++++++++ Coding Style.md | 118 +++ ES.md | 428 +++++++++++ Flex.md | 69 ++ JS.md | 688 ++++++++++++++++++ Less.md | 153 ++++ MongoDB.md | 43 ++ Redis.md | 188 +++++ Vue.md | 412 +++++++++++ .../\351\233\266\346\230\237.md" | 6 + 10 files changed, 2589 insertions(+) create mode 100644 CSS.md create mode 100644 Coding Style.md create mode 100644 ES.md create mode 100644 Flex.md create mode 100644 JS.md create mode 100644 Less.md create mode 100644 MongoDB.md create mode 100644 Redis.md create mode 100644 Vue.md create mode 100644 "\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/\351\233\266\346\230\237.md" diff --git a/CSS.md b/CSS.md new file mode 100644 index 0000000..0696261 --- /dev/null +++ b/CSS.md @@ -0,0 +1,484 @@ +# CSS 笔记 + +## css 选择器 + +### 简单选择器 + +- id 选择器 + + 格式为 `#id {}`，id 选择器是使用元素的 id 来选定元素。 + + **注意：** id 选择器不能以数字开头。 + +- 类选择器 + + 格式为 `.类名 {}`，还可以 `标签名.类名 {}`，比如：p.center {...}，选择具有这个类的这个标签可以生效。就是指的是具有 center 类的 p 标签生效。 + + 选择多个类的话，类之间使用空格隔开。 + + **注意：** 类名不能使用数字开头！ + +- 通用选择器 + + 格式为 `* {}`，使用 * 可以选择页面 的所有元素。 + +- 元素选择器 + + 格式为 `标签名 {}`，即元素名，直接使用元素的名字进行选择。 + +- *选择器分组* + + 多个选择器可以进行分组，然后使用“，”进行分隔。 + +### 高级选择器 + +- 多类选择器 + + 格式为 `.类名.类名 {}`，即类名直接连接在一起，之间没有空格，表示筛选同时具有这两个类的元素。 + +- 属性选择器 + + 格式为 `标签名[属性名 1=属性值 1][属性名 2=属性值 2] {}`，标签名可省略，属性名可以是多个，但是多个使用要连接在一起。 + + - [attribute = value] ，用于选取带有指定属性和值的元素。 + - [attribute~ = value] ，用于选取属性值中包含指定词汇的元素。 + - [attribute| = value] ，用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 + - [attribute^ = value] ，匹配属性值以指定值开头的每个元素。 + - [attribute$ = value] ，匹配属性值以指定值结尾的每个元素。 + - [attribute* = value] ，匹配属性值中包含指定值的每个元素。 + + 示例： + + ```css + *[title] {color:red;} /*-- 这里是包含 title 属性的所有元素都设置为红色字体 --*/ + ``` + + ```css + a[href] {color:red;} /*-- 这里是把有 href 属性的 a 标签设置为红色字体 --*/ + ``` + +- 多类选择器 + + 格式为 `.类名.类名 {}`，即类名直接连接在一起，之间没有空格，表示筛选同时具有这两个类的元素。 + +### 组合器 + +- 后代选择器 (空格)，所有后代。 + + 示例： + + ```css + div p { + background-color: yellow; + } + ``` + +- 子选择器 (>)，只是子。 + + 示例： + + ```css + div > p { + background-color: yellow; + } + ``` + +- 相邻兄弟选择器 (+) + + 示例： + + ```css + div + p { + background-color: yellow; + } + ``` + +- 通用兄弟选择器 (~)，所有兄弟。 + + 示例： + + ```css + div ~ p { + background-color: yellow; + } + ``` + +## 三种使用 CSS 的方法 + +- 外部 CSS + + 使用 `` 标签引用外部的 CSS 文件，例如 ``。 + + 外部样式表的扩展名必须是 .css 的文件，文件中不应该包含任何 HTML 标签，属性值和单位之间不加空格。 + +- 内部 CSS + + 内部 CSS 写在页面声明的 `` 标签内，样式代码写在 `