© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben

© BZ, 2006Stíluslapok használata2 A munkamegosztás a weblapon Tartalom → HTML kód a keresők is ezt „olvassák”! Megjelenés → stíluslapok (CSS) a design helye Viselkedés → Javascript használhatóság növelése

© BZ, 2006Stíluslapok használata3 Érvek 1. (Egy HTML-kód – sok CSS-lap) (Forrás:

© BZ, 2006Stíluslapok használata4 Érvek 2. (Adott HTML-kód – változó CSS) (Forrás:

© BZ, 2006Stíluslapok használata5 Érvek 3. Több lap stílusa egy helyen  gyorsan és könnyen frissíthető, módosítható Különböző felhasználókhoz különböző stílusokat lehet rendelni: például könnyen olvasható, nyomtatható stílusok A dokumentum mérete és komplexitása csökken áttekinthetőbb HTML kód kisebb HTML kód Stíluslapok a gyorsítótárban  gyorsabb oldalak

© BZ, 2006Stíluslapok használata6 Amiről szó lesz… Némi elmélet „Dobozok” készítése, elhelyezése Oldalak felépítése Menük Nyomtatás … és még meglátjuk

© BZ, 2006Stíluslapok használata7 CSS alapok 1. Cascading Style Sheet ~ egymásba ágyazott stíluslapok Szintaxis: kiválasztó {tulajdonság: érték} H1 {color: blue} Hivatkozás egy külső url(masik.css)

© BZ, 2006Stíluslapok használata8 CSS alapok 2. – Csoportosítás Kiválasztók csoportosítása: H1, H2, H3 {font-family: verdana} Deklarációk csoportosítása: H1 { font-family: helvetica; font-size: 12pt; font-style: normal; }

© BZ, 2006Stíluslapok használata9 CSS alapok 3. – Öröklődés Az elemek (általában) öröklik szülőelemük tulajdonságait. dokumentumfa képe

© BZ, 2006Stíluslapok használata10 CSS alapok 4. – A kiválasztók Elem kiválasztása h1, h2, h3 { color: #a00000; } Osztály (class) alapú kiválasztás H1.zold {color: #00ff00} Zöld, mint a rét Azonosító (ID) alapú kiválasztás #azonosito {background-color: red;} A blokk tartalma... Helyzetérzékeny kiválasztás table b { color: #0000a0; } A táblában itt egy sötétkék rész...

© BZ, 2006Stíluslapok használata11 CSS alapok 5. – „Mértékegységek” Méretek px – pixelben (képpont) megadott érték P { font-size: 12px } em – az 1em az adott környezet betűméretét jelöli H1{ margin: 0,5em } ex – a kijelölt betűkészlet kisbetűinek magassága H1{ margin: 1ex } Színek a szín nevével : H2 { color: olive } a szín RGB kódjával : EM { color: #ff0000 } URL-ek BODY { background: url(images/hatter.jpg) } !CSS-hez képest!

© BZ, 2006Stíluslapok használata12 CSS alapok 6. – Látszólagos elemek Linkekben link - a:link {text-decoration: none;} visited - a:visited {font-style: italic;} active - a:active {color:lime} Dinamikus elemek hover - a:hover {text-decoration: underline;} focus -input:focus {background: #dddddd;} Tipográfiai elemek first-letter p:first-letter { font-size: 300%; } first-line p:first-line { color: #000080; }

© BZ, 2006Stíluslapok használata13 Dobozmodell 1. Minden doboznak van tartalma ( content ), ez maga az elem, amelyik a dobozt létrehozza. Az elemek köré szegélyek ( border ) rajzolhatóak, amelyeknek lehet színe, vastagsága, stb. A tartalom és a szegély között távolság a kitöltés ( padding ). Beállítani csak a méreteit tudjuk. A szegélyen kívül pedig margó ( margin ) helyezkedhet el, amelynek segítségével szabályozni lehet a szomszédos elemektől való távolságot. A margók minden esetben átlátszóak.

© BZ, 2006Stíluslapok használata14 Dobozmodell 2. Forrás:

© BZ, 2006Stíluslapok használata15 Dobozmodell 3. A HTML elemek két nagy csoportra oszthatók: blokk és sor elemekre. Blokk -elemek: pl. Hn, P, UL, stb. DIV Leegyszerűsítve: a blokk elemek előtt és után sortörés van Sor -elemek: pl. B, STRONG, CITE, stb. SPAN A két típusnál eltérően működik a dobozmodell!

© BZ, 2006Stíluslapok használata16 Egyszerű doboz készítése 1. A HTML -kód: Dobozcím Az első bekezdés szövege… A 2. bekezdés szövege….

© BZ, 2006Stíluslapok használata17 Egyszerű doboz készítése 2. A CSS-állomány:.doboz { width: 200px; border: 1px solid #cccccc;}.doboz.tartalom { background-color: #f0ffff; font-size: 0.7em; padding: 5px 0 0 0;}.doboz.tartalom p { padding: 0 10px 10px 10px; margin: 0; font-family: arial, sans-serif;}.doboz h2 { margin: 0; height: 30px; font-family: arial, sans-serif; font-size: 0.9em; background-color: #7fffd4; border-bottom: 1px dotted black; text-align: center; line-height: 2em; color: #660066;}