A weboldalak különálló darabokból állnak, képek, szöveg és különféle dokumentumok. Ezek a dokumentumok nem csak olyanokat tartalmaznak, amelyekre különböző oldalakról lehet hivatkozni, például a PDF fájlokról, hanem azokat a dokumentumokat is, amelyeket maguk az oldalak készítenek, például HTML dokumentumok az oldal és CSS (Cascading Style Sheet) dokumentumok felépítésének meghatározása az oldal megjelenésének diktálása érdekében. Ez a cikk elmélyül a CSS-ben, kitérve arra, hogy mi ez és hol használják ma a weboldalakon.
CSS történelemóra
A CSS-t először 1997-ben fejlesztették ki, hogy a webfejlesztők meghatározhassák az általuk létrehozott weboldalak vizuális megjelenését. Célja volt, hogy lehetővé tegye a webes szakembereknek külön a tartalom és a weboldal kódjának felépítése a látványterv alapján, ami erre az időre még nem volt lehetséges.
A szerkezet és a stílus szétválasztása lehetővé teszi a HTML számára, hogy az eredetileg alapuló funkciót - a jelölést - nagyobb mértékben hajtsa végre tartalom, anélkül, hogy aggódnia kellene magának az oldalnak a kialakításáért és elrendezéséért, ami közismert nevén a oldalt.
A CSS alakulása
A CSS népszerűsége csak 2000 körül nőtt, amikor a webböngészők többet kezdtek használni, mint a jelölőnyelv alapvető betűtípusai és színvonala. Ma minden modern böngésző támogatja az összes CSS 1. szintet, a legtöbb CSS 2. szintet és még a 3. szintű CSS legtöbb aspektusát is. Amint a CSS folyamatosan fejlődik és új stílusokat vezetnek be, a webböngészők elkezdték a modulok bevezetését amelyek új CSS-támogatást hoznak ezekbe a böngészőkbe, és hatékony webes tervezőeszközöket adnak a működésükhöz val vel.
(Sok) évben volt olyan webes tervező, amely nem volt hajlandó használni a CSS-t a weboldalak tervezése és fejlesztése, de ez a gyakorlat ma már csak az iparból származik. A CSS ma már széles körben elterjedt szabvány a webdesignban, és nehéz lenne megtalálni bárkit, aki manapság az iparban dolgozik, és aki legalább nem értett ehhez a nyelvhez.
A CSS rövidítés
Mint már említettük, a CSS kifejezés "kaszkád stíluslap". Bontjuk le ezt a kifejezést egy kicsit, hogy teljesebben elmagyarázzuk, mit csinálnak ezek a dokumentumok.
A "stíluslap" szó magára a dokumentumra utal (mint például a HTML, a CSS fájlok is csak szöveges dokumentumok, amelyeket különféle programokkal lehet szerkeszteni). A stíluslapokat évek óta használják a dokumentumok tervezéséhez. Ezek az elrendezés műszaki specifikációi, akár nyomtatott, akár online. A nyomdatervezők már régóta használnak stíluslapokat annak biztosítására, hogy terveik pontosan az előírásaiknak megfelelően nyomtassák ki. A weboldal stíluslapja ugyanazt a célt szolgálja, de azzal a további funkcióval, hogy megmondja a webböngészőnek, hogyan kell megjeleníteni a megtekintett dokumentumot. Ma a CSS stíluslapok is használhatók média lekérdezések hogy megváltoztassa az oldal keresési módját különböző eszközök és képernyőméretek. Ez hihetetlenül fontos, mivel lehetővé teszi, hogy egyetlen HTML-dokumentumot a hozzáféréshez használt képernyő függvényében másképp jelenítsenek meg.
Vízesés a "lépcsőzetes stíluslap" kifejezés igazán különleges része. Webes stíluslap célja, hogy a lap stílusainak sorozatán keresztül lépkedjen, mint egy folyó a vízesés felett. A folyó vize eléri a vízesés összes szikláját, de csak az alján lévőek befolyásolják pontosan a víz áramlási helyét. Ugyanez vonatkozik a weboldal stíluslapjainak lépcsőzetesére is.
A tervezői stíluslapok felülírják a böngésző alapértelmezett stíluslapjait
Minden weblapra vonatkozik legalább egy stíluslap, még akkor is, ha a webdesigner nem alkalmaz semmilyen stílust. Ez a stíluslap az a felhasználói ügynök stíluslapja - más néven alapértelmezett stílusok, amelyeket a webböngésző egy oldal megjelenítéséhez fog használni, ha más utasítások nincsenek megadva. Például alapértelmezés szerint a hiperhivatkozások kék színűek és aláhúzottak. Ezek a stílusok egy webböngésző alapértelmezett stíluslapjáról származnak. Ha azonban a webdesigner más utasításokat ad meg, akkor a böngészőnek tudnia kell, hogy mely utasítások vannak elsőbbségben. Minden böngészőnek megvan a saját alapértelmezett stílusa, de ezek közül az alapértelmezettek közül sok (például a kék aláhúzott szöveges hivatkozások) meg van osztva az összes vagy a legtöbb böngészőben és verzióban.
Egy másik példa a böngésző alapértelmezésére, a webböngészőnkben az alapértelmezett betűtípus a következő:Times New Roman"jelenik meg 16-os méretben. Szinte egyik oldal sem látogatja meg a kijelzőt ebben a betűcsaládban és méretben. A kaszkád ugyanis meghatározza, hogy a második stíluslapot, amelyet maguk a tervezők állítanak be, kell újradefiniálni a betűméretet és a család, felülírva a böngésző alapértelmezett beállításait. A weblapokhoz létrehozott stíluslapok pontosabbak lesznek, mint a böngésző alapértelmezett stílusai, ezért ezek az alapértelmezett értékek csak akkor érvényesek, ha a stíluslapok nem írják felül azokat. Ha azt szeretné, hogy a linkek kékek és aláhúzottak legyenek, akkor nem kell semmit tennie, mivel ez az alapértelmezett, de ha webhelye CSS-fájlja szerint a linkeknek zöldnek kell lenniük, akkor ez a szín felülírja az alapértelmezett kék színt. Az aláhúzás ebben a példában megmarad, mivel Ön másként nem adott meg.
Hol használják a CSS-t?
A CSS arra is felhasználható, hogy meghatározza, hogyan kell kinéznie a weboldalaknak, ha a médián kívül más adathordozón tekintik meg őket böngésző. Létrehozhat például egy nyomtatási stíluslapot, amely meghatározza, hogyan nyomtasson a weboldal. Mivel a weboldalelemeknek, például a navigációs gomboknak vagy a webes űrlapoknak, nem lesz célja a kinyomtatott oldalon, a nyomtatási stíluslap segítségével ezeket a területeket "ki lehet kapcsolni" egy oldal nyomtatásakor. Noha sok webhelyen nem igazán bevett gyakorlat, a nyomtatási stíluslapok létrehozásának lehetősége erőteljes és vonzó (a mi tapasztalat - a legtöbb internetes szakember ezt nem egyszerűen azért teszi, mert egy webhely költségvetési köre nem teszi szükségessé ezt a további munkát kész).
Miért fontos a CSS?
A CSS az egyik leghatékonyabb eszköz, amelyet egy webdesigner megtanulhat, mert ezzel befolyásolhatja a weboldal teljes vizuális megjelenését. A jól megírt stíluslapok gyorsan frissíthetők, és lehetővé tehetik az oldalak számára, hogy megváltoztassák azt, ami a vizuálisan prioritást élvez képernyő, amely viszont értéket és fókuszt mutat a látogatók számára, anélkül, hogy bármilyen változtatást kellene végrehajtani a mögöttes HTML jelölés.
A CSS fő kihívása az, hogy elég sok mindent kell megtanulni - és a böngészők minden nap változóval, ami ma jól működik lehet, hogy holnap nincs értelme, mivel az új stílusok támogatottá válnak, mások pedig egy okból kiesnek vagy kiesnek egy másik.
A CSS tanulási görbe megéri
Mivel a CSS képes lépcsőzni és kombinálni, és figyelembe véve, hogy a különböző böngészők hogyan tudják értelmezni és végrehajtani az irányelveket eltérően, a CSS nehezebben megtanulható, mint a sima HTML. A CSS a böngészőkben is úgy változik, hogy a HTML valóban nem. Amint elkezdi használni a CSS-t, látni fogja, hogy a stíluslapok erejének kihasználása hihetetlen rugalmasságot biztosít Önnek a weboldalak elrendezésében és azok megjelenésének és érzetének meghatározásában. Útközben összegyűjt egy "trükk zsákot" olyan stílusokból és megközelítésekből, amelyek a múltban beváltak, és amelyekhez újból fordulhat. új weboldalakat készíthet a jövőben.