Mik azok a Cascading Style Sheets (CSS)?
Olvassa el az alábbiakban a lépcsőzetes stíluslapok működésének teljes magyarázatát. Alkalmazásainkat az oldal tetején jelenítjük meg, így könnyen megtalálható és használható. Ha ezt a cikket e-mailben vagy hírfolyamban olvassa, kattintson a linkre tömörítse a CSS-t.
Hacsak nem fejleszt webhelyeket, előfordulhat, hogy nem fogja teljesen megérteni a lépcsőzetes stíluslapokat (CSS). A CSS egy stíluslap-nyelv, amellyel egy dokumentum megjelenését és formázását írják le HTML or XML. A CSS segítségével megadható a különböző elemek stílusa, például betűtípus, szín, térköz és elrendezés. A CSS lehetővé teszi, hogy elkülönítse a HTML-dokumentum megjelenítését a tartalmától, így könnyebben karbantarthatja és frissítheti webhelye vizuális stílusát.
CSS nyelvi szerkezet
A választó a stílusozni kívánt HTML-elem, és a ingatlan és a érték határozza meg az elemre alkalmazni kívánt stílusokat:
selector {
property: value;
}Például a következő CSS mindent megtesz <h1> az oldalon lévő elemek piros színűek, és a betűméretük 32 képpont:
CSS
h1 {
color: red;
font-size: 32px;
}teljesítmény
Cím
CSS-t is megadhat egy elem egyedi azonosítójához:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}teljesítmény
Vagy alkalmazzon egy osztályt több elemre:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}teljesítmény
akarok kiemelése egy szó a span tagban.
A CSS-t háromféleképpen veheti fel HTML-dokumentumába:
- Inline CSS, a
styleattribútum egy HTML elemen - Belső CSS, a
<style>elem a<head>HTML-dokumentumának - Külső CSS, külön .css fájl használatával, amely a HTML-dokumentumhoz kapcsolódik a
<link>elem a<head>HTML-dokumentumának
Reszponzív CSS
A CSS hihetetlenül rugalmas és használható az elemek megjelenítésének a képernyőfelbontás alapján történő beállítására, így ugyanazt a HTML-t használhatja, de megépítheti fogékony az eszköz felbontásához:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS tömörítés
A fenti példában látható, hogy van egy megjegyzés, egy médialekérdezés és több stílus is, amelyek szóközöket és soremeléseket használnak a CSS nézetének rendszerezéséhez. Remek gyakorlat, ha a CSS-t a webhelyen kicsinyíti vagy tömöríti, hogy csökkentse a fájlméretet, és ezt követően a stílus kéréséhez és megjelenítéséhez szükséges időt. Ez nem kevés… a fenti példák némelyikén több mint 50%-os megtakarítást láthat.
Számos szerverkonfiguráció kínál olyan eszközöket, amelyek menet közben automatikusan tömörítik a CSS-t, és gyorsítótárazzák a minimált fájlt, így nem kell manuálisan megtenni.
Mi az SCSS?
Pimasz CSS (SCSS) egy CSS-előfeldolgozó, amely további funkciókat és szintaxist ad a CSS-nyelvhez. Kibővíti a CSS képességeit azáltal, hogy lehetővé teszi olyan változók, mixinek, függvények és egyéb szolgáltatások használatát, amelyek nem állnak rendelkezésre a szabványos CSS-ben.
SCSS előnyei
- Továbbfejlesztett karbantarthatóság: A változók használatával az értékeket egy helyen tárolhatja, és újra felhasználhatja a stíluslapon, így könnyebbé válik a stílusok karbantartása és frissítése.
- Jobb szervezés: A mixinekkel csoportosíthatja és újra felhasználhatja a stíluskészleteket, így a stíluslap rendezettebb és könnyebben olvasható.
- Megnövelt funkcionalitás: Az SCSS számos olyan funkciót tartalmaz, amelyek nem állnak rendelkezésre a szabványos CSS-ben, mint például a függvények, vezérlőstruktúrák (pl. if/else) és aritmetikai műveletek. Ez dinamikusabb és kifejezőbb stílust tesz lehetővé.
- Jobb teljesítmény: Az SCSS-fájlokat CSS-be fordítják, ami javíthatja a teljesítményt azáltal, hogy csökkenti a böngésző által elemezni kívánt kód mennyiségét.
SCSS hátrányok
- Tanulási görbe: Az SCSS szintaxisa eltér a szabványos CSS-től, és ezt az új szintaxist meg kell tanulnia, mielőtt hatékonyan tudná használni.
- További összetettség: Bár az SCSS rendszerezettebbé és könnyebben karbantarthatóvá teheti a stíluslapot, további bonyolultságot is bevezethet a kódbázisba, különösen, ha nem ismeri az új funkciókat és szintaxist.
- Eszközök: Az SCSS használatához fordítóprogramra lesz szüksége, amely lefordítja az SCSS-kódot CSS-re. Ez további beállítást és szerszámozást igényel, ami egyes fejlesztők számára akadályt jelenthet a belépésre.
Az alábbi példában az SCSS kód változókat használ az értékek tárolására ($primary-color és a $font-size), amely az egész stíluslapon újra felhasználható. Az ebből az SCSS-kódból előállított CSS-kód egyenértékű, de nem tartalmazza a változókat. Ehelyett a változók értékeit közvetlenül a CSS használja.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Az SCSS egy másik jellemzője, amelyet ebben a példában mutatunk be, a beágyazott stílusok. Az SCSS kódban a h1 stílusok vannak beágyazva a body stílusokat, ami a szabványos CSS-ben nem lehetséges. Amikor az SCSS-kódot lefordítják, a beágyazott stílusok külön stílusokká bővülnek a CSS-kódban.
Összességében az SCSS számos előnnyel rendelkezik a normál CSS-hez képest, de fontos figyelembe venni a kompromisszumokat, és kiválasztani a megfelelő eszközt a projekthez az Ön igényei és korlátai alapján.
