Bevezetés a CSS-be
A lépcsőzetes stíluslapok, amelyek jobban ismertek CSS néven, egy nagyon egyszerűen megtervezett eljárás, melynek segítségével a weboldalak sokkal ábrázolhatóbbá válnak. A CSS lehetővé teszi stílusok hozzárendelését a weboldalak testreszabásához. A stílus funkció kihasználásának legjobban az a része, hogy a CSS független a weblapok létrehozásának HTML módjától. Az alapvető különbség a hipertext jelölőnyelv és a lépcsőzetes stíluslapok között az, hogy az előbbiekről ismert, hogy a táj szerkezeti megjelenítését nyújtják a weboldalnak, míg az előbbieknek erőteljes színkódolási és stílustechnikákat kell biztosítaniuk. Egyszerre több weboldal elrendezésének vezérlésére szolgál. Az összes külső stíluslapot CSS-fájlok formájában tároljuk.
A CSS fő alkotóelemei
A fenti szakaszban tanulmányoztuk a CSS bevezetését, tehát most a CSS fő alkotóelemeivel foglalkozunk:
1. Könnyen karbantartható: Ha globális változtatásokat szándékozik végrehajtani, egyszerűen változtassa meg a stílusot, és minden más weboldal minden elemét automatikusan frissítse.
2. A CSS időtakarékos: Csak egyszer írhatja a szkriptet, és ugyanazt a lapot újból felhasználhatja, amennyit csak akar.
3. Kiváló stílusok a natív felhasználói felülethez képest: A CSS viszonylag sokkal szélesebb attribútum- és listasort tartalmaz, ha összehasonlítjuk a HTML-vel. Ezért a HTML oldal világosabb megjelenésű lehet, mint a normál HTML attribútumokhoz képest.
4. Könnyű a keresőmotorokkal: A CSS nagyon kényelmes és könnyen olvasható stíluslap. Ez azt jelenti, hogy a keresőmotoroknak nem kell sok erőfeszítést tennie a szöveg elolvasása érdekében.
5. Hatékony gyorsítótár-tárolás: A CSS felhasználható a webes alkalmazások helyi tárolására offline offline gyorsítótár-mechanizmus segítségével, amely felhasználható az offline webhelyek megtekintésére.
A CSS jellemzői
Amint a CSS bevezetésében és annak komponensében tárgyaltunk. most megismerjük a CSS tulajdonságait. A CSS fő jellemzői közé tartoznak a stílusszabályok, amelyeket az ügyfél böngésző értelmez és alkalmaz a dokumentum különféle elemeire. A főbb jellemzők a következők:
- A stílusszabály szelektor-összetevőből és deklarációs blokk-összetevőből áll.
- A választóval arra a HTML-összetevőre mutathatunk, amelyet stílusba akarunk hozni.
- A deklarációs blokkban egy vagy több deklaráció található, pontosvesszővel együtt.
- Minden elhelyezett deklarációnak van CSS tulajdonságneve, pontosvesszője és értéke. Például a szín a tulajdonság, az érték pedig piros színű. A betűméret a tulajdonság, a 15 képpont értéke.
- A CSS deklaráció pontosvesszővel ér véget, és ezeket a blokkokat göndör zárójelek veszik körül.
- A CSS szelektorokat használják HTML elemek keresésére, amelyek az elem nevére, azonosítójára, attribútumára, osztályára és egyezőre épülnek.
- Egy egyedi elemet az elem azonosítója választ ki.
- Ha az adott elemet egy adott azonosítóval szeretné kiválasztani, akkor a # függvényt és az id attribútumot kell használni.
- Ha egy adott osztályhoz tartozó elemeket szeretné kiválasztani, akkor a pont karaktert és a névosztályt meg kell írni.
- Univerzális választó: Ha nem érdekli egy adott típusú elem kiválasztása, akkor az univerzális választó egyszerűen megegyezik az elem nevével.
- Elem választó: Ezek a választók az elem neve alapján választják ki az elemet.
- Csökkenő szelektor: Ha egy adott elem egy másik elem belsejében fekszik, akkor ezt leszármazó szelektornak nevezik.
- ID választó: Ez a választó a HTML elem azonosítóját használja, hogy egy adott elem kiválasztható legyen.
- Osztályválasztók: Kiválasztja az elemet egy adott osztályattribútummal.
- Választók csoportosítása: Jó lehetőség a választók csoportosítása a kód minimalizálása érdekében. Mindegyik választógombot vesszővel együtt kell használni a választók csoportosításához.
A CSS alkalmazásai
A CSS bevezetésének és a CSS jellemzőinek megismerése után megtanuljuk a CSS alkalmazását. A HTML háromféle módon érhető el a CSS-hez:
1. Inline:
A beépített stíluslapot csak annak a címkének a befolyásolására használják, amelyben benne van. Ez lényegében azt jelenti, hogy az oldal apró részletei megváltoztathatók az oldal általános elrendezésének vagy az oldal összes elemének megváltoztatása nélkül. Ez akkor előnyös, ha mindent megtesz a külső oldalakon, akkor további részletekkel kell felcímkéznie a részleteket. Az inline felülbírálja a külsőt, ami azt jelenti, hogy a kis részletek megváltoztathatók. Ez felülírja a belső teret is.
2. Belső:
A belső csak akkor használható, ha egy apró változtatást szeretne hozzáadni az egyetlen címkébe. Ennek oka az, hogy az inline csak az abban található egyetlen címkét érinti, míg a belső stílus a HTML dokumentum fejére kerül. Ez azt jelenti, hogy ha testreszabja az oldalt, akkor az összes szükséges változtatást csak görgetéssel láthatja. A belső stílus a címkék belsejébe kerül. Összehasonlítva: ez a megjelenés szélesebb, egyszerű, elegáns és szervezett a különálló stílus és címkézés miatt.
3. Külső
A külső stíluslapokat arra használják, hogy az emberek formázhassák és újból létrehozhassák weblapjaikat egy teljesen más dokumentumon. Ez valójában azt jelenti, hogy két vagy több munkahelye is lehet, mivel egynél több stíluslap beágyazható a dokumentumba, így sokkal tisztább munkaterületet eredményez. A stíluslap ebben az esetben könnyen elérhető lenne, ami hatalmas előnye, de másrészt a külső lapon végrehajtott változtatások az összes szülőlapot érintik, amelyhez kapcsolódik.
A CSS előnyei és hátrányai:
A CSS előnyei
- Készülék kompatibilitás
- A weboldal gyorsabb felépítése
- Könnyen karbantartható
- Konzisztens és spontán változások
- Újrapozíciós képesség
- Javítja a keresőmotor képességét a weboldalak feltérképezésére
A CSS hátrányai
- Böngészőkön keresztül kapcsolódó kérdések
- Sebezhető
- Többszintű problémák
- A biztonság hiánya
- szilánkosodás
Következtetés - Bevezetés a CSS-be
A CSS ad hatalmat a webdesignernek, hogy egyetlen fájl felhasználásával széles körű változtatásokat lehessen végezni egyetlen weboldal összes oldalának webes elrendezésében. Segít a könnyű és kreatív weboldal megtervezésében, nagy érzékenységgel és a megjelenés során a közönség számára. Ezért a mai weboldalak szerves része, amelyet nem szabad figyelmen kívül hagyni.
Ajánlott cikkek
Ez egy útmutató a CSS bevezetéséhez. Itt tárgyaltuk a CSS fő alkotóelemeit, jellemzőit, előnyeit és hátrányait. A következő cikkeket is megnézheti további információkért -
- A CSS interjúval kapcsolatos kérdések és válaszok
- Bevezetés a GIT-be
- Bevezetés a PHP-be
- Bevezetés a JavaScript-be