Új HTML címkék ebben a leckében:
<button> - ezt a címkét űrlapokban és külön is használhatjuk. A gomb lenyomásához rendelhetünk eseményeket később. A címke tartalma általában rövid és néhány olyan formázás alapból rá lehet állítva, amelyet sem a listáknál sem a linkeknél nem tapasztaltunk (pl. középre igazított tartalom).
Új CSS kulcsszavak ebben a leckében:
display – ezt a tulajdonságot használjuk arra, hogy a HTML elem megjelenítési módját átállítsuk. Az alapértelmezett érték, elemtől függően: a block és az inline. Az inline (soron belüli) érték az <a> és az <img> címkéknél alapértelmezett, a block (egy tömbként – külön sorban) megjelenítést a <div> és a <p> címkék esetén láthattuk alapértelmezettként. A lehetséges értékei ennek a tulajdonságnak: block, inline, inline-block és none (semmi).
float – ezt a tulajdonságot is tartalom igazítására használjuk. Egy lebegtetett (float tulajdonsággal ellátott), elem elhagyja az eredeti helyét, nem hagyva üres helyet maga után. A lebegtetést jobbra vagy balra lehet végezni, tehát lehetséges értékei: left, right.
Új CSS szelektor ebben a leckében:
:not – ez a szelektor negatív értelemben alkalmaz formázást, vagy kivételt adhatunk egy formázáshoz.
Lehetséges formák: :not(p) – minden elemre alkalmazza, ami nem bekezdés, p:not(.p1) – minden bekezdésre alkalmazzuk, amelyekre nem érvényes a .p1 osztály
Kiegészítések:
- A display tulajdonság block értékére a tartalom egy teljesen külön sorban jelenik meg.
- Az inline érték esetén a tartalom beolvad az egyéb tartalmak közé a sorban. Nem alkalmazhatunk magasságot, szélességet ugyanakkor a margin és padding tulajdonságok sem állíthatóak felül és alul.
- Az inline-block beállítással rendelkező elemek úgy jelennek meg, mint az inline elemek, de a méretezés és a margók állítása korlátozás nélkül működik.
- A none értéket használjuk elemek elrejtésére.
Példák a display tulajdonság használatára:
A fenti képen néhány tartalom látható, az alapértelmezett megjelenítési beállításokkal: a bekezdések és a szakaszok (a <div> címke) alapértelmezett értéke a block – egymás alatt/fölött jelennek meg; a képek megjelenése inline-block típusú alapból, egy sorban jelennek meg.
A fenti képen az elemeknek módosított a megjelenítése: a szakaszokra alkalmaztuk az inline-block megjelenítést azért, hogy egy sorban jelenjenek meg, de a méretezés hatása is látható legyen. A képek egymás alatt jelennek meg a block beállítás hatására. A bekezdések megjelenítése inline, egy sorban jelennek meg.
Ha a szakaszokra inline értéket állítanánk, a magasságát és szélességet elveszítené.
Példa rejtett elem felfedésére:
A fenti képen egy oldal két állapotát láthatjuk: először a box2 azonosítóval rendelkező gomb nem jelenik meg, majd, amikor az első gomb fölé mozgatjuk a kurzort, a második is megjelenik.
Nem magától értetődő a fenti megoldás, mivel az egyik elem fölé helyezett kurzor jelenít meg egy másik elemet. Használtuk már a :hover szelektort előzőleg, de a módosításokat ugyanarra az elemre alkalmaztuk, amelyet kiválasztottuk: a + jelet használjuk a kiegészítésre és mellékeljük az elem azonosítóját, amelyet meg karjuk változtatni, ahogyan a fotón is láthatjuk.
A + jel akkor működik, ha a két érintett elem szomszédos, (a box2 a box1 után közvetlenül kell legyen), ha a ~ jelet használjuk, ugyanazon a szinten vannak, de nem szomszédok vagy a > jelet, ha az elrejtett elem a másik elem belsejében található (a "gyereke").
Ez a unordered list nem tartalmazhat golyókat. Távolítsa el őket (list-decoration). Távolítsa el az alapértelmezett margin és a padding, adja hozzá a 0 értéket a tulajdonságokhoz.
Minden list item a navigációs sávban a beillesztett szöveget a központhoz kell igazítani (test-align). A listaelemek egymás alatt jelennek meg, sorban egymás mellé illeszkednek, inline-block kijelzővel.
Minden link a listában 20 képpontos távolságot kell biztosítani a felső és alsó oldalon, és 40 pixel távolságot a bal és jobb oldalon (párnázás), távolítsa el az aláhúzást (szöveg-díszítés) és színezze feketere. A hivatkozás magasabb, mint a listában található listaelem: a blokkmegjelenítési mód használatával kényszerítheti a linkeket a listára.
Ha a kurzort egy linkre mozgatjuk, a link színe meg kell változtatnia. (: hover)
Adjon meg egy aktív nevű CSS osztályt, hozzáadva a háttérszínt a hivatkozáshoz az aktuális oldalt. Az ebben az osztályban megjelölt linkek nem változtathatják meg a háttérszínt, ha kiválasztják. Használja a: nem választót.
Állítsa be a aktív osztályt a megfelelő hivatkozáshoz minden HTML fájlban. (pl. a toplangs.html fájlban csak a href-ben a toplangs.html-re utaló hivatkozásnak kell lennie az aktív osztálynak stb.)
Csomagolja ezeket a linkeket egy <div>; címke az id cseppével, és távolítsa el a <br> címkéket. Adjon hozzá egy gombot a szöveggel a szöveg lehívása menüben. Csomagolja mindkettőt egy <div>; címke azonosítóva.l2.
A menu2 szekciónak jobbra kell csúsztatnia (lebegnie), tartalmát (gomb és linkek) is igazodnak (szövegbe igazítva) jobbra.
A gomb a menu2 szakaszban adja meg a betűtípus színét, a háttérszínt, a paddinget és távolítsa el a szegélyt.
Formázza a négy linkeket szegély, párnázás, háttérszín, betűszín, blokkképernyő eltávolítása, az aláhúzás eltávolítása (szöveg-dekoráció). A fenti mutatóval rendelkező linknek módosítania kell a háttérszínét.
A drop szekciót nem szabad megjeleníteni alapértelmezettként, de amikor a kurzort a menü szakasz fölé mozgatjuk, akkor megjelenik.
div:not(#box2){
color: red;
}
