A CSS vagy a Cascading Style Sheets a modern weboldal tervezésénél használják, hogy a vizuális megjelenést egy oldalra alkalmazzák. Bár a HTML létrehozza az oldal struktúráját és a Javascript kezeli a viselkedésformákat, a webhely megjelenése és érzése a CSS domainje. Ezeknél a stílusoknál a leggyakrabban külső stíluslapokat alkalmaznak, de a CSS stílusokat egyetlen, egyedi elemre is alkalmazhatja az úgynevezett "inline stílusok" használatával.
Az inline stílusok olyan CSS-stílusok, amelyeket közvetlenül az oldal HTML-jében alkalmaznak. Ennek a megközelítésnek mind az előnyei, mind a hátrányai vannak. Először nézzük meg pontosan hogyan íródnak ezek a stílusok.
Inline stílust írhat
Egy inline CSS stílus létrehozásához elkezdjük a stílushoz hasonló stílus írásmódját írni, mint egy stíluslapban, de egy sorban kell lennie. Különböző tulajdonságokat különítsen el egy pontosvesszővel, mint ahogy egy stíluslapban.
háttér: #ccc; szín: #fff; határ: szilárd fekete 1px;
Helyezze el ezt a stílussorozatot a stílus stílusának attribútumán belül. Ha például ezt a stílust a HTML-ben szereplő bekezdésre kívánja alkalmazni, az elem így fog kinézni:
Ebben a példában ez a bekezdés világos szürke háttérrel (azaz amit #ccc renderelne), fekete szöveggel (a # 000-es színtől) és egy 1 képpontos fekete fekete szegéllyel jelenik meg a bekezdés mind a négy oldalán .
Inline stílusok előnyei
A Cascading Style Sheet kaszkádának köszönhetően az inline stílusok a dokumentum legmagasabb precedenciájával vagy sajátosságával rendelkeznek. Ez azt jelenti, hogy mindaddig alkalmazni fogják, amire a külső stíluslapon diktáltak (kivéve az egyetlen kivételt, hogy olyan stílusok kapnak, amelyek a fontos nyilatkozatot adják a lapnak, de ez nem olyan dolog, amit a gyártási oldalakon meg kellene tenni, ha elkerülhető).
Az egyetlen olyan stílus, amely magasabb prioritású, mint az inline stílusok, maguk az olvasók által alkalmazott felhasználói stílusok . Ha problémái vannak a módosítások érvényesítésében, próbáljon meg egy inline stílust beállítani az elemen. Ha a stílusok még mindig nem inline stílussal jelennek meg, akkor tudod, hogy valami más történik.
Az inline stílusok egyszerűek és gyorsak hozzáadásra, és nem kell aggódnia a megfelelő CSS-választó írásakor, mivel közvetlenül hozzáadja a stílusokat a módosítani kívánt elemhez (ez az elem lényegében felváltja azt a választót, amelyet egy külső stíluslapra ír ). Nem kell teljesen új dokumentumot létrehoznia (mint a külső stíluslapokhoz), vagy új elemet kell szerkesztenie a dokumentum fejrészében (mint a belső stíluslapokhoz). Csak add hozzá a stíluselemet, amely csaknem minden HTML elemen érvényes. Ezek mindegyike oka annak, hogy kísértést érhetsz el az inline stílusok használatával kapcsolatban, de tudnod kell ezen megközelítés néhány nagyon jelentős hátrányára is.
Inline stílusok hátrányai
Mivel az inline stílusok a legmeghatározóbbak a kaszkádban, át tudják haladni azokat a dolgokat, amelyeket nem akartok. Azt is tagadják a CSS egyik legerősebb aspektusát -, hogy egy központi CSS-fájlból rengeteg és sok weboldalt állíthatnak be, hogy a jövőbeli frissítések és stílusváltozások sokkal könnyebben kezelhetők legyenek.
Ha csak inline stílusokat kellett használnia, a dokumentumok hamar felborultak és nagyon nehéz fenntartani. Ennek az az oka, hogy az inline stílusokat minden elemre alkalmazni kell, amelyen azokat szeretné. Tehát, ha azt szeretné, hogy az összes bekezdésnek legyen az "Arial" betűtípus családja , akkor minden egyes
címkét hozzá kell adnia a dokumentumhoz. Ez mind a karbantartási munkát, mind az olvasó számára a tervezőhöz és a letöltéshez szükséges időt tartalmazza, hiszen a webhely minden oldalán módosítania kell ezt a betűtípuscsaládot. Másik megoldásként, ha különálló stíluslapot használ, előfordulhat, hogy egy helyszínen megváltoztathatja azt, és minden oldalt megkapja a frissítést.
Igazság szerint ez egy lépés hátra a webes tervezésben - vissza a címke napjain!
Az inline stílusok másik hátránya, hogy nem lehet pszeudo-elemeket és osztályokat létrehozni velük. Például külső stíluslapokkal meg lehet szerkeszteni a horgonycímke meglátogatott, felfüggesztett, aktív és csatolt színeit , de inline stílussal, minden olyan stílus, ami maga a kapcsolat, mert ez a stílusattribútum .
Végül javasoljuk , hogy ne használjon inline stílusokat a weboldalakhoz, mert problémákat okoznak, és az oldalak sokkal több munkát végeznek a karbantartás érdekében. Csak akkor használjuk őket, amikor a fejlesztés során gyorsan meg akarjuk nézni a stílust. Ha egyszer megvizsgáljuk az adott elem egyik elemét, áthelyezzük külső stíluslapunkra.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard.