Vissza a tutorialok listájához

: Bevezetés a CSS-be

„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:
  • <link rel="stylesheet" type="text/css" href="mystyle.css" />

  • a HTML <head> részében
  • <style type="text/css"> bla {blablabla:blablabla;} </style>

  • a HTML elemben
  • <p style="blablbla:ksjdhf;">sdf</p>


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 ^


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)
4434 olvasás

Ugrás a lap tetejére

Mi ez az oldal?

Üdvözlünk a KockArton!

Ez itt egy grafikai közösségi oldal. Találhatsz itt képeket, tutorialokat, fórumozhatsz és chatelhetsz más alkotókkal, kritikákat adhatsz és kaphatsz. Az oldal egyaránt foglalkozik CG és hagyományos grafikákkal is.

Bejelentkezés

Még nem vagy tag? Regisztrálj itt!

Elfelejtetted a jelszavad? Segítünk!

(?)

Chat

Kockart chat

loading

¦¦¦

Online Tagok

    0 / 1759 tag online

    0 vendég

    [tagok listája]

    [A panel bezárásához kattints rá!]