Transcript CSS alapok
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