Emmet的一些基本文件

2021-06-13 07:47:15 字數 1775 閱讀 2376

由於這個比較火,所以看了下官方文件並翻譯了一部分常用的code。具體資料,請檢視官方文件

html

1. > : 下一級 

2. + : 同級

3. ^ :向上一級

div+div>p>span+em^bq 相當於bq是span的上級,即與p同級。

可以使用多個^表示上上級,例如:div+div>p>span+em^^bq , 這樣bq相當於與div同級了

4. * :乘法運算(迴圈多少次)

例如:生成乙個ul含有6個li. ul>li*6

5.() :小組,自己理解,很簡單

6.#name 表示id="name" , .name 表示class="name"

7. 表示屬性

例如 a[href=test rel=2]  , td[title="hello world!" colspan=3]

8. $ : 表示自增符

例如:乙個ul含有5個li,其中要每個li的class都不同。ul>li.item$*5

9.自減符 在$後加上 @-

例如:ul>li.item$@-*5

10.{} 表示新增文字符號

例如:a

css1.css縮寫

例如:m10-20 開啟等於 margin: 10px 20px;預設是px,如果想換,可以m10e-20e 開啟等於 margin: 10em -10em;

如果想用負的,m-10--10 開啟等於 margin: -10px -10px;

value aliases

p → %

e → em

x → ex

you can use aliases instead of full units:

w100p → width: 100%

m10p30e5x → margin: 10% 30em 5ex

2.顏色的表示

例如:c#3 -> color: #333;. 

#代表分隔符

例如:bd5#0s expands to border: 5px #000 solid;

#區分開了5和s(solid)

you can write one, two, three or six characters as color value:

#1 → #111111

#e0 → #e0e0e0

#fc0 → #ffcc00

3.!important

!符號代表 !important

p!+m10e!

...will produce

css3

原來寫css3,因為不同的瀏覽器有不同的核心,需要直接乙個乙個寫字首,現在我們可以用字首 - 來解決這個問題。

例如: -bdrs 

開啟後是

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

如果我們只想作用於火狐或者chrome核心,可以在字首符那裡加特定字元。

w: webkit

m: moz

s: ms

o: o

-w-trf 開啟後是

-webkit-transform: ;

transform: ;

顏色漸變功能

lg(left, #fc0 30%, red) 預設是backgroud-image.我們還可以改變為border-image等.

border-image:lg(left, #fc0 30%, red) 

關於HTML的一些基本文字標記

1.主要包括5組標籤 2.段落元素 段落內的換行符將會忽略 段落內的多個空格將被乙個空格所代替 3.換行元素 不插入空行來進行換行 4.預排版標籤 保留空白字元 能夠以正常排版方式顯示空格與段落 字型是等寬字型 5.分級標題 標題格式化顯示,值越大,字越小 是預設的文字字型大小 6.文字塊引用 7....

HTML筆記 一些基本文字標籤

標題1h1 lorem ipsum dolor sit amet consectetur,adipisicing elit.p 段落標籤。網頁中並列p標籤之間空一行。style color blueviolet loremspan ipsum dolor sit amet consecteturp ...

Scz的一些文件

2004 10 13 09 32 windows rootkit相關鏈結 2004 02 11 23 02 windows檔案系統驅動程式程式設計相關鏈結 2004 02 11 22 54 eeye的自認為值得收集的部分鏈結 2004 02 02 18 14 panic unix system cr...