CSS
Mi az a CSS? • A CSS a Cascading Style Sheets rövidítése (sorba kapcsolódó stíluslapok) • A stílussal adhatod meg, hogy miként jelenjenek meg a HTML elemek • A stílusokat általában stíluslapokon (Style Sheets) tároljuk • A stílusokat a HTML 4.0-ban vezették be azért, hogy megoldjanak egy problémát • A külső stíluslapok (External Style Sheets) használatával sok munkát spórolhatunk meg • A külső stíluslapokat a CSS fájlokban tároljuk • A különböző stílus definíciók sorba kapcsolódnak
A stílusok használata egy általános problémára jelent megoldást Ahogy a két legnagyobb böngésző - egyre több elemet és tulajdonságot adott hozzá az eredeti HTML specifikációhoz, egyre nehezebb volt olyan WEB-lapokat készíteni, ahol a tartalom és a forma elkülöníthető volt. Hogy megoldja ezt a problémát, a World Wide Web Consortium (W3C) hozzáadta a STÍLUSOKAT a HTML 4.0 definíciójához.
A stíluslapok használatával munkát és időt takaríthatunk meg A stíluslapok – csakúgy, mint a HTML 3.2-ben a font elem és a color tulajdonság - azt határozzák meg, hogy HOGYAN jelenjenek meg a HTML elemek. A stíluslapokat általában egy külső .css fájlban tároljuk. A külső stíluslapok használatával elérhetjük, hogy több weblap megjelenését egyszerre meg tudjuk változtatni úgy, hogy a .css fájlban megváltoztatunk néhány sort. A weblapokon ehhez semmilyen változtatást nem kell elvégeznünk!
A különböző helyeken megadott stílusok felülírják egymást Stílusokat többféle módon is megadhatunk. Beírhatjuk közvetlenül az elemekhez a style tulajdonságot használva, vagy készíthetünk a weblap elejére egy belső stíluslapot, de akár egy külső .css fájlban is eltárolhatjuk a stílusokat.
Felülírási sorrend
Melyik stílust fogja használni a böngésző, ha több helyen is megadtuk a stílusokat? 1. A böngésző alapértelmezése 2. Külső stíluslapokon megadott stílusok (külső .css fájlban) 3. Belső stíluslapokon megadott stílusok (a <head> elemen belül) 4. Közvetlenül megadott stílusok (magán a HTML elemen belül, a style tulajdonságban)
Hogyan és hová írjuk a CSS kódot? Szintaktika elemnév {tulajdonság: érték} A szelektor általában annak a HTML elemnek a neve, amelynek a megjelenését meg szeretnénk változtatni. Utána kapcsos zárójeleken belül megadhatjuk a tulajdonságot amit meg szeretnénk változtatni, majd egy kettőspont után az értéket:
Példa body {color: black} Megjegyzés: Ha az érték több szóból áll, mindig tegyük idézőjelek vagy aposztrófok közé: p {font-family: "sans serif"}
Példa 2 Megjegyzés: Több tulajdonság-érték párost is megadhatunk, egymástól pontosvesszőkkel elválasztva: p {text-align:center;color:red} Ha olvashatóbbá szeretnénk tenni a CSS kódot, írjunk minden tulajdonságot új sorba: p{ text-align: center; color: black; font-family: arial}
Csoportosítás Az elemek nevét csoportosíthatjuk is, tehát egymástól vesszőkkel elválasztva megadhatjuk több elem nevét is, amire a beállításokat vonatkoztatni szeretnénk: h1,h2,h3,h4,h5,h6 { color:red}
Osztályok megadása
Osztályok megadásával ugyanannak az elemnek többféle megjelenítését is megadhatjuk: p.right {text-align: right} p.center {text-align: center}
A HTML dokumentumban a fenti osztályokra a következőképp hivatkozhatunk <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned.
Egy HTML elemnél csak egy osztályt választhatunk ki Egy HTML elemnél csak egy osztályt választhatunk ki. Az alábbi példa HELYTELEN: <p class="right" class="center"> This is a paragraph. </p>
Ha egy osztály létrehozásánál elhagyjuk az elem nevét, és csak ponttal kezdjük a meghatározást, akkor az adott osztály minden elemnél használható lesz: .center {text-align: center}
Az alábbi példában a h1 és a p elemnél is felhasználjuk a Az alábbi példában a h1 és a p elemnél is felhasználjuk a .center osztályt: <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
Az osztályok nevét NE kezdjük számokkal, mert a Mozilla/Firefox böngészők nem fogják érteni!
Azonosító használata
A HTML elemeket az azonosítójuk (id) alapján is meg tudjuk formázni A HTML elemeket az azonosítójuk (id) alapján is meg tudjuk formázni. Míg az osztályoknál egy pontot kellett a név elé tenni, az azonosítóknál kettőskeresztet használunk.
Az alábbi definícióval minden „green” azonosítójú elem színét zöldre állítjuk be: #green {color: green}
Az alábbi meghatározás csak azokra a p elemekre vonatkozik, amelyeknek „para1” az azonosítójuk: p#para1 { text-align: center; color: red }
Megjegyzések a CSS kódban A megjegyzések használatával könnyebben értelmezhetővé tehetjük a CSS kódot, de akkor is hasznát vesszük, ha egy kódrészletet hatástalanítani szeretnénk. A megjegyzéseket a böngészők figyelmen kívül hagyják. A megjegyzés mindig a "/*" jellel kezdődik, és a "*/" jellel ér véget:
Hová írjuk...
Külső stíluslap Ha külső stíluslapot használunk, akkor azt több weblap is használhatja, így egyszerre tudjuk megváltoztatni a megjelenésüket. A külső stíluslapot a <link> elem használatával rendeljük hozzá a HTML dokumentumhoz, a <head> részen belül:
<head> <link rel="stylesheet" type="text/css" href="stiluslap.css" /> </head>
Belső stíluslap Ha egy weblapnak egyedi stílust szeretnél megadni, akkor a <style> elem segítségével belső stíluslapot készíthetsz a <head> elemen belül:
<head> <style type="text/css"> hr { color: sienna } p { margin-left: 20px body
Közvetlen stílusmeghatározás Közvetlenül is megadhatod egy elem stílusát, de ezzel ismét kevered a tartalmat és a formát, így elveszíted a stíluslapok használatával járó előnyöket. A style tulajdonságot bármelyik HTML elemhez közvetlenül is beírhatod. A style tulajdonság tartalma bármilyen CSS kód lehet: <p style="color: sienna; margin-left: 20px"> Ez egy bekezdés </p>