關于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小時內與您取得聯系。

整合營銷服務商