1 HTML ÉS PHP ŐSZI FÉLÉV 2012-10-10 CSS kezdőlépések
2 A CSS és a HTML viszonya 2012-10-10
Hol található CSS kód? 3 Közvetlenül a tag-ek style paraméterében: <p style="color: red">bekezdés</p> Ekkor a megadott stílus csak az aktuális tag-re érvényes Ezt lehetőleg NE használjuk, mert egyrészt nagyon ronda, másrészt a CSS kódunk nem hasznosítható újra
Hol található CSS kód? 4 A <head> tag-en belül egy <style> tag-ben: <style type="text/css"> p { color: blue; } h2 { font-size: 1.2em; } </style> Itt már a teljes oldalra vonatkozóan adhatunk meg formázási utasításokat De még mindig van jobb megoldás!
Hol található CSS kód? 5 Külső fájlban, amelyre a <head>-ben hivatkozunk: <link rel="stylesheet" type="text/css" href="xyz.css" /> Az xyz.css stíluslap tartalma: p { color: blue; } h2 { font-size: 1.2em; } Előnye, hogy ugyanazt a stíluslapot több HTML oldalhoz is csatolhatjuk; így a formázás egységes lesz
6 Elemek kijelölése 2012-10-10
Kijelölése tag neve alapján 7 A tag-alapú kijelölés az adott tag összes példányára alkalmazza a megadott stílust h1 { color: blue; } a { } color: red; background: yellow;
Kijelölés class alapján 8 A stílus minden olyan elemre érvényes, amely a megadott class paraméterrel rendelkezik A második példa ezt tovább szűkíti a <p> tagekre.nagyon-nagy { font-size: 36px; } p.meg-nagyobb { font-size: 72px; }
A class paraméter megadása 9 Bármelyik elemnek lehet class paramétere: <p class="felkover"> <body class="rovid-oldal"> Szóközzel elválasztva több class-t is megadhatunk, ekkor mindkét class formázása érvényes lesz rá: <p class="felkover dolt">
Kijelölés ID alapján 10 Csak a meghatározott ID-jű elemre érvényes Az ID egyedi: egy adott ID csak egy elemnél lehet! Lehet ezt is kombinálni a többivel, de nincs sok értelme #legjobb-elem { text-align: center; } h4#legjobb.zold { color: green; }
Az ID paraméter megadása 11 <p id="legfontosabb"> <a id="vissza" href="index.html"> Bármelyik elemnek lehet ID-je De egy adott ID csak egy elemnél szerepelhet És egy elem csak egy ID-vel rendelkezhet
Linkek kijelölése állapot alapján 12 a { color: blue; } a:visited { color: purple; } a:hover { background: yellow; } a:active { color: red; } Linkek állapotai: visited active hover már meglátogatott kattintás közben rámutatáskor
Komplex kijelölés: felsorolás 13 Az azonos tartalmú blokkokat össze lehet vonni úgy, hogy a kijelöléseket vesszővel elválasztjuk: h5 { background: pink; } p.kep { background: pink; } h5, p.kep { background: pink; } Tetszőleges számú kijelölést összevonhatunk 2012-10-10
Komplex kijelölés: leszűkítés 14 Minden <li> tag-re vonatkozik: li { font-family: arial; } Csak olyan <li>-kre érvényes, melyek egy <ul>-en belül vannak: ul li { font-family: impact; } Csak olyan <li>-kre érvényes, melyek egy <ul>ben, és azon belül egy <ol>-ben vannak: ul ol li { font-family: verdana; } 2012-10-10
Stílusok alkalmazási sorrendje 15 A pontosabb, specifikusabb kijelöléssel rendelkező stílusok felülbírálják az általánosabb stílusokat A sorrendre egy példa (általános specifikus): a a.vissza p a.vissza p.bekezdes a.vissza #vissza-link p.bekezdes #vissza-link Ha egyformán specifikusak, akkor a későbbi nyer
A sorrend felrúgása:!important 16 Ha nem szeretnénk, hogy egy formázást a specifikusabb blokkok felülírjanak, akkor használjuk az!important kulcsszót: li { color: green!important; } ul li { color: red; } ul ol li { color: blue; } Ebben az esetben a zöld szín felülírja az összes többit, azoknak hiába specifikusabb a kijelölőjük
17 Kijelölő játék
Kijelölő játék 18 a, #azon p.oszt, #azon a, ul.list li, ol.oszt a { color: red; }.list, #azon,.oszt a, ul li, ol li.oszt, ul.list ol, li { color: blue; } 2012-10-10
19 Szövegek formázása
Betűtípusok 20 font-family: verdana, arial, sans-serif; Alapesetben csak olyat használhatunk, ami a látogató gépén is megtalálható Felsorolhatunk többet is, ilyenkor a legelső megtalálható típust fogja alkalmazni a böngésző Zárjuk a sort az egyik alapértelmezéssel: sans-serif serif monospace alapértelmezett talpnélküli (pl. Arial) alapért. talpas (pl. Times New Roman) alapért. fix szélességű (pl. Courier New)
Betűméret 21 font-size: 14px; font-size: 1.25em; A CSS-ben többféleképpen lehet méretet megadni: px em pontosan megmondjuk, hány pixeles legyen a szülőelemhez képest hányszoros legyen % hasonló az em-hez (1 em = 100%) A betűméretek javasolt megadása A <body>-nál adjunk meg egy fix alapot px-ben, majd mindenhol máshol használjunk em-et, vagy %-ot.
Dőlt betűstílus 22 font-style: normal; font-style: italic; Lehetséges értékek: normal italic nem dőlt dőlt
Betűvastagság 23 font-weight: normal; font-weight: bold; Lehetséges értékek: normal bold rendes vastagság félkövér
Aláhúzás, áthúzás, stb. 24 text-decoration: normal; text-decoration: underline; text-decoration: line-through; Lehetséges értékek: normal underline line-through overline semmilyen dekoráció nincs aláhúzás áthúzás föléhúzás
Betűszín 25 color: #FF0000; color: rgb(255, 0, 0); A színek megadási módjai: #FF0000 a vörös-zöld-kék komponensek megadása hexadecimálisan (00-FF) rgb(255, 0, 0) ugyanez, csak tízes számrendszerben (0-255) red a gyakori színeknek van nevük is Teljes lista: http://en.wikipedia.org/wiki/web_colors
Bekezdés igazítása 26 text-align: center; text-align: right; Lehetséges értékek: left center right justify balra (alapértelmezett) középre jobbra sorkizárt Az eddigi formázások karakterszintűek voltak, de ezt csak teljes bekezdésekre lehet alkalmazni
Sormagasság, sorköz 27 line-height: 40px; line-height: 1.5em; Mértékegységek: px em pontosan ennyi pixel magas egy sor 1 em = a betűmagasság (szimpla sorköz) % hasonló az em-hez (1 em = 100%) Itt is az em-et és a %-ot érdemes használni
Háttérszín 28 background-color: #FFFFCC; background-color: rgb(255,255,204); A színek megadása ugyanaz, mint a color-nál Minden olyan elemnél használható, ahol ennek értelme van
Háttérkép 29 background-image: url("hatter.png"); background-image: url("../hatterek/fooldal.jpg"); A relatív URL-t a CSS fájlhoz képest kell megadni Alapértelmezésben a háttérkép ismétlődni fog, ha kisebb a befogadó elem méreténél
Háttérkép ismétlődése 30 background-repeat: repeat-y; background-repeat: no-repeat; Lehetséges értékek: repeat-all repeat-x repeat-y no-repeat mindkét irányban ismétlődik (alapért.) csak vízszintesen ismétlődik csak függőlegesen ismétlődik nem ismétlődik
Háttérkép helyzete 31 background-position: 200px 100px; background-position: 50% 100%; Csak akkor számít, ha a háttérkép nem ismétlődik, egyébként nincs mit igazítani (mert kitölti a dobozt) Forma: vízszintes [szóköz] függőleges px % bal felső saroktól ennyivel balra/lefelé a szélesség/magasság ennyi %-ánál Középre igazítás: background-position: 50% 50%;
Összevont háttér-definíció 32 background: #F5A403 url("hatter.png") no-repeat 200px 100px; Forma: szín kép ismétlődés pozíció Persze nem kötelező minden elemet megadni A háttérszín ott fog megjelenni, ahol nem takarja el a háttérkép, így repeat-all esetén nincs értelme
33 Néhány hasznos dolog
Általános tag: span 34 A szövegnek a közepén van egy <span class="zold">zöld színű rész</span>..zold { color: green; } Arra való, hogy egy tetszőleges szövegrészhez class-t vagy ID-t rendeljünk Ha nem rendelünk hozzá CSS formázást, akkor olyan, mintha ott sem lenne
CSS kommentek 35 /* Ez egy komment */ /* Lehet többsoros is! */ Ugyanúgy működnek, mint a HTML kommentek A böngészők nem foglalkoznak velük
CSS hibakeresés: Firebug 36
Médiumok 37 <link rel="stylesheet" type="text/css" href="print.css" media="print" /> A stíluslap csatolásakor meg lehet adni, hogy mely eszközökön legyen alkalmazva: all screen print bármilyen eszközön csak képernyőn, nyomtatásban nem csak nyomtatásban, képernyőn nem
38 Gyakorlati feladat 2-3 fős csoportokban 2012-10-03
Gyakorlati feladat 39 2012-10-03
Gyakorlati feladat 40 2012-10-03
Gyakorlati feladat 41 2012-10-03