Útmutató az Emmet rövidítések használatához CSS-ben – utolsó módosítás: 2024.06.01.
Emmet rövidítések szintaxisa:
Az Emmet egy automatikus kódkiegészítő, ami meggyorsítja a HTML és CSS kódolást. A rövidítés beírása után a rövidítés feloldása a TAB billentyűvel történik. A rövidítés első része a tulajdonság nevének rövidítése, majd egy kettőspont után (közvetlenül!) az érték rövidítése következik. Néhány esetben nincs külön érték megadása, ekkor nem kell a kettőspont! Számértékek megadása: Amennyiben egész számot írsz be, pixelben jelenik meg az érték, ha tizedes törtet írsz, em lesz a mértékegység. A tizedesjel a pont. Ha egész szám esetén az em mértékegységet szeretnéd használni, akkor a beírt szám után írj egy e-betűt, vagy tizedes alakban add meg a számot. Ha százalékos értéket szeretnél megadni, akkor a szám után írj egy p-betűt, vagy egy %-jelet. A rövidítés beírása után a rövidítés feloldása a TAB billentyűvel történik. Az alábbiakban csak a feladatsorok megoldásához szükséges kódokat ismertetem!Háttér formázása
Háttérszín rövidítése: bgc - background-color; A kettőspont után írd be a szükséges szín nevét vagy kódját, a kód feloldása után módosítás már nem szükséges: bgc:red ⇒ background-color: red; bgc:#f99 ⇒ background-color: #f99; Háttérkép rövidítése: bgi - background-image; bgi ⇒ background-image: url('|'); A kód feloldása után a kurzor az url értéknél van, ide kell beírnod a megadott kép elérési útját, nevét, kiterjesztését. Háttérkép ismétlése: bgr - background-repeat; A kettőspont után írd be a szükséges tájolás kódját, a kód feloldása után módosítás már nem szükséges: bgr:ry ⇒ background-repeat: repeat-y; bgr:rx ⇒ background-repeat: repeat-x;Szöveg formázása
Szövegszín rövidítése: c - color; A kettőspont után írd be a szükséges szín nevét vagy kódját, a kód feloldása után módosítás már nem szükséges: c:red ⇒ color: red; c:#066 ⇒ color: #066; Szövegigazítás rövidítése: ta - text-align; A kettőspont után írd be a szükséges igazításirány rövidítését, a kód feloldása után módosítás már nem szükséges: ta:l ⇒ text-align: left; ta:r ⇒ text-align: right; ta:c ⇒ text-align: center; Szövegdíszítés rövidítése: td - text-decoration; A kettőspont után írd be a díszítés megnevezésének rövidítést, a kód feloldása után módosítás már nem szükséges: td:n ⇒ text-decoration: none; td:u ⇒ text-decoration: underline; Szövegátalakítás rövidítése: tt - text-transform; A kettőspont után írd be az átalakítás rövidítést, a kód feloldása után módosítás már nem szükséges: tt:u ⇒ text-transform: uppercase; Betűköz rövidítése: lts - letter-spacing; A kettőspont után egy számot kell beírnod: lts:10 ⇒ letter-spacing: 10px; lts:3e ⇒ letter-spacing: 3em; lts:2.0 ⇒ letter-spacing: 2em; lts:5p ⇒ letter-spacing: 5%; lts:15% ⇒ letter-spacing: 15%;Karakterek formázása
Betűtípus rövidítése: ff - font-family; Két fő betűtípus családot egyszerű rövidítéssel meg lehet adni, itt nem kell kettősponttal elválasztani a név-érték párt! ffa ⇒ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; fft ⇒ font-family: 'Times New Roman', Times, Baskerville, Georgia, serif; Ha más betűtípust szeretnél megadni: ff ⇒ font-family: serif; az érték lesz kijelölve, majd a C+S leütése után megjelenő betűtípus listából választhatsz. Betűstílus rövidítése: fs - font-style; A kettőspont után írd be a stílus rövidítését, a kód feloldása után módosítás már nem szükséges: fs:i ⇒ font-style: italic; Betűvastagság rövidítése: fw - font-weight; A kettőspont után írd be a vastagítás nevének rövidítést, a kód feloldása után módosítás már nem szükséges: fw:b ⇒ font-weight: bold; Betűváltozat rövidítése: fv - font-variant; A kettőspont után írd be a betűváltozat nevének rövidítést, a kód feloldása után módosítás már nem szükséges: fv:sc ⇒ font-variant: small-caps; Betűméret rövidítése: fz - font-size; A kettőspont után egy számot kell beírnod: fz:36 ⇒ font-size: 36px; fz:1.3 ⇒ font-size: 1.3em; fz:2e ⇒ font-size: 2em; fz:40% ⇒ font-size: 40%; fz:10p ⇒ font-size: 10%; Listajelek rövidítése: list - list-style-type; A kettőspont után írd be a listajelnév rövidítését, a kód feloldása után módosítás már nem szükséges: list:n ⇒ list-style-type: none; list:c ⇒ list-style-type: circle; list:s ⇒ list-style-type: square; Listajelkép rövidítése: lisi - list-style-image; A kód feloldása után a kurzor pozíciójába írd be: url(''), az aposztrófok között add meg a szükséges kép elérési útját, nevét, kiterjesztését: lisi ⇒ list-style-image: |;Táblázatok formázása
Szélesség rövidítése: w - width; A kettőspont után egy számot kell beírnod: w:70 ⇒ width: 70px; w:100p ⇒ width: 100%; w:10e ⇒ width: 10em; Minimális szélesség rövidítése: miw - min-width; miw:100 ⇒ min-width: 100px; Függőleges igazítás rövidítése: va - vertical-align; A kettőspont után írd be az igazítás rövidítését, a kód feloldása után módosítás már nem szükséges: va:t ⇒ vertical-align: top; Szegély rövidítése: bd - border A border összetett tulajdonság, az első értéke a vonalvastagság, a második a vonal díszítése, harmadik a vonal színkódja, az egyes értékeket kötőjellel kell elválasztani: bd:1-dt-red ⇒ border: 1px dotted red; Szegélyszín rövidítése: bdc - border-color; Oldalanként eltérő szegély esetén a border értéknél meg kell adni az állandó értékeket, vonalvastagság, vonal díszítése: bd:1-dt ⇒ border: 1px dotted; A szegélyszínnél pedig meg kell adni az oldalankénti színeket. Sorrend: felső, jobb, alsó, bal. bdc:red-#345678-red-#345678 ⇒ border-color: red #345678 red #345678; Oldalankénti szegélyek rövidítése: bd - border; A bd rövidítés után az oldalak, top (t), bottom (b), right(r) és left(l) angol szavak rövidítését kell megadni. A kettőspont után adható meg az értékek rövidítése kötőjellel elválasztva. bdt:1-s-red ⇒ border-top: 1px solid red; bdl:2-s-#fff ⇒ border-left: 2px solid #fff; Megjegyzés: Az oldalankénti szegély megadásánál a dt rövidítést nem tudta megfelelően kibontani, ekkor írd ki teljes szóval! bdl:1-dotted-#666 ⇒ border-left: 2px dotted #666;Margók beállításai
Margó rövidítése: m - margin; A feladatsorokban sokféle margóbeállítás szerepel, ezek típusait sorolom fel. Ha weblap minden oldalára 0px méretű margó beállítása szükséges: m:0 ⇒ margin: 0; Ha a weblap alsó és felső margója 0 px, jobb és bal margója pedig annyi legyen, hogy a szöveg az oldal közepére kerüljön: m:0-a ⇒ margin: 0 auto; Ha a weblap alsó és felső margója megadott px kell legyen, jobb és bal margója pedig annyi legyen, hogy a szöveg az oldal közepére kerüljön. A ? helyére a szükséges számadatot kell beírni: m:?-a ⇒ margin: ?px auto; Ha a weblap minden oldalára ugyanazt a megadott értékű margót kell beállítani. A kettőspont után egy számot kell beírnod: m:10 ⇒ margin: 10px; Ha a weblap alsó és felső margójának, valamint a bal és jobb margójának egy-egy megadott értéket kell beállítani. A ?-ek helyére két különböző számadatot kell beírni: m:?-? ⇒ margin: ?px ?px; Ha a weblap minden oldalára külön-külön meg van adva a margó értéke. A ?-ek helyére négy (különböző) számadatot kell beírni: m:?-?-?-? ⇒ margin: ?px ?px ?px :px; Ha a weblap egy oldalára kell beállítani a megadott margót: A margin rövidítés után a szükséges oldal angol nevének rövidítését kell megadni. A kettőspont után egy számot kell beírnod: ml:30 ⇒ margin-left: 30px;Bélés beállításai
Bélés rövidítése: p - padding; Ha weblap minden oldalára ugyanaz megadott méretű bélés beállítása szükséges. A kettőspont után egy számot kell beírnod: p:10 ⇒ padding: 10px; Ha a weblap alsó és felső bélésének, valamint a bal és jobb bélésének egy-egy megadott értéket kell beállítani. A ?-ek helyére két különböző számadatot kell beírni: p:?-? ⇒ padding: ?px ?px; Ha a weblap egy oldalára kell beállítani a megadott margót: A padding rövidítés után a szükséges oldal angol nevének rövidítését kell megadni. A kettőspont után egy számot kell beírnod: pl:30 ⇒ padding-left: 30px;Vissza a feladatsorszámok kiválasztásáhozKódok összekapcsolása
Egy kódsorban több emmet kód is írható, ezeket +(plusz)jellel kell összekapcsolni, az egyes kódok kibontva külön-külön sorba kerülnek: c:red+fw:b ⇒ color: red;↵(sortörés) font-weight: bold;