Az egészségügyi szolgáltatások digitalizációja évek óta zajlik, de az elmúlt néhány évben a mesterséges intelligencia (AI) megjelenése új szintre emelte ezt a folyamatot. A fogászat különösen érzékeny terület, hiszen itt a technológia nem csupán a szakmai...
Mi az a CSS?
A CSS az angol „cascading style sheets” kifejezés rövidítése, ami magyarul „egymásba ágyazott stíluslapokat” jelent. A hangsúly a „stíluson” van – míg a HTML a weblap szerkezetét határozza meg (főcímek, bekezdések, stb.), és lehetővé teszi, hogy különböző elemeket (képek, videók) ágyazz webes dokumentumodba, addig a CSS a weblap vizuális stílusáért felel – az oldal elrendezéséért, a színekért, a betűkészletekért, azok méretéért, és így tovább.
Mi az a CSS?
A CSS az angol „cascading style sheets” kifejezés rövidítése, ami magyarul „egymásba ágyazott stíluslapokat” jelent. A hangsúly a „stíluson” van – míg a HTML a weblap szerkezetét határozza meg (főcímek, bekezdések, stb.), és lehetővé teszi, hogy különböző elemeket (képek, videók) ágyazz webes dokumentumodba, addig a CSS a weblap vizuális stílusáért felel – az oldal elrendezéséért, a színekért, a betűkészletekért, azok méretéért, és így tovább.
A webes böngészők megvizsgálják a dokumentum (weblap) CSS kódját, és ez alapján jelenítik meg a HTML elemeket.
Hogy működik a CSS?
A CSS a különböző HTML elemek kinézetét határozza meg. Nézzünk erre egy példát egy egyszerű bekezdéssel, ami szintén egy HTML elem:
[p]Ez itt egy példa.[/p]
Ha ezt a bekezdést pirossá szeretnéd alakítani vastag betűkkel, akkor a következő CSS kódot kell használnod:
p { color:red; font-weight:bold; }
A példában a „p” az úgynevezett CSS választó. A választó a CSS kód azon része, amely meghatározza, hogy a CSS kód mely HTML elemre vonatkozik, tehát hogy melyik elem stílusát változtatja meg. A választó a baloldali, nyitó kapcsos zárójel elé kerül.
A kapcsos zárójelek közötti részt nevezzük meghatározásblokknak – itt helyezkednek el a különböző azok az úgynevezett tulajdonságok, amelyeket a CSS kóddal szeretnénk megváltoztatni, illetve a tulajdonságok értékei. A fenti példában a color az első tulajdonság, ami a színt határozza meg, értéke pedig red, tehát piros. A második tulajdonság a font-wieght¸ ami a szöveg vastagságát határozza meg, értéke pedig bold, azaz félkövér.
Tehát ezek alapján a p (bekezdés) szövege piros lesz, és félkövér.
A CSS alkalmazásának módszerei: külső, belső, és sorközi CSS
A CSS kódot – ami a HTML-hez hasonlóan egyszerű szöveges formában van jelen a dokumentumokban – többféleképpen is lehet alkalmazni. Mindhárom módszernek megvannak a maga előnyei.
Külső (external) CSS
A külső stíluslapokat .css fájlok formájában kell elmenteni. Az így elmentett stílust egy egész webhely összes oldalára alkalmazni lehet anélkül, hogy a CSS kódot minden [head] szakaszába be kellene írni. Ez sokkal átláthatóbbá teszi az oldalak forráskódját, ráadásul elegendő csak egyetlen fájlt módosítani, és a változások az összes oldalon láthatóvá válnak, amelyek ugyan azt a CSS fájlt használják.
Külső CSS fájl használata esetén a fájlra a weboldal [head] szakaszában kell hivatkozni:
[head]
[link rel=”stylesheet” type=”text/css” href=stiluslap.css”]
[/head]
Belső (internal) CSS
A CSS kód belső alkalmazására akkor lehet szükség, amikor egyetlen oldal stílusát szeretnéd megváltoztatni, és nem akarod, hogy a stílus minden oldalra vonatkozzon. Ha például webhelyed oldalai egyetlen külső CSS fájlra hivatkoznak, de van egy oldalad, ami teljesen más stílust igényel, akkor belső CSS-t érdemes használni.
Belső CSS használatakor a CSS kód közvetlenül a forráskódban, a [head] szakaszban helyezkedik el:
[head]
[style]
body { background-color:white; }
p { font-size:12px; color:black; }
[/style]
[/head]
Sorközi (inline) CSS
Sorközi CSS-re akkor van szükség, amikor egy oldal egy-egy elemének szeretnél csupán egyedi stílust adni. Például ha az oldal külső, vagy belső CSS kódot használ (ami az oldal összes azonos elemét befolyásolja), de van egy különálló elem, amiben szeretnéd felülírni ezt a stílust, akkor sorközi CSS-t kell alkalmazni.
A sorközi CSS szintén közvetlenül forráskódban szerepel, de nem a [head] szakaszban kell megadni, hanem annak az elemnek a címkéjében, amit meg szeretnél változtatni vele.
[p style=”font-size:14px; color:white;”]Ez egy példa![/p]
Gyakori kérdések
Mi az a CSS?
A CSS (azaz „egymásba ágyazott stíluslapok”) a webhelyek vizuális stílusát határozza meg.
Hogy működik a CSS?
A CSS segítségével egy weboldal HTML elemeinek különböző paramétereket szabhatunk meg. Ezek a paraméterek kihathatnak az elemek színére, méretére, és egyéb vizuális tulajdonságaira.
Hogyan alkalmazható CSS?
A külső CSS egy külön fájl, amire a HTML weblap hivatkozik. A belső CSS a HTML dokumentum fejrészében helyezkedik el. az Inline CSS a HTML dokumentum szövegében közvetlenül helyezkedik el.
