CSS stílusok felépítése

Last updated 5 years ago

CSS stílusok felépítése

CSS elhelyezése HTML állományokban

Szövegközi stílusok (inline style)

A CSS stílusokat egy HTML elem style elhelyezve csak arra az egy elemre fognak vonatkozni. A következő példában egy bekezdés, vagyis egy p elem szövegszínét és betűméretét állítjuk be:

<p style="color: blue; font-size: 1.5em;">Lorem ipsum dolor sit amet</p>

Beágyazott stíluslapok

A CSS stílusokat elhelyezhetjük egy HTML állomány egy style elemben. A style elemben CSS nyelvi szabályok lesznek érvényesek.

<style>
    p {
        font-size: 1.5em;
    }
    
    p.blue {
        color: blue;
    }
</style>

Külső stíluslapok

<link rel="stylesheet" type="text/css" href="style.css">

A külső CSS állomány kiterjesztése .css lehet.

A link elemeket minden esetben a HTML állomány fejlécében, a head elemben kell elhelyezni:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
...

A külső CSS állomány nagy előnye, hogy több HTML oldalba is be lehet kötni ugyan azt a CSS állományt, így csökken a letöltendő adatmennyiség, és a stílusokat egy központi helyen tudjuk kezelni.

CSS importálása

Egy CSS állományba behívhatunk egy másik CSS állományt @import segítségével.

@import url('style.css');

Megjegyzések

Megjegyzés (comment) /* */ jelek használatával hozható létre CSS-ben

A /* és a */ karaktersorozatok közötti részt a böngésző figyelmen kívül hagyja.

/*
    Ez egy megjegyzés.
*/

Stílusok felépítése

CSS stílus (CSS rule)

Kijelölők (selector)

A kijelölő a kapcsos zárójel előtt helyezkedik el, és tipusától függően hivatkozik egy vagy több HTML elemre. A következő példában az összes h1 (főcím) elem szövegszínét állítjuk be vörösre:

h1 {
    color: red;
}

A kijelölőket lehet csoportosítani vesszővel elválasztva több elemre is vonatkoztathatjuk ugyan azt a szabályt. A következő példában már nem csak a h1 elem szöveg színét állítjuk be, a h2 h3 h4 HTML elemek szövegszínét is vörösre állítjuk:

h1,
h2,
h3,
h4 {
    color: red;
}

A kijelölő szűrhet bizonyos elemkombinációkra, ekkor a szülőkön keresztül célozzuk meg az adott elemet. A következő példában a h1 elemekben lévő span elemek szövegszínét kékre állítjuk:

h1 span {
    color: blue;
}

Meghatározások

A meghatározásokat a kijelölő utáni kapcsos zárójelben helyezzük el, egymástól pontosvesszővel elválasztva. Az utolsó meghatározás, vagy CSS szabály után nem kell pontosvessző (általában ki szoktuk tenni).

p {
    color: #323232;
    font-size: 1.25em;
    line-height: 1.125em
}

Egy meghatározás kulcsszóból, vagy névből, és a hozzá tartozó értékből áll, kettősponttal elválasztva.

Léteznek gyorsírásos szabályok, amikben több értéket is megadhatunk. Ebben az esetben az értékeket szóközzel kell elválasztani.

p {
    margin: 10px auto 15px auto;
    padding: 0px 5px;
    font: small-caps italic bold 16px Helvetica;
}

PreviousMi az a CSS?NextKijelölők