Extensible Markup Language

XML és HTML

Hernyák Zoltán

http://aries.ektf.hu/~hz [email protected]

XML és HTML

Az XML adatleíró nyelv, melyet böngészőben megtekintve a fa struktúrát láthatjuk. Ugyanakkor az XML tartalom leképezhető HTML nyelvre A stílusozást CSS végzi.

CSS alapok

HTML forrás:

< h2 >Ez a cím

CSS ráilleszkedő stílus:

h2 { color: red; text-align: center; }

CSS alapok

CSS stíluselemek:

background-color : háttérszín color : írásszin font-family : betűtípus font-size : betűméret font-weight : betű stílusa font-style : betű stílusa text-align : elem igazítása az oldalon belül (vízszintes) margin : körbevevő margó padding : belső „margó” border : keret width : elem befoglaló szélessége height : elem befoglaló magassága

CSS alapok

CSS színmegadás: vagy megadjuk RGB értékekkel (hexadecimálisan)

color: #72A545;

vagy angol nevű színkóddal

background-color: red; aqua, black , blue, brown, crimson, fuchsia, green , olive, pink, purple, red , violet, white , yellow

CSS alapok

CSS font beállítás: font-family : serif, sans-serif, arial, helvetica, times font-size : pixelben (px utótagot is ki kell írni font-weight : normal, bold, bolder font-style : normal, italic

h2 { font-family: arial; font-size: 20px; font-weight: bold; font-style: normal; }

CSS alapok

CSS blokk beállítás: minden elem egy téglalapban foglal helyet.

height : a befoglaló téglalap magassága width : a befoglaló téglalap szélessége margin : a téglalap körülötti üres tér (világoskék) border : a téglalap körvonala (fekete vonal) padding : a téglalap belsejében lévő üres tér (barna)

tartalom

CSS alapok h2 { /* top, right, bottom, left */ margin : 10px 5px 20px 3px; margin-top : 20px; padding : 2px 4px 3px 6px; height : 20px; width : 80px; } /* solid, dotted, dashed, double */ border : 1px solid black; border-bottom : 2px dashed red;

XML és CSS együtt

xml-stylesheet type=”text/css” href=”people.css”?> * { background-color:black; } person name { color: red; display: block; } { font-weight: bold; display: inline; pet { font-style: italic; display: inline; } }

*: univerzális kiválasztás (minden elemre jó) block: abban a sorban csak ő szerepelhet inline: ilyen elemeket egymás mögé fűzi egy sorba Mit írjunk elé, vagy mögé.

pet:before { color: red; content: ”Pet Name:” } person:after { color: white; content: ”.” }

XML és CSS együtt

Feltételes attribútum formázás:

pet { font-style: italic; display: inline; } pet[species=”dog”] { color: white; } pet[species=”cat” { font-size: 14px; }

XML: … … …

XML és CSS együtt

Készítsünk telefonkönyv xml filet, és formázzuk meg CSS segítségével, hogy HTML-ben a böngésző szépen mutassa.

Telefonkönyv: bejegyzések név, telefonszám(ok), születési év, becenév, e-mail, stb