< 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:
-vel nem egyezik a display:
none
;
! 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.visibility:
hidden
;
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
meghatározással tudjuk eltüntetni. Szabályozhatjuk az üres cellák körüli szegély megjelenítését is az border-collapse:
collapse
;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!
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
.
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.
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!