< WebKészítés /> interaktív webszerkesztő tananyagok

Megjelenés

Léteznek úgynevezett blokk-szintű elemek, és sorbeli elemek. (Lásd: HTML) Kis ismétlés: A blokk-szintű elemek egy teljes sort kitöltenek, eléjük és mögéjük sortörés kerül. A sorbeli elemek mellett viszont lehet több másik sorbeli. Blokk elemek tartalmazhatnak sorbelit, fordítva nem!

A display: tulajdonsággal többek között az említett kettőt tudjuk beállítani. Ezen kívül még számos más megjelenést tudnánk elérni, csak ezeket az Internet Explorer semelyik verziója nem támogatja, ezért sajnos nem is ajánlott a használatuk. Ilyenek: list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell és table-caption. Amiket használhatunk: inline (sorbeli), block (blokk-szerű) és none (rejtett).

Nem szorosan, de hozzá tartozik a visibility: (láthatóság) tulajdonság, ami lehet: visible / hidden / collapse (látható / rejtett / ?). Fontos: display: none;-vel nem egyezik a visibility: hidden; ! Előbbi nem lesz egyáltalán része az oldalnak, utóbbival pedig ugyan láthatatlan marad, de a méretéből adódó helyet továbbra is foglalja.

KódTesztelő a gyakorláshoz

Táblázatok stílusai

Rácsvonalakat hozzáadni a táblázathoz úgy tudunk, hogy a td {} és th {} elemekhez a kívánt vastagságú keretet állítunk be a border: tulajdonsággal.

Mivel az előbb minden td {} és th {} elemre keretet állítottunk be, ezért két egymás mellett lévő cella esetén dupla szegélyt látunk. Ezt a border-collapse: collapse; meghatározással tudjuk eltüntetni. Szabályozhatjuk az üres cellák körüli szegély megjelenítését is az empty-cells: tulajdonság két értékével, a show / hide-dal.

Cellák közti margó megadásához a border-spacing: tulajdonság használható. A border attribútum beállítása nélkül is működik. (IE nem ismeri)

Belső margót is megadhatunk a cellákhoz. Ezt a már jól ismert padding: tulajdonsággal tehetjük meg úgy, hogy hozzárendeljük a td {} és th {} elemekhez.

Táblázat középre igazításához a szabvány szerint a bal és jobb oldali margót egyaránt auto értékre kell állítanunk. A szélességet is ilyenkor meg kell adnunk a már ismert width: tulajdonsággal.

Táblázat címének (<caption></caption>) formázása a caption-side: tulajdonsággal lehetséges. Megadhatjuk, hogy fent, vagy lent jelenjen-e meg a cím. A text-align: tulajdonsággal tudjuk jobbra vagy balra igazítani. Továbbá a cím szövegét tetszés szerint formázhatjuk. Alapértelmezetten a cím fent középen jelenik meg. Az Internet Explorer nem ismeri fel a caption-side: tulajdonságot, ezért mindig fent jeleníti meg a címet.

A szöveget nem csak függőlegesen, hanem vízszintesen is igazíthatunk az egyes cellákon belül. A vertical-align: ezt állítja be. Csak sorbeli elemekre, vagy táblázatcellákra érvényes! Ez a tulajdonság a következő értékeket veheti fel: baseline (alapvonal), sub (alsó index), super (felső index), top (fent), text-top (szöveg teteje), middle (középen), bottom (lent), text-bottom (szöveg alja) és hosszmérték vagy % is lehet. Ugyanakkor csak a top, middle és bottom értékek használhatók táblázatok szövegének igazítása esetén.

Hosszú táblázatoknál előnyös lehet, ha minden második sornak más a háttere. A zebra táblákat a tr-ek különböző háttérszínezésével érhetjük el. Oszlopok csoportosítása esetén már megismerkedtünk a col és a colgroup elemekkel. Ezekre azonban csak az alábbi CSS tulajdonságok érvényesek: width:, border:, visibility: és background:. (Ez utóbbi a hátteret állítja be. Ezt következőkben részletesebben tárgyaljuk.) Ha ezen kívül mást állítunk be az oszlopokra, akkor azt csak az IE fogja figyelembe venni!

KódTesztelő a gyakorláshoz

Listák formázása

A list-style-type: a listaelemek előtti kis jel megadására szolgál, ami lehet: disc (tömör pont), circle (lyukas kör), square (négyzet), none (semmi), decimal (számozott), lower-alpha (kisbetű), upper-alpha (nagybetű), lower-roman (kis római) és upper-roman (nagy római).

A list-style-image: képet tesz be az előbbiek helyett a listaelemek jelzésére. Értéke így lehet az ismert none és url().

A listaelmek előtti kis jel vagy kép helyzetének megadására a list-style-position: szolgál, mi lehet: outside (kívül) és inside (belül).

Végül pedig a rövidítő a list-style:, mely magába foglalja az előzőket a következő sorrendben: list-style-type list-style-position list-style-image.

KódTesztelő a gyakorláshoz

A számozás vezérléséhez egy olyan eszközhöz kell folyamodnunk, ami a CSS elveivel éles ellentétben áll. A content: tulajdonság ugyanis tartalmat vezérel, ami a HTML dolga. A stíluslapok feladata a formázás. Ezt szem előtt tartva, csak akkor használjuk az imént említett tulajdonságot, ha az nem kerülhető el. No de lássuk, miért éppen itt tárgyalom ezeket! Értéke lehet: counter(NÉV,STÍLUS) és counters(NÉV,ELVÁLASZTÓ,STÍLUS), ahol a NÉV egy változó az aktuális értéknek, az ELVÁLASZTÓ egy szimbólum a beágyazott részekhez, az opcionális STÍLUS pedig megegyezik a list-style-type: tulajdonságéval. A stílusadás csak Opera alatt támogatott jelenleg. A számlálót növelni a counter-increment: NÉV-vel, nullázni pedig a counter-reset: NÉV-vel lehet.

Ugrás az oldal tetejére!

Ugrás a következő oldalra!

0 hozzászólás