A weboldalak számos egyedi darabból állnak, beleértve a képeket, szöveget és különböző dokumentumokat. Ezek a dokumentumok nem csak azokat tartalmazzák, amelyek különböző oldalakról, például PDF-fájlokról kapcsolódhatnak, hanem azokhoz a dokumentumokhoz is, amelyeket maguk az oldalak szerkesztésére használnak, például a HTML-dokumentumokat, hogy meghatározzák az oldalak szerkezetét és a CSS (Cascading Style Sheet) dokumentumokat diktálni az oldal megjelenését. Ez a cikk átkeredi a CSS-be, amely magában foglalja, hogy mi az, és hol használják a weboldalakat ma.
A CSS History Lecke
A CSS-t először 1997-ben fejlesztették ki a webfejlesztők számára, hogy meghatározhassák az általuk létrehozott weboldalak vizuális megjelenését. Arra tervezték, hogy a webes szakemberek elválaszthassák a webhely kódjának tartalmát és szerkezetét a vizuális dizájntól, ami eddig még nem volt lehetséges.
A struktúra és a stílus szétválasztása lehetővé teszi a HTML számára, hogy több funkciót töltsön be eredetileg - a tartalom jelölésénél, anélkül, hogy aggódnia kellene az oldal megtervezésétől és elrendezésétől, amit általában a "megjelenés és érzés" az oldalon.
A CSS 2000-ig nem érte el a népszerűséget, amikor a webböngészők többet kezdtek használni, mint a jelölőnyelv alapszintű betűtípusait és színeit. Ma minden modern böngésző támogatja az összes CSS 1. szintet, a CSS 2. szintjének nagy részét és még a CSS 3. szint legtöbb aspektusát is. Mivel a CSS folyamatosan fejlődik és új stílusokat vezet be, a webböngészők elkezdték végrehajtani azokat a modulokat, amelyek új CSS-támogatást nyújtanak ezekbe a böngészőkbe és a webes tervezőknek hatalmas új stíluseszközöket biztosítanak a munkához.
Sok (év) múltban voltak olyan webes tervezők, akik nem akarták használni a CSS-t a weboldalak tervezéséhez és fejlesztéséhez, de ez a gyakorlat ma már távol van az iparágtól. A CSS ma már széles körben használt szabvány a webes tervezésben, és nehéz lenne megtalálni az iparágban dolgozó embereket, akiknek nem volt legalább egy alapvető ismerete ennek a nyelvnek.
A CSS egy rövidítés
Amint már említettük, a CSS kifejezés a "Cascading Style Sheet" kifejezést jelenti. Tüntessük meg ezt a kifejezést egy kicsit, hogy részletesebben elmagyarázzuk, mit tesznek ezek a dokumentumok.
A "stíluslap" szó maga a dokumentumra utal (mint például a HTML, a CSS fájlok valójában csak szöveges dokumentumok, amelyeket számos program szerkeszthet). A stíluslapokat évek óta használják a dokumentumtervezéshez. Ezek a nyomtatványok vagy az online elrendezés műszaki leírása. A nyomdászok régóta használják a stíluslapokat annak érdekében, hogy a formatervezési minták pontosan a specifikációiknak megfelelően legyenek nyomtatva. A weblap egy stíluslapja ugyanazt a célt szolgálja, de a hozzáadott funkcióval azt is elmondja, hogy a böngésző hogyan jeleníti meg a dokumentumot. A CSS stíluslapok ma is használhatják a médiakérdéseket, így megváltoztathatják, hogy az oldal hogyan keres különböző eszközöket és képernyőméreteket. Ez hihetetlenül fontos, mivel lehetővé teszi, hogy egyetlen HTML-dokumentumot másképp rendezzen el a képernyőhöz való hozzáféréshez.
A Cascade a "lépcsőzetes stíluslap" kifejezetten különleges része. A webes stíluslap célja, hogy a lapon egy sor stílusban kaszkadjon, mint egy folyó vízesés felett. A folyó vizében a vízesés minden szikláját eltalálja, de csak azok, amelyek alul vannak, pontosan befolyásolják a víz áramlását. Ugyanez igaz a kaszkádra a weboldal stíluslapjaiban.
Minden weblapot legalább egy stíluslap érinti, még akkor is, ha a webdesigner nem alkalmaz stílusokat. Ez a stíluslap a felhasználói ügyintéző-stíluslap - amelyet alapértelmezett stílusnak is neveznek, amelyet a webböngésző az oldal megjelenítésére használ, ha más utasításokat nem nyújtanak. Például alapértelmezés szerint a hiperhivatkozások kék színűek, és aláhúzva vannak. Ezek a stílusok a webböngésző alapértelmezett stíluslapjából származnak. Ha a webdesigner más utasításokat ad meg, azonban a böngészőnek tudnia kell, mely utasításoknak van elsőbbsége. Minden böngészőnek saját alapértelmezett stílusai vannak, de ezek közül az alapértelmezések közül sok (például a kék aláhúzott szöveges linkek) megoszlanak az összes vagy a legtöbb nagy böngészőben és verzióban.
A böngésző alapértelmezés szerinti másik példájánál a böngészőnkben az alapértelmezett betűtípus a "Times New Roman", amely a 16-os méretben jelenik meg. Azonban a lapok majdnem egyetlen oldalán sem jelenik meg a kijelző a betűtípuscsaládban és -méretben. Ez azért van így, mert a kaszkád meghatározza, hogy a második stíluslapok, amelyeket a tervezők maguk határoztak meg, újradefiniálják a betűméretet és a családot, felülírva a webböngésző alapértelmezéseit. Minden olyan stíluslap, amelyet egy weboldalhoz hoztál létre, sokkal bonyolultabb lesz, mint a böngésző alapértelmezett stílusai, ezért ezek az alapértelmezések csak akkor alkalmazandók, ha a stíluslap nem felülírja őket. Ha a hivatkozásokat kékre és aláhúzottra szeretné állítani, akkor nem kell semmit tennie, mivel ez az alapértelmezett, de ha webhelyének CSS-fájlja azt mondja, hogy a hivatkozásoknak zöldnek kell lenniük, akkor a szín felül fogja hagyni az alapértelmezett kék színt. Az aláhúzás ebben a példában marad, mivel másképp nem rendelkezik.
Hol használják a CSS-t?
A CSS segítségével meg lehet határozni, hogy a weboldalak mikor nézzenek más médiában, mint egy webböngésző. Például létrehozhat egy nyomtatási stíluslapot, amely meghatározza, hogy a weblap hogyan nyomtatható ki. Mivel a weboldal elemei, mint pl. A navigációs gombok vagy a webes űrlapok nincsenek a nyomtatott oldalon, a nyomtatási stílus lapot használhatja arra, hogy "kikapcsolja" azokat a területeket, amikor egy oldalt kinyomtat.Bár sok helyszínen gyakorlatilag nem létezik gyakori gyakorlat, a nyomtatási stíluslapok létrehozásának lehetősége erőteljes és vonzó (tapasztalataink szerint a legtöbb internetes szakember nem ezt teszi egyszerűen azért, mert a webhely költségvetése nem igényel további munkát ).
Miért fontos a CSS?
A CSS az egyik leghatékonyabb eszköz, amelyet a webes tervezõ megtanulhat, mert ezzel befolyásolhatja a webhely teljes vizuális megjelenését. A jól írt stíluslapok gyorsan frissíthetők, és lehetővé teszik a webhelyek számára, hogy megváltoztassák a képernyőn megjelenő fontossági sorrendet, ami viszont értéket és figyelmet fordít a látogatókra anélkül, hogy változtatásokra lenne szükség az alapul szolgáló HTML jelöléshez.
A CSS legfőbb kihívása az, hogy nagyon kevés tanulni - és a böngészők napról napra változik, ami ma jól működik, holnap nem lesz értelme, mert az új stílusok támogatottak lesznek, mások pedig okkal vagy másként .
Mivel a CSS képes kaszkálni és kombinálni, és figyelembe véve, hogy a különböző böngészők hogyan értelmezhetik és hajthassák végre az irányelveket eltérő módon, a CSS nehezebb lehet, mint a sima HTML. A CSS is változik a böngészőkben oly módon, hogy a HTML valóban nem. Miután elkezdted használni a CSS-t, látni fogod, hogy a stíluslapok hatalmának kihasználása hihetetlen rugalmasságot nyújt a weblapok elrendezésének és a megjelenés és megjelenés meghatározásának. Útközben olyan stílusok és megközelítések "zacskó trükkök" fognak összegyűjteni, amelyek a múltban dolgoztak neked, és amelyekre a jövőben új weblapokat építhetsz.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard a 7/5/17
