Kihagyás

CSS ismétlés

A HTML-t a tartalom megjelenítésére és strukturálására használtuk. Ha a weboldalon megjelenő tartalmat formázni szeretnénk, akkor ezt CSS segítségével tehetjük meg.

Beszúrás HTML-be

HTML kódba többféleképpen is szúrhatunk be CSS formázásokat.

Az inline CSS esetén a tagek style attribútumaként adjuk meg az adott objektum formázását.

1
<p style="color: blue">I'm blue da ba dee da ba die...</p>

Figyelem

Az inline CSS használata se nem szép, se nem hatékony, ezért ha csak lehet, kerüljük a használatát!

Az internal (belső) CSS-t a <head>-ben adjuk meg a <style> tag segítségével. Ekkor a formázások az aktuális dokumentumra lesznek érvényesek.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>CSS alapok</title>
        <meta charset="UTF-8"/>
        <style>
            p { color: blue; }
        </style>
    </head>
    <body>
        <p>I'm blue da ba dee da ba die...</p>
        <p>Da ba dee da ba die...</p>
    </body>
</html>

Az external (külső) CSS-t szintén a <head>-ben adjuk meg. Az external CSS lényege, hogy egy külső CSS fájlt ágyazunk be, amelynek a formázásai érvényesek lesznek a csatoló HTML dokumentumokra. Ezt a beágyazást a <link/> páratlan taggel tehetjük meg.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <title>CSS alapok</title>
        <meta charset="UTF-8"/>

        <!-- A "main.css" nevű CSS fájl beágyazása -->
        <link rel="stylesheet" href="main.css"/>
    </head>
    <body>
        <!-- A weboldal tartalma... -->
    </body>
</html>

A CSS szintaxisa

Kommentek

CSS-ben kommenteket a következő szintaxissal adhatunk meg:

1
/* Ez egy komment a CSS kódban */

Utasítások szintaxisa

A CSS utasítások általános szintaxisa a következőképpen néz ki:

1
2
3
4
5
szelektor {
    tulajdonság1: érték1;
    tulajdonság2: érték2;
    ...
}

A szelektor (más néven kijelölő) segítségével megadjuk, hogy mely objektumot (vagy objektumokat) szeretnénk formázni. Kapcsos zárójelek között pontosvesszővel elválasztva megadjuk az elvégzendő formázásokat tulajdonság: érték formában. A tulajdonság az adott objektum formázni kívánt tulajdonsága (pl. betűszín, margó), az érték pedig a kérdéses tulajdonsághoz tartozó, beállítani kívánt érték.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* egy egyszerűbb szelektor */

body {
    margin: 0;                          /* margó */
    padding: 0;                         /* térköz */
    background-color: #f0f0f0;          /* háttérszín */
    font-family: Arial, sans-serif;     /* betűtípus */
}

/* egy összetettebb szelektor */

#main-content .centered {
    text-align: center;                 /* középre igazítás */
}

Ezen a kurzuson nem vesszük át a CSS-ben formázható tulajdonságokat. Akit ez viszont érdekel, az a webtervezés gyakorlati jegyzetben megtalálhatja ezeket.

Fontosabb szelektorok

Az alábbiakban áttekintjük a leggyakrabban használatos CSS szelektortípusokat. Az összes lehetséges szelektortípust megtalálhatjuk ezen a linken.

  • div: kijelöli az összes <div> elemet (element selector)
  • .foo: kijelöli az összes class="foo" attribútummal rendelkező elemet (class selector)
  • #foo: kijelöli az id="foo" attribútummal rendelkező elemet (id selector)
  • div, p: kijelöli az összes <div> és <p> elemet (group selector)
  • div p: kijelöli az összes olyan <p> elemet, amely egy <div>-en belül van
  • div > p: kijelöli az összes olyan <p> elemet, amelynek közvetlen szülője egy <div>
Utolsó frissítés: 2021-11-18 14:51:01