Hernyák Zoltán XML és HTML.

Az előadások a következő témára: "Hernyák Zoltán XML és HTML."— Előadás másolata:

1 Hernyák Zoltán http://aries.ektf.hu/~hz hz@aries.ektf.hu XML és HTML

2 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.

3 CSS alapok Ez a cím h2 { color: red; text-align: center; } h2 { color: red; text-align: center; } HTML forrás: CSS ráilleszkedő stílus:

4 CSS alapok 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 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 stíluselemek:

5 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

6 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; } h2 { font-family: arial; font-size: 20px; font-weight: bold; font-style: normal; }

7 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

8 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; } 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; }

9 XML és CSS együtt * { background-color:black; } person { color: red; display: block; } name { font-weight: bold; display: inline; } pet { font-style: italic; display: inline; } * { background-color:black; } person { color: red; display: block; } name { 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 pet:before { color: red; content: ”Pet Name:” } person:after { color: white; content: ”.” } pet:before { color: red; content: ”Pet Name:” } person:after { color: white; content: ”.” } Mit írjunk elé, vagy mögé.

10 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; } pet { font-style: italic; display: inline; } pet[species=”dog”] { color: white; } pet[species=”cat” { font-size: 14px; } … XML:

11 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