HTML alapok III.
HTML5 elemek
- nav: menü
- section: logikai egység
- article: önálló tartalom
- header: fejléc
- footer: lábléc
- aside: oldalsáv
- main: az oldal lényegi részei
- főleg szemantikai jelentésük van
- canvas: javascript-tel rajzolható terület
CSS szelektorok II
- elem: HTML elem nevét is használhatjuk
- felsorolás
- elemek egymáshoz való viszonya
- attribútum
- állapot
CSS alapok II.
Táblázat design
Alapértelmezetten a táblázatnak nincs se háttérszíne se keretje. Testre lehet szabni:- Táblázat, sor, cella háttérszínét
- Táblázat, cella keretjét
- Cellák közötti térközt
- Cellán belüli térközt
- Caption pozícióját
A cellák méretét meghatározza továbbá a cellák tartalmának szélessége is. Ha egy cellába hosszabb szöveg van, akkor az egész oszlopa szélesebb lesz.
A táblázat thead és tbody része több oldalas táblázat nyomtatás esetén minden oldalon megjelenik.
CSS selector-ok segítségével elérhető, hogy pl a 3. oszlop más szabályokat kapjon mint a többi.
CSS szelektor-okról bővebben
Box-model
A szélesség/magasság (width, height) megadásának több értelmezése is lehet. A méret tartalmazhatja a keret vastagságát és a belső margót is (padding).Ennek a megadására szolgál a box-sizing css szabály.
- box-sizing: border-box
- box-sizing: padding-box (csak Firefox)
- box-sizing: content-box
Ha a méreteket %-ban adjuk meg, akkor fontos szerepe van, hogy a padding és a border is beletartozzon ebbe a méretbe.
Pl: 100%-os width esetén ha margin-t adunk meg, akkor az minden esetben ki fog lógni. Border-box esetén a padding és a border is bele fog tartozni a 100%-ba, így nem csúszik szét.
Érdekesség a külső margóval kapcsolatban.
Pozícionálás
Gyakran előfordul, hogy a statikus elrendezés nem felel meg az igényeinknek. Lehet, hogy lebegő div-eket akarunk használni, akár design, akár funkcionalitás céljából.Erre az esetre szolgálnak a pozícionálást meghatározó szabályok.
Abszolút pozícionálásnál a kiindulási pont az első nem static szülő elem.
Példa use case: Facebook chat
- position: absolute
- position: fixed
- position: relative
- position: static
Úsztatás
Úsztatás segítségével folyó szövegben tudunk képeket/html elemeket elhelyezni.Gyakran weboldal elrendezés megadására is használják.
- float: left, right
- clear: left, right, both
Layout
Feladat 1
Az előző órai feladatot egészítsd ki CSS-sel ( HTML kód ).Feladat 2
HTML5 tag-ek segítségével készítsd el a következő elrendezést:***************************** * Fejléc * ***************************** * Menü * ***************************** * * * * * * *Oldalsáv* * * * * * * * * * * * * * * * * * * * ***************************** * Lábléc * *****************************Az oldal 1024px széles legyen, legyen középre igazítva, és az oldalsáv méretét %-ban add meg.