Emmet Flashcards
Jak szybko utworzyć podstawową strukturę HTML?
Skrót Emmet: !
Rozwija się do:
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<meta></meta>
<title>Document</title>
</head>
<body>
</body>
</html>
Jak utworzyć listę z 3 punktami?
Skrót Emmet: ul>li*3
Rozwija się do:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Jak stworzyć tabelę z 3 wierszami i 4 kolumnami?
Skrót Emmet: table>tr3>td4
Rozwija się do:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Jak dodać formularz z polem tekstowym i przyciskiem?
Skrót Emmet: form>input:text+input:submit
Rozwija się do:
<form>
<input></input>
<input></input>
</form>
Jak utworzyć listę nieuporządkowaną z trzema linkami?
Skrót Emmet: ul>li*3>a
Rozwija się do:
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Jak stworzyć zestaw divów z klasą container zawierających po jednym elemencie p z tekstem?
Skrót Emmet: .container>p{Tekst}*3
Rozwija się do:
<div><p>Tekst</p></div>
<div><p>Tekst</p></div>
<div><p>Tekst</p></div>
Jak stworzyć obraz z alternatywnym tekstem?
Skrót Emmet: img[src=”url_obrazu.jpg” alt=”Opis obrazu”]
Rozwija się do:
<img></img>
Jak utworzyć strukturę artykułu z nagłówkiem, paragrafem i listą nieuporządkowaną?
Skrót Emmet: article>h2+p+ul>li*3
Rozwija się do:
<article>
<h2></h2>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</article>
Jak dodać sekcję z nagłówkiem i dwoma divami zawierającymi po jednym obrazie?
Skrót Emmet: section>h1+div*2>img
Rozwija się do:
<section>
<h1></h1>
<div><img></img></div>
<div><img></img></div>
</section>
Jak stworzyć formularz z polami: tekst, email, data i przyciskiem submit?
Skrót Emmet: form>input:text+input:email+input:date+input:submit
Rozwija się do:
<form>
<input></input>
<input></input>
<input></input>
<input></input>
</form>
Jak szybko zastosować margines i padding dla elementu?
Skrót Emmet w CSS: m10+p20
Rozwija się do:
margin: 10px;
padding: 20px;
Jak ustawić szerokość, wysokość i tło elementu jednocześnie?
Skrót Emmet w CSS: w100p+h200p+bg#c
Rozwija się do:
width: 100%;
height: 200px;
background: #ccc;
Jak szybko zastosować styl dla tekstu z wieloma właściwościami?
Skrót Emmet w CSS: fz20+lh30+ttu
Rozwija się do:
font-size: 20px;
line-height: 30px;
text-transform: uppercase;
Jak stworzyć animację z kluczowymi klatkami?
Skrót Emmet w CSS: @kf|
Rozwija się do:
@keyframes my-animation {
from { }
to { }
}
Jak zastosować cień do tekstu?
Skrót Emmet w CSS: ts4-4-4-#000
Rozwija się do:
text-shadow: 4px -4px 4px #000;
