Garpeer : Bevezetés a CSS-be

Tartalomjegyzék

„A CSS (angolul Cascading Style Sheets) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.”

(forrás: wikipedia)

Lényege, hogy a HTML elemeket nem a "régi" align, font, bgcolor, attribútumokkal formázzuk, hanem főként külső fájlban megadott stílusértékekkel. így ha valamin változtatni kell, sokkal könnyebben megtehetjük, és a kód is átláthatóbb lesz.

Stílusok megadásának helye ^

Három helyen adhatunk meg stílusokat:

külön fileban, amit a dokumentum <head> részében adunk meg:

a HTML <head> részében

a HTML elemben

Fontos, hogy a lejjebb lévő szinten megadott meghatározás felülírja a korábban megadottat. (innen ered az elnevezés is: cascading = sorba kapcsolás)

(pl. ha a külső fileban egy szövegnek fehér szín van megadva, de a <head>-ben megadott stílusban zöld, viszont a szöveg tagben lévő meghatározásban vörös, akkor a szöveg vörös lesz.)

Stílusok megadása ^

elem {tulajdonság: érték) -> p {font-size: 12pt)

FONTOS!: az érték és a mértékegység közé TILOS szóközt rakni!

<html>
<head>
    <style type="text/css">
        p {
        color:green;
        font-weight:bold;
        }
    </style>
</head>
<body>
    <p>zöld, félkövér (a fejben megadott stílus miatt)</p>
    <p style="color:red;">vörös, félkövér (a fejben megadott
    stílus + az elemben megadott vörös szín) </p>
</body>
</html>

Elemek meghatározása (selectorok) ^

Ha az elem típusát adjuk meg, akkor a stílus az összes ilyen elemre vonatkozik: "elem{}"

p {color:#FF0000} -> az oldal összes <p> eleme vörös lesz

Az elemeknek osztályt is adhatunk meg: "elem.osztály{}"<br /> (egy osztályba több elem is tartozhat)

<head>
    <style type="text/css">
        p {
        color:green;
        }

        p.masfajta {
        color:red;
        }
    </style>
</head>
<body>
    <p>zöld</p>
    <p class="masfajta" >vörös</p>
    <p>zöld</p>
</body>

Stílus megadása id alapján: #id {}<br />(az id a HTML elemek egyedi azonosítója, egy azonosító egy htmlben csak egyszer szerepelhet)

<head>
    <style type="text/css">
        p {
        color:green;
        }

        #nemzold {
        color:red;
        }
    </style>
</head>
<body>
    <p>zöld</p>
    <p id="nemzold" >vörös</p>
    <p>zöld</p>
</body>

Gyakran használt tulajdonságok ^

color: (szín) [html színkód v angol név]
text-align: (igazítás) [center, left, right, justified]
background-color: (háttérszín) [html színkód v angol név]
border: (keret) megadás:méret típus szín pl.: "border: 1px solid black"
font-size: (betűméret) [pt]: pl.: "font-size: 12pt"
margin: (távolság a többi elemtől) [px, em, v 100%] pl.: "margin: 10px" v "margin-top: 2em"
width & height: (szélesség & magasság) [px, %, em] pl.: "width: 140px"

Több tulajdonság megadása: meghatározások ";"-vel elválasztva

<p style="color: #af23d1; border: none; margin-left: 1em">blabla</p>

Ajánlott honlapok ^

W3schools CSS
W3schools CSS példák
W3schools CSS referencia
CSS Zen Garden (1 html, sok száz css)
Google a CSS-ről
CSS 2.1 specifikáció (a PDF 423 oldal...)
CSS ellenőrző

Hát, ennyi fért bele mára. Nem sok, nem szép és elég összeszedetlen, de az alapok benne vannak, remélem pár emberkének azért segít valamennyit.

Garpeer
(2009-10-01)
6800 olvasás

Ugrás a lap tetejére