关于Css的所有讲解内容

SS课堂笔记

1、CSS的概念

层叠样式表(英文全称：Cascading Style Sheets) *层叠：多个样式可以作用在同一个html的元素上，同时生效

是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。

所以，前端程序员相互表白的时候可以说：you are the CSS to my HTML.

这是不是CSS是对HTML进行美化和布局作用的最好总结？

2、CSS的优势

功能强大
将内容展示和样式控制分离

降低耦合度。解耦
让分工协作更容易
提高开发效率

3、CSS的使用：CSS与html结合使用

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

3.1 行内样式

也称为内联样式

直接在标签中编写样式，通过使用标签内部的style属性；

一般在测试的时候使用居多：
语法：
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

3.2 内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部样式

1、提前定义css资源文件

2、在head标签内，定义link标签引入外部样式文件。

lina.css文件，放在与html页面同级的css文件夹中：
div {
    color: red;
}

html页面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部样式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范围:外部样式表>内部样式表>行内样式表

优先级：外部样式表<内部样式表<行内样式表;

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效。

4、CSS语法

基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 {
        属性1:值1;
        属性2:值2;
        ...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。

例如：

5、CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

/*这是CSS的注释*/
div {
    color: red;  /*文字颜色是红色*/
}

6、基本选择器：筛选具有相似特征的元素

6.1 id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

6.2 class选择器

选择具有相同的class属性值的元素。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

PS：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

6.3 元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

7 优先级

7.1 选择器的优先级

ID选择器 > 类选择器 > 标签选择器

当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

7.2 样式表的优先级

行内样式 > 内部样式 >外部样式

同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

8 CSS常用样式

8.1 color :字体颜色

跟颜色相关的取值分3种：

1、颜色的单词 red blue...

2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)

rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的例如：#FF0000

8.2 width height:宽高

PS：只有块状元素可以设置宽高，行级元素设置不生效。

取值方式有2种：

1：数值绝对数字单位是像素PX

2：百分比：占据父元素的比例

8.3 背景样式

8.4 文本样式

8.5 列表样式

8.6 边框样式

10 HTML&CSS调试利器

以谷歌浏览器为例说明。

快捷键F12或者工具条中的开发者工具调出以下内容。

在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型说明图：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

11.2 盒子的宽度和高度

元素的实际宽度和高度：

当我们计算一个元素实际在页面占有的总宽度计算公式是这样的：

总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

11.3 如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性

12 补充常用样式

12.1 float 浮动

12.1.1 什么是浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

12.1.2 元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

12.1.3 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

12.1.4 clear--清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示
            浮动的元素都脱离了常规文档流；
            为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
            如果想要非浮动元素不受浮动元素的影响，需要使用clear属性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮动，常规文档流,
            <br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响
            如果不想让div2被浮动元素影响，需要添加clear属性。
            添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，大家可以自己试验一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮动，常规文档流,
            <br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
            如果不想让div4被浮动元素影响，需要添加clear属性。
            添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，大家可以自己试验一下
            
            clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
        </div>
        <div style="background: lavender;">
            div5-未浮动，常规文档流,
        </div>
    </body>
</html>

12.2 overflow

控制内容溢出元素框时显示的方式。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

12.3 Display(显示) 与 Visibility（可见性）

12.3.1 两者的区别

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

12.3.2 display 改变元素的类型

CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

13 复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。

可以更准确更精细的选择目标元素标签。

13.1 全局选择器

语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将 * 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。

13.2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：选择器1，选择器2，......选择器N{}

意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

13.3 交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：h3.class{ color:red; }

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。

交集选择器是并且的意思。即...又...的意思

例如：   table.bg   选择的是： 类名为 .bg  的 表格标签，但用的相对来说比较少。

13.4 后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或元素组的子孙后代。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

  格式：父级 子级{属性:属性值;属性:属性值;}

语法：.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

13.5 子元素选择器

作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

语法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

13.6 实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复合选择器</title>
		<style>
			/*全局选择器：
			 	一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，
			 */
			*{
				color: #333;/*定义全局文字颜色，统一色彩基调*/
			}
			/*并集选择器：通常用于集体声明
			 	替换全局选择器；
			 */
			div,p,dldt,dd{
				/*去掉浏览器的默认样式*/
				margin: 0;
				padding: 0;
				color: #333;/*定义全局文字颜色，统一色彩基调*/
			}
			/*交集选择器*/
			li.myli{
				color: red;
			}
			/*后代选择器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微软雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素选择器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">点击我试试</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">点击我试试</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>静夜思</h3>	
			<ul>
				<li><h3>静夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 伪类选择器

伪类选择器：和类选择器相区别类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如 :link{} 。

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style>			
			/*伪类选择器*/			
			a:link{
				color: red;/*默认颜色是红色*/	
			}
			a:visited{
				color: blue;/*访问过的页面是蓝色*/	
			}
			a:hover{
				color: green;/*鼠标悬浮是绿色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠标不放手是金色*/	
				font-family: "微软雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用样式.html" target="_blank">常用样式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-综合练习.html" target="_blank">综合练习</a>
	</body>
</html>

注意**

写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
       color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

13.7 复合选择器比对

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

程序员HTML5培训教程-html和css基础知识，Html是超文本标记语言（英语全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

Css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

一.基础内容：

标记=开始标记+内容+结束标记

标记可以嵌套使用，例如：页面主体标记中含有标题标记，段落标记。

有些标记有属性，具体格式，以a标记为例，xxxx其中make为标记的属性。

设计为没有任何内容的元素称为void元素，需要使用void元素时，只需要使用一个开始标记，这是一种方便的简写，可以减少html中的标记数量

二.常用标记的使用与意义：

<!doctype html>html5的文档类型定义，这一行要写到html文件开头

<html></html>标记html页面的开始和结束

<head></head>标记页面的有关信息

<title></title>为页面指定一个标题，标记中的内容出现在浏览器的顶部

<body></body>标记页面的主体内容

中间xxx的内容为注释的内容

编写html时要把首部和页面主体分开

<h1></h1>为主标题，从<h2>到<h6>依次为副标题，字体由大到小

<p></p>开始一个段落

<blockquote> </blockquote> 标签定义块引用，之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间

插入一个换行符

<q> 标签定义一个短的引用，浏览器经常会在这种引用的周围插入引号

需要了解的内容（一些老版本弃置的元素与不建议使用的元素，做到看见了要明白其含义）

<ol></ol>定义一个有序列表

<ul> 标签定义无序列表

<li> 标签定义列表项目，<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中

<dl> 标签定义一个描述列表，<dl> 标签与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用

标签告诉浏览器把其中的文本表示为强调的内容，对于所有浏览器来说，这意味着要把这段文字用斜体来显示

<body bgcolor="xxx" text="xxxx">,bgcolor属性设置页面颜色，text属性设置文本颜色

<font face="arial">xxxx</font>利用font元素改变字体

<center></center>对其包围的文本进行水平居中处理

一些字符实体

<显示为<

>显示为>

©right显示为©

三.一个简单的html框架

<!doctype html>

<html>

<head>

<title>Hello Wrld!</title>

</head>

<body>

<h1>演示文件，页面显示hello world！</h1>

<p>

Hello Wrld !

</p>

</body>

</html>

四.在页面中插入一个链接

用于创建指向其它页面的链接，元素中的内容就是链接文本，在浏览器中链接文本会显示有下划线，指示这是可单击的，例如：

<a href="(链接目标文件的路径或url)"

title="文本描述">（链接文本）

href属性指向链接文件的路径

rirle属性所需链接页面的文本描述

加入id属性用于具体指向某个链接的某个标题，例如：

<a href="index.html#标识符">xxxxx</a>

并同步页面中的标题,链接所使用的标识符要与标题的标识符设置一致

<h2 id="标识符">xxxxx</h2>

加入target属性，使浏览器打开链接时为单独的窗口，而不是同一窗口，例如：

<a target="_blank" href="xxxxxxxx"

title="xxxxxxxxx">xxxxxxxxx</a>

如果不加入target属性，点击链接时浏览器会在同一窗口打开链接，加入此属性，浏览器会在单独窗口打开链接

五.在页面中插入图像

<img src="xxxxx">标记为在页面中显示图像，xxx为图片的路径或url

alt=“xxx”属性为描述这个图像内容的文本，如果图像未能显示，就会使用这个文本来取代它。

width-"xxx"属性告诉浏览器在页面中显示图像的宽度

height="xxx"属性告诉浏览器在页面中显示图像的高度

未完待续，欢迎继续关注好程序员前端教程分享!

用 Vim 时有一个非常重要的一点需要注意，那就是按键的功能取决于编辑器当前的“模式”。 -- Himanshu Arora

本文导航
-基本操作 …… 14%
-方向键 …… 19%
-浏览文档 …… 31%
-插入文本 …… 37%
-特殊插入 …… 42%
-删除文本 …… 46%
-简单替换文本 …… 52%
-复制/粘贴文本 …… 55%
-撤销/重做操作 …… 61%
-搜索和替换 …… 64%
-书签 …… 73%
-选择文本 …… 77%
-改动选中文本 …… 80%
-保存并退出 …… 85%
-下载 Vim 快捷键速查表 …… 92%

编译自： https://www.maketecheasier.com/vim-keyboard-shortcuts-cheatsheet/
作者： Himanshu Arora
译者： martin2011qi

本文是 Vim 用户指南[1] 系列的其中一篇：

Vim 初学者入门指南[2]
Vim 快捷键速查表
5 个针对有经验用户的 Vim 技巧[3]
3 个针对高级用户的 Vim 编辑器实用技巧[4]

Vim 编辑器是一个基于命令行的工具，是传奇编辑器 vi 的增强版。尽管图形界面的富文本编辑有很多，但是熟悉 Vim 对于每一位 Linux 的使用者都能有所帮助——无论你是经验丰富的系统管理员，还是刚上手树莓派的新手用户。

这个轻量级的编辑器是个非常强大的工具。在有经验的使用者手中，它能完成不可思议的任务。除了常规的文本编辑功能以外，它还支持一些进阶特性。例如，基于正则表达式的搜索和替换、编码转换，以及语法高亮、代码折叠等的编程特性。

使用 Vim 时有一个非常重要的一点需要注意，那就是按键的功能取决于编辑器当前的“模式”。例如，在“普通模式”输入字母j时，光标会向下移动一行。而当你在“插入模式”下输入字符，则只是正常的文字录入。

下面就是速查表，以便于你充分利用 Vim。

基本操作

快捷键	功能
Esc	从当前模式转换到“普通模式”。所有的键对应到命令。
i	“插入模式”用于插入文字。回归按键的本职工作。
:	“命令行模式” Vim 希望你输入类似于保存该文档命令的地方。

方向键

快捷键	功能
h	光标向左移动一个字符
j 或 Ctrl + J	光标向下移动一行
k 或 Ctrl + P	光标向上移动一行
l	光标向右移动一个字符
0	（数字 0）移动光标至本行开头
$	移动光标至本行末尾
^	移动光标至本行第一个非空字符处
w	向前移动一个词（上一个字母和数字组成的词之后）
W	向前移动一个词（以空格分隔的词）
5w	向前移动五个词
b	向后移动一个词（下一个字母和数字组成的词之前）
B	向后移动一个词（以空格分隔的词）
5b	向后移动五个词
G	移动至文件末尾
gg	移动至文件开头

浏览文档

快捷键	功能
(	跳转到上一句
)	跳转到下一句
{	跳转到上一段
}	跳转到下一段
[[	跳转到上一部分
]]	跳转到下一部分
[]	跳转到上一部分的末尾
][	跳转到上一部分的开头

插入文本

快捷键	功能
a	在光标后插入文本
A	在行末插入文本
i	在光标前插入文本
o	（小写字母 o）在光标下方新开一行
O	（大写字母 O）在光标上方新开一行

特殊插入

快捷键	功能
:r [filename]	在光标下方插入文件 [filename] 的内容
:r ![command]	执行命令 [command] ，并将输出插入至光标下方

删除文本

快捷键	功能
x	删除光标处字符
dw	删除一个词
d0	删至行首
d$	删至行末
d)	删至句末
dgg	删至文件开头
dG	删至文件末尾
dd	删除该行
3dd	删除三行

简单替换文本

快捷键	功能
r{text}	将光标处的字符替换成 {text}
R	进入覆写模式，输入的字符将替换原有的字符

复制/粘贴文本

快捷键	功能
yy	复制当前行至存储缓冲区
["x]yy	复制当前行至寄存器 x
p	在当前行之后粘贴存储缓冲区中的内容
P	在当前行之前粘贴存储缓冲区中的内容
["x]p	在当前行之后粘贴寄存器 x 中的内容
["x]P	在当前行之前粘贴寄存器 x 中的内容

撤销/重做操作

快捷键	功能
u	撤销最后的操作
Ctrl+r	重做最后撤销的操作

搜索和替换

快捷键	功能
/search_text	检索文档，在文档后面的部分搜索 search_text
?search_text	检索文档，在文档前面的部分搜索 search_text
n	移动到后一个检索结果
N	移动到前一个检索结果
:%s/original/replacement	检索第一个 “original” 字符串并将其替换成 “replacement”
:%s/original/replacement/g	检索并将所有的 “original” 替换为 “replacement”
:%s/original/replacement/gc	检索出所有的 “original” 字符串，但在替换成 “replacement” 前，先询问是否替换

书签

快捷键	功能
m {a-zA-Z}	在当前光标位置设置书签，书签名可用一个大小写字母（{a-zA-Z}）
:marks	列出所有书签
{a-zA-Z}	跳转到书签 {a-zA-Z}

选择文本

快捷键	功能
v	进入逐字可视模式
V	进入逐行可视模式
Esc	退出可视模式

改动选中文本

快捷键	功能
~	切换大小写
d	删除一个词
c	变更
y	复制
>	右移
<	左移
!	通过外部命令进行过滤

保存并退出

快捷键	功能
:q	退出 Vim，如果文件已被修改，将退出失败
:w	保存文件
:w new_name	用 new_name 作为文件名保存文件
:wq	保存文件并退出 Vim
:q!	退出 Vim，不保存文件改动
ZZ	退出 Vim，如果文件被改动过，保存改动内容
ZQ	与 :q! 相同，退出 Vim，不保存文件改动

下载 Vim 快捷键速查表

仅仅是这样是否还不足以满足你？别担心，我们已经为你整理好了一份下载版的速查表，以备不时之需。

点此下载（英文）：http://www.maketecheasier.com/cheatsheet/vim-keyboard-shortcuts-cheatsheet/

via: https://www.maketecheasier.com/vim-keyboard-shortcuts-cheatsheet/

作者：Himanshu Arora[6] 译者：martin2011qi 校对：wxy

本文由 LCTT[7] 原创编译，Linux中国荣誉推出

[1]: https://www.maketecheasier.com/series/vim-user-guide/

[2]: https://linux.cn/article-8143-1.html

[3]: https://www.maketecheasier.com/vim-tips-tricks-for-experienced-users/

[4]: https://www.maketecheasier.com/vim-tips-tricks-advanced-users/

[5]: http://www.maketecheasier.com/cheatsheet/vim-keyboard-shortcuts-cheatsheet/

[6]: https://www.maketecheasier.com/author/himanshu/

[7]: https://github.com/LCTT/TranslateProject

在线咨询

上一篇：为什么网站加载慢，如何加快站点访问速度
下一篇：HTML DOM Blockquote 对象

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商