CSS cascading style sheet – lépcsőzetes stíluslapok

Miután befejeztük a HTML-t, gondoltam rátérek erre is egy picit, elvégre RaszP. csak úgy szórja nekünk a CSS kódokat.

Negyedik lecke

Ebben a fejezetben inkább csak az általánosságokkal foglalkozom, majd a további leckékben konkretizáljuk a dolgokat.

Először is tisztázzuk, mire is jó a stíluslap.

Emlékeztek rá, a HTML-ben nemsok lehetőségünk volt arra, hogy módosítsuk szövegeink stílusát? (HTML segédlet 1. lecke)

A CSS-t 1996-ban jelentette meg a W3C (WorldWideWeb Community- a web programozásának atyjai/szabványosítói) azzal a céllal, hogy a szövegszerkesztőkéhez hasonlóan lehessen a HTML dokumentumok megjelenítési információit módosítani. Méghozzá úgy, hogy minden böngésző egyformán jelenítse meg a dokumentumot. Mi most ezzel az első (jelenleg a CSS3-al kínlódnak) CSS szabvánnyal fogunk foglalkozni, mert ezt támogatja többé-kevésbé minden böngésző.

A stíluslapoknak 3 szintje van:

            - belső

                        egyetlen tag tartalmára vonatkozik – amiben szerepel

- dokumentum szintű

                        a dokumentum teljes egészére vonatkozik

            - külső

akárhány dokumentum törzsére vonatkozhat, egy külső a weben valahol elhelyezett fájl.

Egy fontos dolog: a stíluslapoknak van egy végrehajtási sorrendje. ami fordított az előző felsoroláshoz képest, tehát a külső stíluslapot felülírja a dokumentum szintű, amit felülír a belső stíluslap.

No nézzük akkor hogyan is néz ki egy CSS script (mini program)

<STYLE type=”text/css”>

            …

            szabálylista

            …

</STYLE>

STYLE

-ezzel adjuk meg a nem HTML kód típusát. Jelen esetben text/css (mivelhogy szöveget adunk meg és CSS a programnyelv)

SZABÁLYLISTA

- a szabálylista két további részből áll

szelektor{tulajdonság_1:érték_1;tulajdonság_2:érték_2;…tulajdonság_n:érték_n;}

            SZELEKTOR (az a tag amire a stílus vonatkozik)

                        Vagy egy tag neve, vagy tag nevek vesszővel elválasztott listája.

                        (FIGYELEM! Nem <tag>-ról, csak tag nevekről beszélünk! a kacsacsőrök nem kellenek.)

            TULAJDONSÁG

                        Ezek azok a tulajdonságok, amiket módosítani, beállítani szeretnénk.

(A CSS1 56 különböző tulajdonságot tartalmazhat 6 kategóriában:

            -betűk

            -színek és háttér

            -szöveg

            -dobozok és elrendezés

            -listák

            -tag -ek)

                        Ha egy tulajdonságnak több értéket szeretnénk megadni, akkor szóközzel válasszuk el egymástól az értékeket.

Stílusosztályok:

            Egy tag különböző előfordulásainak különböző stílusspecifikációkat adhatunk meg.

            használata: a tag nevéhez egy ponttal kapcsoljuk.

pl:

            <STYLE type=”text/css”

                        p.normal{tulajdonság_1:érték_1;…}

                        p.special{tulajdonság_1:érték_1;…}

            </STYLE>

A dokumentumunkban a kívánt stílusosztályt az adott tag class attribútumával hívhatjuk meg:

            <p class=”normal”> … </p>

Létrehozhatunk általános stílusosztályokat is, ezek nem csak az adott tag -re vonatkoznak.

            használata: nem adunk meg tagnevet, csak egy ponttal kezdjük az osztálynevet.

pl:

<STYLE type=”text/css”

                        .normal{tulajdonság_1:érték_1;…}

                        .special{tulajdonság_1:érték_1;…}

            </STYLE>

meghívni ugyan úgy kell mint az előbb, de egyidejűleg használhatjuk mondjuk div és p tag –ben is. (értelemszerűen egyazon stíluson belül nem érdemes kétszer használni)

Tulajdonság- és érték formátumok:

Erről azért kell külön részben beszélnünk, mert a HTML-hez képest van némi változás a parancsok és tulajdonságok, valamint az értékek bevitelben.

A kulcsszavak továbbra sem függenek attól, hogy kis- illetve nagybetűvel írjuk be. (tehát a pici=Pici=PICI=PiCi)

A hosszértékeket továbbra is egészszámokkal, illetve tizedes törtekkel adhatjuk meg, de megjelentek a további mértékegységek. (eddig ugye csak a px-et használtuk)

A CSS mértékegységei a következők:

            -px: pixel

            -in: inch (hüvelyk)

            -cm: centiméter

            -mm: milliméter

            -pt: pont

            -pc: pica, azaz 12 pont

és két relatív mértékegység:

            -em: az „m” betű magasságát adja meg

            -x-height: az „x” betű magasságát adja meg

A színértékeket az eddig megszokottakon (angol név és #hexa hód) kívül rgb értékkel is megadhatjuk. (az rgb lényegében megegyezik a hexa kóddal, csak át van számítva az érték a decimális számrendszerre)

pl:

            -black                                                                        -white

            -#000000                                                                   -#FFFFFF

            -rgb(0,0,0)                                                                 -rgb(256,256,256)

No, körülbelül ennyi általános tudnivaló van a CSS-ről, mint látjátok elég nagy lélegzetvételű a dolog, de nem lesz bonyolultabb (sokkal)

 NE kommentelj a cikkhez!!! A segítséget nem a cikknél kell kérni. Jobboldalt viszont le van írva, hogy hol lehet:)