css
css
1、入门
1) 什么是css
层叠样式表，用于修饰页面元素【人靠衣装马靠鞍，狗配铃铛跑的欢】

层叠多个样式表修饰同一个元素样式表(声明块){color:#fff;}2) css语法选择器 {样式名:样式值;样式名:样式值;...}3) css可读性【MDN】1. 空白字符空格、tab字符和换行.class {color:\'red\';font-size:18px;}2. 注释  ctrl + //* 注释 */作用：解释说明，便于代码维护和管理3. 速写padding-top:5px;padding-right:10px;padding-bottom:15px;padding-left:20px;==>等价于padding: 5px 10px 15px 20px;4. 选择器组.one , .two , .three {color:\'red\';}4) 在html中如何应用css1. 内部style标签【内部样式表】将样式添加到head标签中的style标签里<style></style>2. 内联style属性【内联样式表】在元素中添加style属性<div style=\"width:100px;height:100px;\"></div>3. 外部link导入【外部样式表】将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入<link rel=\"stylesheet\" href=\"\">4. @import导入将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径<style>@import \'./test.css\';</style>link和@import的区别1) 所属范围@import 是css的语法，只能导入样式link是html的标签，不仅可以加载样式，还可以定义rel属性rel=\"stylesheet\"表示调用外部样式表2) 加载顺序页面加载的时候，link标签引入的css被同时加载@import引入的css在页面加载完毕后再被加载3) 兼容性@import需要兼容IE5+link标签，不存在兼容性问题

2、选择器
1) 基本选择器
标签选择器
含义：根据指定的标签名，在当前文件中找到所有该名称的标签，设置属性
格式：
标签名 {
样式名:样式值
}
注意：
1. 标签选择器选中的是当前文件中所有的标签, 而不能单独选中某一个标签
2. 标签选择器无论标签藏得多深都能选中
3. 只要是HTML中的标签就可以作为标签选择器

类选择器含义: 根据指定的类名找到对应的标签, 设置属性格式:.类名{属性:值;}注意:1. 在同一个文件中的class可以重复2. 使用class选择器时要在class前面加上.3. 类名的命名规范和id名称的命名规范一样4. 在HTML中每个标签可以同时绑定多个类名格式:<div class=\"类名1 类名2 ...\"></div>错误的写法:<p class=\"para1\" class=\"para2\"></p>id选择器含义：根据指定的id找到对应的标签，设置属性格式：#id {样式名:样式值}注意：1. 在同一个文件中的id不可以重复2. 使用id选择器时要在id前面加上#3. id有一定的规范id的名称只能由字母/数字/下划线a-z 0-9 _id名称不能以数字开头id名称不能是HTML标签的名称逗号选择器含义: 同时给多个选择器选中的标签设置属性格式:选择器1,选择器2{样式名:样式值}注意:1. 逗号选择器使用,来连接2. 选择器可以使用 标签名称、id、class组合选择器【了解】含义: 给同时具备多个选择器的标签设置属性格式:选择器1选择器2{样式名:样式值;}注意:1. 选择器和选择器之间没有任何的连接符号2. 选择器可以使用 标签名称、id、class普遍选择器含义: 给当前文件所有的标签设置属性格式:* {样式名:样式值;}2) 层次选择器子代选择器含义: 找到指定标签中所有的直接子元素, 设置属性格式:标签名称1>标签名称2{样式名:样式值;}先找到所有名称叫做\"标签名称1\"的元素, 然后在这个标签中查找所有第一代子元素名称叫做\"标签名称2\"的元素注意:1. 子元素选择器只会查找第一代子元素, 不会查找被嵌套的元素2. 子元素选择器之间需要用 > 连接后代选择器含义: 找到指定标签的所有的后代元素, 设置属性格式:标签名称1 标签名称2{样式名:样式值;}先找到所有名称叫做\"标签名称1\"的元素, 然后再在这个元素下面去查找所有名称叫做\"标签名称2\"的元素, 然后在设置属性注意:1. 后代选择器必须用空格隔开2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代兄弟选择器1. 相邻兄弟选择器含义: 给指定选择器后面紧跟的那个选择器选中的标签设置属性格式:选择器1+选择器2{属性:值;}注意:1.相邻兄弟选择器必须通过+连接2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签2. 通用兄弟选择器含义: 给指定选择器后面的选择器选中的所有标签设置属性格式:选择器1~选择器2{属性:值;}注意:1.通用兄弟选择器必须用~连接2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中3) 属性选择器含义: 根据指定的属性名称找到对应的标签, 然后设置属性格式:[attribute]找到所有具有该属性名的标签, 设置属性[attribute=value]找到所有属性值为value的标签, 设置属性[attribute^=value]找到所有以value开头的标签, 无论有没有被-隔开[attribute$=value]找到所有以value结尾的标签[attribute~=value]找到拥有独立value的标签, value不可以和其他属性连接[attribute*=value]只要包含value就可以找到最常见的应用场景, 用于区分inputinput[type=password] {}<input type=\"text\"><input type=\"password\"><input>4) 伪类选择器在选择器的后面使用: 用于添加特殊的效果1. 与子元素相关:first-child	选中同级别中的第一个标签:last-child		选中同级别中的最后一个标签:nth-child(n)	选中同级别中的第n个标签数字字符oddeven<p>段落一</p><p>段落二</p><p>段落三</p><ul><li><p>段落四</p><p>段落五</p></li></ul>2. 与状态相关:link  		未访问的链接:hover 		鼠标悬浮时的元素:active 	激活链接:visited 	已访问的链接:focus		聚焦时5) 伪元素选择器在选择器的后面使用:: 用于添加元素::after::before6) 选择器优先级【级联】1. !important优先级最高，不推荐2. 特性值1000内联style属性100id10类名选择器、伪类选择器、属性选择器1标签选择器、伪元素选择器3. 代码顺序如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法1 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用

TOC

语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的

代码片

.

// An highlighted blockvar foo = \'bar\';

生成一个适合你的列表

• 项目项目项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

设定内容居中、居左、居右

使用

:---------:

居中
使用

:----------

居左
使用

----------:

居右

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

\'Isn\'t this fun?\'

\"Isn\'t this fun?\"

-- is en-dash, --- is em-dash

创建一个自定义列表

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ(n)=(n−1)!∀n∈N\\Gamma(n) = (n-1)!\\quad\\foralln\\in\\mathbb NΓ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ(z)=∫0∞tz−1e−tdt .\\Gamma(z) = \\int_0^\\infty t^{z-1}e^{-t}dt\\,.Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06Mon 13Mon 20已完成 进行中 计划一 计划二 现有任务Adding GANTT diagram functionality to mermaid

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

张三李四王五你好！李四, 最近怎么样?你最近怎么样，王五？我很好，谢谢!我很好，谢谢!李四想了很长时间,文字太长了不适合放在一行.打量着王五…很好… 王五, 你怎么样?张三李四王五

这将产生一个流程图。:

链接长方形圆圆角长方形菱形

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0开始我的操作确认？结束yesno

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎