HTML ÉS PHP ŐSZI FÉLÉV

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "HTML ÉS PHP ŐSZI FÉLÉV"

Ilona Szilágyi
4 évvel ezelőtt
Látták:

1 1 HTML ÉS PHP ŐSZI FÉLÉV CSS kezdőlépések

2 2 A CSS és a HTML viszonya

3 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

4 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!

5 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 6 Elemek kijelölése

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

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

9 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">

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

11 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

12 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

13 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

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

15 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

16 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 17 Kijelölő játék

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

19 19 Szövegek formázása

20 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)

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

22 Dőlt betűstílus 22 font-style: normal; font-style: italic; Lehetséges értékek: normal italic nem dőlt dőlt

23 Betűvastagság 23 font-weight: normal; font-weight: bold; Lehetséges értékek: normal bold rendes vastagság félkövér

24 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

25 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:

26 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

27 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

28 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

29 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

30 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

31 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%;

32 Ö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 33 Néhány hasznos dolog

34 Á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

35 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

36 CSS hibakeresés: Firebug 36

37 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 38 Gyakorlati feladat 2-3 fős csoportokban

39 Gyakorlati feladat

40 Gyakorlati feladat

41 Gyakorlati feladat

Hasonló dokumentumok

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem Informatika 1 CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc Budapesti M szaki Egyetem 2014. november 4. CSS CSS: Cascading Style Sheets CSS CSS: Cascading Style Sheets Cél: a tartalom és a megjelenítés