當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Sublime text 入门学习资源篇及其基本使用方法

發布時間：2023/12/18 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Sublime text 入门学习资源篇及其基本使用方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Sublime text 學習資源篇

史上最性感的編輯器-sublimetext，插件，學習資源

官網

http://www.sublimetext.com/

插件

https://packagecontrol.io

教程

Sublime Text 全程指南
Sublime Text 2 入門及技巧
Sublime Text 使用介紹、全套快捷鍵及插件推薦
Sublime Text 3 學習及使用
Sublime Text 3 使用心得
Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學
Perfect Workflow in Sublime 2
6 Ways to Turn Sublime Text Into the Perfect Blogging Tool
Scotch Series
- Best of Sublime Text 3: Features, Plugins, and Settings
- Sublime Text Keyboard Shortcuts
- THE COMPLETE VISUAL GUIDE TO SUBLIME TEXT 3
- Themes, Color Schemes, and Cool Features
- Getting Started and Keyboard Shortcuts
- Plugins Part 1
- Plugins Part 2
Working With Code Snippets In Sublime Text
The Best Plugins for Sublime Text

書籍

Sublime Text 手冊
Sublime Text Unofficial Documentation
Sublime Text Power User
Instant Sublime Text Starter
Mastering Sublime Text
Sublime Productivity

Sublime Text 系列

Sublime Text：學習資源篇
Sublime插件：增強篇
Sublime插件：Markdown篇
Sublime插件：C語言篇

基本使用方法

網絡文章：http://www.vsnote.com/tag/sublime-text-3

網絡教程：http://www.iplaysoft.com/sublimetext.html

Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度，比如下面的演示：?

?
Zen coding下的編碼演示

去年年底，該插件已經改名為Emmet。但Emmet不只改名，還帶來了一些新特性。本文就來直觀地演示給你。?

一、快速編寫HTML代碼?

1.? 初始化?

HTML文檔需要包含一些固定的標簽，比如<html>、<head>、<body>等，現在你只需要1秒鐘就可以輸入這些標簽。比如輸入“!”或“html:5”，然后按Tab鍵：?

html:5 或!：用于HTML5文檔類型
html:xt：用于XHTML過渡文檔類型
html:4s：用于HTML4嚴格文檔類型

2.? 輕松添加類、id、文本和屬性?

連續輸入元素名稱和ID，Emmet會自動為你補全，比如輸入p#foo：?

連續輸入類和id，比如p.bar#foo，會自動生成：?

Html代碼?

<p?class="bar"?id="foo"></p>??

下面來看看如何定義HTML元素的內容和屬性。你可以通過輸入h1{foo}和a[href=#]，就可以自動生成如下代碼：

Html代碼?

<h1>foo</h1>??

<a?href="#"></a>??

3.? 嵌套?

現在你只需要1行代碼就可以實現標簽的嵌套。?

>：子元素符號，表示嵌套的元素
+：同級標簽符號
^：可以使該符號前的標簽提升一行

效果如下圖所示：?

4.? 分組?

你可以通過嵌套和括號來快速生成一些代碼塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下代碼：?

Html代碼?

<div?class="foo">??

??<h1></h1>??

</div>??

<div?class="bar">??

??<h2></h2>??

</div>??

5.? 隱式標簽?

聲明一個帶類的標簽，只需輸入div.item，就會生成<div class="item"></div>。?

在過去版本中，可以省略掉div，即輸入.item即可生成<div class="item"></div>?，F在如果只輸入.item，則Emmet會根據父標簽進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。?

下面是所有的隱式標簽名稱：?

li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中

6.? 定義多個元素?

要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼：?

Html代碼?

<ul>??

??<li></li>??

</ul>??

7.? 定義多個帶屬性的元素?

如果輸入 ul>li.item$*3，將會生成如下代碼：?

Html代碼?

<ul>??

??<li?class="item1"></li>??

??<li?class="item2"></li>??

??<li?class="item3"></li>??

</ul>??

二、CSS縮寫?

1.? 值?

比如要定義元素的寬度，只需輸入w100，即可生成?

Css代碼?

width:?100px;??

除了px，也可以生成其他單位，比如輸入h10p+m5e，結果如下：?

Css代碼?

height:?10%;??

margin:?5em;??

單位別名列表：?

p 表示%
e 表示 em
x 表示 ex

2.? 附加屬性?

可能你之前已經了解了一些縮寫，比如 @f，可以生成：?

Css代碼?

@font-face?{??

??font-family:;??

??src:url();??

}??

一些其他的屬性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項，可以通過“+”符號來生成，比如輸入@f+，將生成：?

Css代碼?

@font-face?{??

??font-family:?'FontName';??

??src:?url('FileName.eot');??

??src:?url('FileName.eot?#iefix')?format('embedded-opentype'),??

?????url('FileName.woff')?format('woff'),??

?????url('FileName.ttf')?format('truetype'),??

?????url('FileName.svg#FontName')?format('svg');??

??font-style:?normal;??

??font-weight:?normal;??

}??

3.? 模糊匹配?

如果有些縮寫你拿不準，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：?

Css代碼?

overflow:?hidden;??

4.? 供應商前綴?

如果輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴，比如輸入trs，則會生成：?

Css代碼?

-webkit-transform:?;??

-moz-transform:?;??

-ms-transform:?;??

-o-transform:?;??

transform:?;??

你也可以在任意屬性前加上“-”符號，也可以為該屬性加上前綴。比如輸入-super-foo：?

Css代碼?

-webkit-super-foo:?;??

-moz-super-foo:?;??

-ms-super-foo:?;??

-o-super-foo:?;??

super-foo:?;??

如果不希望加上所有前綴，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz前綴：?

Css代碼?

-webkit-transform:?;??

-moz-transform:?;??

transform:?;??

前綴縮寫如下：?

w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-

5.? 漸變?

輸入lg(left, #fff 50%, #000)，會生成如下代碼：?

Css代碼?

background-image:?-webkit-gradient(linear,?0?0,?100%?0,?color-stop(0.5,?#fff),?to(#000));??

background-image:?-webkit-linear-gradient(left,?#fff?50%,?#000);??

background-image:?-moz-linear-gradient(left,?#fff?50%,?#000);??

background-image:?-o-linear-gradient(left,?#fff?50%,?#000);??

background-image:?linear-gradient(left,?#fff?50%,?#000);??

三、附加功能?

生成Lorem ipsum文本?

Lorem ipsum指一篇常用于排版設計領域的拉丁文文章，主要目的是測試文章或文字在不同字型、版型下看起來的效果。通過Emmet，你只需輸入lorem 或 lipsum即可生成這些文字。還可以指定文字的個數，比如lorem10，將生成：?

引用 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

四、定制?

你還可以定制Emmet插件：?

添加新縮寫或更新現有縮寫，可修改snippets.json文件
更改Emmet過濾器和操作的行為，可修改preferences.json文件
定義如何生成HTML或XML代碼，可修改syntaxProfiles.json文件

五、針對不同編輯器的插件?

Emmet支持的編輯器如下（鏈接為針對該編輯器的Emmet插件）：?

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat?（通過“Install Mixin”對話框添加)
Komodo Edit/IDE?（通過Tools → Add-ons菜單添加)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

轉載于:https://www.cnblogs.com/tham/p/6827439.html

總結

以上是生活随笔為你收集整理的Sublime text 入门学习资源篇及其基本使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Animator动画XML实现
下一篇： python之路---03 整型 boo