Webszerkesztés Stíluslapok (CSS)
Stíluslapok CSS = cascading style sheets (lépcsős stíluslapok) Több lapból álló webhelyünkön a megjelenést nehézkes lehet laponként állítgatni Célszerű a több lapra is vonatkozó részeket elválasztani a megjelenő információtól Külső stíluslapok esetén elegendő a stíluslapot jelentő fájlt módosítani, és a megfelelő oldal(ak)on azonnal jelentkezni fog a hatás Részletes információ a CSS szabványról: http://www.w3.org/TR/CSS21/css2.pdf
Belső stíluslapok A belső stíluslapok esetében az oldal kódja maga tartalmazza a stílusinformációkat A megjelenítésre vonatkozó utasításokat ilyenkor a <head> … </head> részben a <style> … </style> elemek között kell elhelyeznünk A style elem egyetlen kötelező paramétere a type, ami a tartalomra utal, és értéke a „text/css”.
Külső stíluslapok A külső stíluslapok esetében a tartalom és a formátumutasítások elválnak egymástól A html kód ekkor csak azt az egy utasítást fogja tartalmazni, hogy a formátumra vonatkozó leírást egy önálló fájlban fogjuk találni Ezt az utasítást a <link> üres elem tartalmazza Paraméterei és azok értékei rel: egy stíluslap kapcsolódik a html fájlhoz href: a stíluslap nevét adja meg type: a stíluslap taralomtípusát adja meg Maga a stíluslap csak ennyit tartalmaz Különbség a kétféle stíluslap között, hogy módosítási igény esetén a belső stíluslapnál mindig magát a html-t kell változtatni, külső stíluslapnál csupán az önálló css fájlt, ami akár több html-re, vagy az egész webhelyünkre is hatással lehet
A stíluslap felépítése Ha például a h1 stílusú szövegek színét szeretnénk zöldre állítani h1 {color: green} Ha több elemet szeretnénk egyszerre formázni h1, h2 {color: green} Lehetséges egy stílus több tulajdonságát is egyidejűleg módosítani h3 {color: green; background: red;} A jobb áttekinthetőség érdekében ezt azonban így szoktuk írni:
Tulajdonságok a stíluslapon
Színek, méretek, hivatkozások A színek megadása általánosságban a color: <érték> formában történik Méretek megadása Megadhatjuk abszolút és relatív (monitoról függő) méretezéssel is in = inch, coll, hüvelyk, 2,54 cm pc = pica, 12 pont pt = point, pont px = pixel, képpont Hivatkozások színezése Más színnel jelennek meg a még nem látogatott és a már látogatott lapok, valamint megváltozhat a hivatkozás színe, ha az egérrel megállunk felette
Színek, méretek, hivatkozások
Saját bekezdésstílusok Az első sor rendelkezik arról, hogy a bekezdések (<p>) 28 pont méretű, zöld karakterekből álljanak A következő két sor egy-egy saját bekezdésstílust ad meg Ezek a saját bekezdésstílusok a p stílus gyerekei, tulajdonságaik, ha másképpen nem rendelkezünk, a szülő tulajdonságaitól függenek Példánkban a karakterméret (28pt) a szülőtől öröklődik
Álelemek A stíluslapokon az úgynevezett álelemek segítségével a tartalom olyan részeire is meghatározhatunk formázást, amelyekre a html kódban nem tudunk hivatkozni Pl.: a bekezdés első betűjére tudunk hivatkozni p:first-letter {font-size: 50pt} A linkek látogatottsági állapottól függő színe is az álelemek segítségével valósul meg