Ściąga Emmet / VS Code
1. HTML – podstawy
| Co chcesz zrobić | Skrót | Co dalej |
|---|---|---|
| Podstawowa struktura HTML | ! |
wpisz ! i naciśnij Tab lub Enter |
| Utworzyć tag | div |
wpisz nazwę taga i Tab |
| Utworzyć tag | img |
wpisz nazwę taga i Tab |
| Utworzyć tag | p |
wpisz nazwę taga i Tab |
| Tag z klasą | a.test |
daje tag a z klasą test |
| Tag z wieloma klasami | p.test1.test2 |
daje p z dwiema klasami |
| Tag z ID | span#test |
daje span z ID test |
| Tag z klasą i ID | span.test#test |
daje element z klasą i ID |
| Dodać atrybut | a[href=mmcschool.pl] |
tworzy link z atrybutem href |
| Dodać tekst | p{Testowe zdanie} |
tworzy paragraf z tekstem |
| Tworzenie rodzeństwa | p+div+a |
elementy obok siebie |
| Tworzenie dzieci | ul>li>a |
elementy zagnieżdżone |
| Wiele elementów | p*10 |
tworzy 10 paragrafów |
| Numerowany tekst | li*3>{Element nr $} |
tworzy listę z numeracją |
Źródło:
2. CSS – skróty Emmeta
| Co chcesz uzyskać | Skrót | Wynik |
|---|---|---|
| padding 10px | p10 |
padding: 10px; |
| padding 10 20 30 40 | p10--20-30-40 |
padding: 10px 20px 30px 40px; |
| margin-top 30% | mt30p |
margin-top: 30%; |
| font-size 6rem | fz6r |
font-size: 6rem; |
| font-size 32px | fz32 |
font-size: 32px; |
| position relative | posr |
position: relative; |
| color #fff | c#f |
color: #fff; |
| width 75% | w75p |
width: 75%; |
Źródło:
3. Lorem – tekst przykładowy
| Co chcesz zrobić | Skrót | Wynik |
|---|---|---|
| Wstawić lorem | lorem |
przykładowe zdanie / tekst |
| Wstawić 3 słowa | lorem3 |
trzy słowa lorem ipsum |
| Wstawić 3 zdania / bloki | lorem*3 |
trzy razy lorem |
Źródło:
4. Skróty edytora – Windows / Mac
| Funkcja | Windows | Mac |
|---|---|---|
| Komentarz | Ctrl + / |
Cmd + / |
| Duplikat linijki | Shift + Alt + ↓ |
Shift + Option + ↓ |
| Przesuwanie linijki w dół | Alt + ↓ |
Option + ↓ |
| Wiele kursorów | Alt + Click |
Option + Click |
| Zaznaczanie tych samych wyrazów | Ctrl + D |
Cmd + D |
| Wyszukiwanie i podmiana | Ctrl + H |
Cmd + Option + F |
Źródło:
5. Najkrótsza wersja do zapamiętania
| Typ | Skrót | Znaczenie |
|---|---|---|
| HTML | ! |
szkielet strony |
| HTML | > |
dziecko w środku |
| HTML | + |
element obok |
| HTML | * |
powielenie |
| HTML | {} |
tekst |
| HTML | [] |
atrybut |
| HTML | . |
klasa |
| HTML | # |
ID |
| CSS | p10 |
padding 10px |
| CSS | mt30p |
margin-top 30% |
| CSS | fz32 |
font-size 32px |
| CSS | c#f |
kolor biały |
| CSS | w75p |
width 75% |