Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján
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, szűkítés @import Alapok DOCTYPE: a kiindulás CSS: stíluslap, háttér, színek, kapcsolódás
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
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
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
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
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
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. <p>bekezdésszöveg</p>) 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>)
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: <p>első sor<br>második sor XHTML: <p>első sor<br />második sor</p> példa: kép beszúrás HTML: <img src= foo.jpg > XHTML: <img src= foo.jpg alt= bar />
XHTML nyelvtan: különleges követelmények az elemek nem fűzhetőek egymásba: helyes: <p><i>dőlt</i> szöveg</p> hibás: <b><p>vastag</b> szöveg</p> 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
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
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)
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; }
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
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
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 Az @import használata
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
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= http://my.site.net/styles.css /> célszerű css kiterjesztést adni neki
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
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 <p style="color: blue; margin-left: 20px"> Ez egy bekezdés </p>
Öröklés a beágyazott elemek öröklik a szülő tulajdonságait: <h1>a címsor <em>igen</em> 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 */
Az @import 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 tenni @import url(http://www.style.org/marine); h1 { color: red } /* az importált h1 felülírása */ a CSS1 a saját deklarációk utáni @import parancsokat figyelmen kívül hagyni rendeli
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
Egy minimális XHTML lap <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>cím</title> </head> <body> Tartalom </body> </html>
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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> TRANSITIONAL <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> FRAMESET <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">
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="http://www.w3.org/1999/xhtml"> 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
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-8859-2" />
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
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; }
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
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 */ }
XHTML és CSS linkek http://www.w3schools.com/xhtml/ http://validator.w3.org/ http://www.w3schools.com/css/ http://www.w3.org/tr/rec-css1 http://www.w3.org/style/css/ http://www.w3.org/style/css/learning http://jigsaw.w3.org/css-validator/ http://weblabor.hu/cikkek/rovatok/css