Stílusos weboldal készítése CSS kódok használatával
Egy sikeres honlap esetében legalább annyira fontos a stílusos megjelenés, mint a megfelelő tartalom. A weboldaladat HTML elemekkel tudod feltölteni képekkel, szöveggel, linkekkel, azonban ezek kinézetét a CSS kódok segítségével lehet formázni. Olyan dolgokra gondolok itt, mint a szöveg színe, mérete, betűtípusa, a fényképek szélessége, kerete, a háttér színe és így tovább. Görgess lejjebb, és tekintsd meg, mik az alapvető CSS kódok!
1. Mi az a CSS és hogyan kapcsolódik a HTML-hez?
A CSS az angol Cascading Style Sheets kifejezés rövidítése, amely magyarul egymásba ágyazott stíluslapokat jelöl. A HTML és a JavaScript mellett ez a másik alapvető programozási nyelv a weboldalak készítése során, amelyet 1996-ban adtak ki nyilvánosan először.
Fő funkciója a HTML dokumentumokban található webes tartalmak stilizálása, vagyis esztétikus megjelenést kölcsönöz a weboldal különböző részeinek.
A HTML kódokkal tudunk elhelyezni tartalmi elemeket a weboldalunkon, például egy szöveget vagy egy képet. A CSS kódokkal pedig ezeket az elemeket tudjuk formázni megjelenés szempontjából: például a szöveg és a háttér színét megváltoztatni, vagy a képeknek keretet készíteni.
Röviden összefoglalva:
- HTML = weboldal tartalmának leírása;
- CSS = a tartalmi elemek kinézetének formázása.
Hiszen minden weboldal-tulajdonos arról álmodik, hogy saját webhelye minél esztétikusabb és egyedibb legyen. Ebben nyújtanak segítséget az egymásba ágyazott stíluslapok.
A CSS kódok használatával nincs szükség minden egyes HTML elem egyenkénti formázására, mert ezt megoldhatjuk egyetlen kóddal is akár.
Ez itt például egy egyszerű szöveges bekezdés HTML kódja:
<p>Kiszervezett Marketing</p>
Tegyük fel, hogy nemcsak simán fekete betűkkel akarjuk ezt megjeleníteni, hanem egy kicsit fel is akarjuk turbózni, mondjuk narancssárga színnel és nagy betűmérettel.
Ekkor jön képbe a CSS kódok használata:
p {color: orange; font-size: 35px;}
Ezt a következő módszerrel kell beilleszteni a HTML dokumentumba:
<head>
<style>
p {color: orange; font-size: 35px;}
</style>
</head>
<body>
<p>Kiszervezett Marketing</p>
</body>
Eredmény:
Kiszervezett Marketing
Lassan kezdheted érteni, hogy a HTML és a CSS kódok hogyan egészítik ki egymást annak érdekében, hogy egy felhasználóbarát, vizuálisan és funkcionálisan is jól működő weboldalt tudjunk létrehozni.
2. Mért hasznosak a CSS kódok?
Rengeteg különböző formázást, stílushoz igazítást lehet végrehajtani CSS kódok segítségével. Néhány példa:
- Keretek létrehozása fényképekhez;
- Szöveg méretének és színének meghatározása;
- Háttérszín beállítása;
- Betűtípusok közötti váltogatás;
- Szövegdoboz kialakítása;
- Tartalom elhelyezkedésének igazítása;
- Sormagasság és térköz személyre szabása;
- Margó és háttérkép beállítása.
3. Hogyan épülnek fel a CSS kódok?
A CSS kódok mindig egy adott HTML elemre vonatkoznak, például egy bekezdésre, címsorra, képre, stb. Ezt az elemet fogják formázni, módosítani a kinézetét.
Először is meg kell adnunk az elemet, amit stilizálni szeretnénk, majd {…} formátumban a hozzá tartozó tulajdonságot/tulajdonságokat (pl. betűszín és betűméret beállítása), és a vonatkozó értékeket (pl. narancssárga betűszín és 50px betűméret).
A fenti példában egy HTML bekezdést formáztunk narancssárga színűre és 50-es betűmérettel. Természetesen nem muszáj mindig két értéket megadni, elég egy is.
4. Hogyan adjunk hozzá CSS kódokat a weboldalunkhoz?
Tekintsünk át néhány módszert arra vonatkozóan, hogy miképpen tudjuk alkalmazni a CSS-t honlapunk tartalmainak a formázásához.
4.1. Beágyazás HTML elemek kezdőcímkéjében
Az egyik legegyszerűbb, mégis legtöbb munkát igénylő módszer. Ebben az esetben minden egyes formázni kívánt HTML elem kezdő tag részébe kell beillesztenünk a stílusértékeket.
Tehát egyenként a kezdőcímkékbe beírjuk a CSS tulajdonságokat és a hozzájuk tartozó értékeket. Ezt nevezzük inline CSS-nek. Például:
<h2 style="color: green;">Ez a címsor zöld színű lesz</h2>
A fenti példában egy H2-es címsort formáztunk zöld színűre úgy, hogy a <h2> kezdőcímkébe ágyaztuk bele a style=”stílusértékek;” formátummal a CSS kódokat.
Ha ezt meg szeretnénk tenni más címsorokkal is, akkor azt minden egyes HTML elem esetén külön-külön végre kell hajtanunk. Ezért elég időigényes ez a módszer.
4.2. Stílusbeállítások megadása a HTML fájl <head> részében
Ha ezt a lehetőséget választod, akkor némileg könnyebb dolgod lesz: a stílusbeállításokat külön kódsorral adhatod meg a HTML dokumentum <head> részében.
Ezzel a megoldással minden egyes olyan HTML elemre vonatkozik majd az adott formázás, amelyre az adott stílusértékeket beállítottuk (pl. bekezdések vagy képek), ha ezek a HTML fájl <body> részében megtalálhatók.
<!DOCTYPE html>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Minden egyes bekezdés kék színű lesz.</p>
<p>Ugye, hogy kék lett ez is?</p>
</body>
</html>
A <style>…</style> címkék közé kell beírnunk, hogy az egész HTML dokumentumban szereplő összes adott típusú elemhez milyen stílusértékeket szeretnénk csatolni.
A kód eredménye az alábbi lesz:
Minden egyes bekezdés kék színű lesz.
Ugye, hogy kék lett ez is?
A fenti példa használatával nem kell egyenként minden bekezdéshez odaírnunk, hogy piros színű és 20-as betűméretű legyen, elég csak a HTML fejrészében elhelyeznünk a CSS kódot.
4.3. Külső CSS fájl összekapcsolása a HTML dokumentummal
Ebben az esetben a HTML dokumentum és a CSS fájl elkülönül egymástól, nincs semmi kapcsolat a két kód között.
Az összekötést úgy tudjuk megoldani, hogy egy kódsorral megjelöljük a CSS fájlt a HTML <head> részében.
<link rel=stylesheet type="text/css" href="CSS.fájl.elérési.útvonala">
A href= rész után kell beillesztenünk a CSS kódokat tartalmazó fájl elérési útvonalát.
4.4. CSS fájl importálása külső linkről
Hasonlóan az előző módszerhez, most is a HTML dokumentum <head> részében kell elhelyeznünk egy kódot, amely egy URL címről fogja alkalmazni a CSS kódokat.
@import url(CSS.fájl.linkje);
Ezek voltak a CSS kódok használatának lehetőségei. Most pedig nézzük a legfontosabb és leggyakrabban alkalmazott CSS parancsokat.
5. A leggyakoribb CSS kódok
A következőkben alapvető CSS parancsokat fogunk kipróbálni. A kódokat a 4.1. vázlatpontban bemutatott forma szerint fogom használni, vagyis HTML elemek kezdőcímkéjébe ágyazva.
5.1. Háttérszín és háttérkép meghatározása CSS használatával
A háttér színét az alábbi kóddal tudod beállítani:
<div style="background-color:red;"<p>Ide piros háttér kerül.</p></div>
Háttérképet beállítani pedig a képre mutató linkkel lehetséges:
<div style="background-image:url('https://media.istockphoto.com/photos/blue-sky-with-white-clouds-nature-background-picture-id1125295327?k=20&m=1125295327&s=612x612&w=0&h=KAs_-jMfnsUQ1W4P1Uus8wX1WV53FFb12-iCFV6EcBY=');"<p>Ide <br> felhők <br> fognak <br> kerülni <br> háttérként.</p></div>
A két CSS kód eredménye itt látható:
felhők
fognak
kerülni
háttérként.
5.2. Betűtípus és betűméret beállítása CSS kódokkal
Korábban már volt szó a betűk színének a megváltoztatásáról, most nézzünk meg néhány egyéb formázási lehetőséget.
Betűtípus meghatározására szolgáló CSS kód:
<p style="font-family:Lucida Handwriting;">Ez itt kézírásos betűtípus lesz.</p>
Betűméret beállítása:
<p style="font-size:45px;">Ez egy elég nagy betűméret lesz.</p>
A fenti két kódnak ez lesz a végeredménye:
Ez itt kézírásos betűtípus lesz.
Ez egy elég nagy betűméret lesz.
5.3. Szöveg színének, árnyékának és elhelyezkedésének formázása
A szövegszín módosításával már találkozhattunk:
<p style="color:green;">Zöld színű szöveg.</p>
A szövegárnyék egy érdekes hatást kelt:
<p style="text-shadow:2px 2px orange;">Narancssárga árnyékkal rendelkező szöveg.</p>
A szövegigazítás egy újabb CSS paranccsal érhető el:
<p style="text-align:right;">Jobbra igazított szöveg.</p>
Végeredményként ezt a három formázást kaptuk:
Zöld színű szöveg.
Narancssárga árnyékkal rendelkező szöveg.
Jobbra igazított szöveg.
5.4. Szöveg- és képkeretek szélessége, színe
A CSS kódokkal létrehozhatunk szövegdobozokat, illetve képkereteket is. Ezeket tudjuk formázni, stilizálni.
A keret szélességét és színét egy kódon belül beállíthatjuk:
<p style="border:3px solid red;">Ezt a bekezdést 3 pixel vastagságú <br> piros keret veszi körbe.</p>
5.5. Képméretek szabályozása CSS segítségével
Megszabhatjuk, hogy milyen legyen a weboldalunkon megjelenő képek szélessége és magassága.
<img src="https://kiszervezettmarketing.hu/wp-content/uploads/2022/07/Online_marketing_boritokep-700x394.jpg" height="500" width="900">
Most pedig megadjuk ugyanezt a fényképet eltérő méretekkel:
<img src="https://kiszervezettmarketing.hu/wp-content/uploads/2022/07/Online_marketing_boritokep-700x394.jpg" height="300" width="500">
Szemmel jól látható, mennyire különbözik a két kép szélessége és magassága. Így mindig a weboldalunkhoz tudjuk igazítani a fényképek méretét.
5.6. Margók beállítása CSS kódokkal
Hozzáadhatunk margókat egyszerre mind a négy oldalhoz, vagy külön-külön is. Ezek határozzák meg, hogy a lap szélétől hány százalékban lesz behúzva a szöveg vagy egyéb tartalom.
<p style="margin:15%;">A margó 15%-os mind a négy oldalon.</p>
<p style="margin-top:15%;">Csak a felső oldalon van 15%-os margó.</p>
Ezt nehéz lenne szemléltetni, mivel csak a szöveg igazodna más helyre, körülötte pedig egy nagy üres tér helyezkedik el a behúzás miatt.
6. Összefoglaló
A CSS kódok minden weboldal fontos alkotóelemei, mert formailag módosítják a HTML kódok kinézetét.
Beállíthatjuk a szövegek, képek és egyéb tartalmi elemek elhelyezkedését, szegélyét, színét, méretét, árnyékát, margóját, és így tovább.
Az egymásba ágyazott stíluslapok tehát jó megjelenést kölcsönöznek a honlapunk tartalmainak, vizuálisan keltik fel a látogatók érdeklődését, növelik a felhasználói élményt.
Kérlek juttasd el a cikket a barátaidnak is, amennyiben hasznosnak találtad. Köszönöm! 🙂
Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu
7. Gyakran ismételt kérdések és válaszok
Egy weboldal forráskódjának részét képező kódok, amik szövegek, képek és egyéb tartalmi elemek stílusos megjelenését biztosítják. Például: magasság, szélesség, árnyék, szegély, szín, stb.
HTML kódok és JavaScript.
Javítják oldalunk megjelenését, felkeltik a látogatók érdeklődését a vizuális tartalmakkal, növelik a felhasználói élményt.
