Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján"

Csilla Vassné
8 évvel ezelőtt
Látták:

1 Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

2 Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan: kijelölők, idézőjelek Hol a helye? Rangsor Öröklés, Alapok DOCTYPE: a kiindulás CSS: stíluslap, háttér, színek, kapcsolódás

3 HTML és CSS HTML vs. XHTML Melyik micsoda, mi a különbség? Mi a CSS? XHTML nyelvtan Kezdő- és zárócímkék Üres elemek Különleges követelmények CSS nyelvtan Kijelölők és meghatározások Pontos kijelölők Idézőjelek

4 Mi az a HTML? HTML: HyperText Markup Language szabványos módszer szöveges információk tárolására és megjelenítésére olyan jel- és kódkészlet, melyet minden böngészőnek értelmeznie kell (kéne) meghatározza egyrészt a szerkezeti felépítést, másrészt a megjelenítési módot szerkezeti felépítés: címsorok, hivatkozások, listák, bekezdések, stb. megjelenítési mód: betűtípus, szín, animáció eredetileg csak szöveg, később kiegészítették képi és egyéb információ átvitelével is

kódkészlet, melyet minden böngészőnek értelmeznie kell (kéne) meghatározza egyrészt a szerkezeti felépítést, másrészt

5 Mi az az XHTML? XHTML: extensible HTML néhány év után az egyéni elemek kódolására a HTML kezdett túlméretezetté válni tanulás, felhasználás kézi eszközök (mobiltelefonok, PDA-k, stb.) pusztán a leírókódot használni a megjelenítés szabályozására nem elég hatékony a megoldás egyrészről az XHTML, másrészről a CSS

kezdett túlméretezetté válni tanulás, felhasználás kézi eszközök

6 HTML és XHTML mi a különbség? XHTML == újabb generációs HTML szabvány gyakorlatilag a HTML újraírása XML alapokon bővíthető HTML: matematikai számítások elvégzése képek megjelenítése akár saját objektumtípusok kezelése bővebben nemsokára, a nyelvtanát tárgyaló részben

újraírása XML alapokon bővíthető HTML: matematikai számítások

7 Mi a CSS? Cascading Style Sheets: rangsorolt stíluslapok az egyes stílusok határozzák meg a megjelenítést (nem csak vizuálisan, hanem akár auditíven is) lehet csatolni, beágyazni a(z X)HTML dokumentumba minden böngészőben van alapértelmezett stíluslap, valamint lehet felhasználói stíluslap ezek mind együtt határozzák meg a megjelenítést

megjelenítést (nem csak vizuálisan, hanem akár auditíven is) lehet csatolni,

8 XHTML nyelvtan: kezdő és zárócímkék alapelemei a címkék (tags) minden címkét kötelezően le kell zárni (ellentétben a HTML-lel) legtöbbször van egy címkének kezdő- és záró változata (pl. bekezdésszöveg) lásd később: üres címkék bizonyos címkékhez jellemző (attribute) rendelhető (pl. <td align= center >középre igazított cella</td>)

9 XHTML nyelvtan: üres elemek üres elem: ami nem tartalmaz szöveget (vagy más elemet) ezek általában nem igényelnek zárócímkét példa: sortörés HTML: első sor második sor XHTML: első sor második sor példa: kép beszúrás HTML: <img src= foo.jpg > XHTML: <img src= foo.jpg alt= bar />

HTML: <p>első sor<br>második sor XHTML: <p>első sor<br />második sor</p>

10 XHTML nyelvtan: különleges követelmények az elemek nem fűzhetőek egymásba: helyes: dőlt szöveg hibás: vastag szöveg az elemeket kötelező lezárni kötelező megadni a dokumentumtípust (DOCTYPE sor) minden elemet, jellemzőt és értéket kisbetűvel kell írni minden értéket idézőjelben kell megadni minden jellemzőnek egyértelműen meg kell adni az értékét

kötelező megadni a dokumentumtípust (DOCTYPE sor) minden elemet, jellemzőt és értéket

11 CSS nyelvtan: bevezetés megjelenítési tulajdonságokkal látja el a leírókódon belüli elemeket szín betűtípus háttér szegély, margó elemek helye lehet beágyazva az XHTML dokumentumban mégis gyakoribb, hogy csatolják hozzá elkülönül a tartalom a megjelenítéstől gyorsul a fejlesztés gyorsul a letöltés

helye lehet beágyazva az XHTML dokumentumban mégis gyakoribb, hogy

12 CSS nyelvtan: kijelölők és meghatározások kijelölő (selector) mondja meg, hogy a stílus az XHTML lap mely elemeire vonatkozik minden kijelölőhöz tartozik meghatározás (declaration), ami a megjelenítés módját mondja meg példa: p { font-family: Arial, sans-serif; font-size: small; color: blue; } tulajdonság (property): érték (value)

meghatározás (declaration), ami a megjelenítés módját mondja meg példa: p {

13 CSS nyelvtan: pontos kijelölők néha szükség van kevésbé általános, azaz pontos (specific) kijelölésre azonosítókijelölők (id selectors) egy azonosítót egy XHTML lapon belül csak egyszer lehet használni, tehát a létező legpontosabb módszer #lablec p { font-size: x-small; } osztálykijelölők (class selectors) érdemes a funkció, nem pedig a hatás alapján elnevezni az osztályokat.kiemeles { background-color: silver; } összetett kijelölők #lablec p.kifejezes { background-color: gray; }

#lablec p { font-size: x-small; } osztálykijelölők (class selectors) érdemes a funkció, nem pedig a hatás alapján

14 CSS nyelvtan: kijelölők csoportosítása néha szükség lehet ugyanazon formázás többféle elemre való alkalmazására a vessző állítja be a stílust a lista minden elemére p, li, blockquote { font-size: medium; } vessző nélkül is használható p blockquote { font-size: medium; } csak a bekezdésben szereplő idézetekre hat

minden elemére p, li, blockquote { font-size: medium; } vessző nélkül is

15 CSS nyelvtan: idézőjelek XHTML-ben a címkék összes jellemzőjének értékét idézőjelbe kell tenni <option selected= selected >első, kijelölt lehetőség</option> CSS-ben csak akkor szabad idézőjeleket használni, ha a betűtípus neve több szóból áll és szóközt is tartalmaz: p { font-family: Times New Roman, Times, serif; } a konkrét családnevek nagybetűsek, az általánosak kisbetűsek

idézőjeleket használni, ha a betűtípus neve több szóból áll és szóközt is tartalmaz: p {

16 Hol a helye? Rangsor Böngésző Felhasználói stílusok Külső stílusok Beágyazott stílusok Szövegközi stílusok Öröklés Szűkítés használata

17 Rangsor böngésző minden böngészőnek megvan a maga alapértelmezett megjelenítési módja ezek a legtöbbször megegyeznek: fehér háttér, kék, aláhúzott linkek, stb. felhasználói stílusok a böngésző alapbeállításainak megváltoztatásával jönnek létre néhány alap dolgot (pl. betűtípus, színek) a böngészőben is át lehet állítani másokat csak kézi szerkesztéssel

felhasználói stílusok a böngésző alapbeállításainak megváltoztatásával jönnek létre

18 Rangsor: külső stílusok ideális, ha ugyanazon stíluslapot egyszerre sok XHTML oldalon szeretnénk alkalmazni egy fájl szerkesztésével az egész honlap kinézetét megváltoztathatjuk az XHTML fejlécbe kell elhelyezni a stíluslapra mutató hivatkozást: <link rel= stylesheet type= text/css href= /> célszerű css kiterjesztést adni neki

megváltoztathatjuk az XHTML fejlécbe kell elhelyezni a stíluslapra mutató hivatkozást:

19 Rangsor: beágyazott stílusok az XHTML dokumentum fejlécében találhatók <style type="text/css"> <![CDATA[ hr {color: blue } p { margin-left: 20px } body { background-image: url("background.jpg") } ]]> </style> érdemes a tartalmat megjegyzésbe tenni, hogy a style elemet értelmezni képtelen böngészők se jelenítsék meg

[CDATA[ hr {color: blue } p { margin-left: 20px } body { background-image:

20 Rangsor: szövegközi stílusok néhány XHTML címkének lehet style jellemzője, amiben csak rá vonatkozó stílust adhatunk meg Ez egy bekezdés

21 Öröklés a beágyazott elemek öröklik a szülő tulajdonságait: <h1>a címsor igen fontos!</h1> h1 { text-color: blue } em { text-style: italic } a százalékban megadott értékek a korábbi beállításon alapulnak p { font-size: 10pt } p { line-height: 120% } /* relatív a 'font-size' tulajdonsághoz, tehát 12pt */

22 használata lehetőség van más CSS stíluslapok importálására, például egyszerűsítés vagy éppen gyorsabb letöltés miatt célszerű a stíluslap elején url( h1 { color: red } /* az importált h1 felülírása */ a CSS1 a saját deklarációk parancsokat figyelmen kívül hagyni rendeli

23 Alapok Az XHTML lap DOCTYPE meghatározás XML meghatározás Fejléc Törzs A CSS stíluslap Háttér Színek Margók Hozzákapcsolás az XHTML laphoz

24 Egy minimális XHTML lap <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>cím</title> </head> <body> Tartalom </body> </html>

25 DOCTYPE meghatározás nem az XHTML dokumentum része, tehát nem kell lezárni sem STRICT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " TRANSITIONAL <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " FRAMESET <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

26 XML meghatározás a html címke xmlns jellemzőjével adhatjuk meg a használni kívánt XML névteret <html xmlns=" ha kimarad, az ellenőrzők nem fognak panaszkodni, lévén ez egy fix érték, ami akkor is alkalmazandó, ha nem adjuk meg

27 XHTML fejléc kötelező része az XHTML dokumentumnak kötelező eleme a title címke, mely az oldal címét adja meg (a böngészőablak címsorában jelenik meg) opcionális eleme pl. a meta címke, mellyel pl. karakterkészletet adhatunk meg: <meta http-equiv="content-type" content="text/html; charset=iso " />

28 XHTML törzs kötelező része az XHTML dokumentumnak szigorú fastruktúrában kell megadni az elemeket nem lehet egymásba fűzni őket pontosan kell formázni (erről szól az egész előadás) minden címke kisbetűs minden címkét le kell zárni még az üres címkéket is

29 CSS stíluslap: háttér az XHTML dokumentum hátterét a body címke stílusaként állíthatjuk be body { background-color: yellow } body { background-image: url('bgimg.jpg') } body { background-image: url('bgimg.jpg'); background-repeat: repeat-y; } body { background-image: url('bgimg.jpg'); background-repeat: no-repeat; background-position: center; } body { background-image: url('bgimg.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

30 CSS stíluslap: színek a színeket megadhatjuk (angol) nevükkel h1 {color: red } hexadecimális hexletekkel (vörös, zöld, kék komponens) h2 {color: #00ff00 } decimális alakban h4 {color: rgb(0,0,255)} háttérszínt a background-color tulajdonsággal állíthatunk

31 CSS stíluslap: margók megkülönböztetünk kereteket (border), margókat (margin) és kitöltést (padding) mindegyiknek állítható a vastagsága a keretnek a színe és stílusa is példák: h1 { border: medium double rgb(250,0,255) } p { margin: 2cm 4cm 3cm 4cm /* felső, jobb, alsó, bal */ } td { padding: 0.5cm 2.5cm /* alsó-felső, jobb-bal */ }

32 XHTML és CSS linkek

Hasonló dokumentumok

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás