Mi az a CSS szintaktika?
CSS szabályok: így épül fel a varázslat szelektorokból, tulajdonságból és értékből
Mi az a CSS szintaktika?
A CSS olyan, mint egy prezentáció: ha nem stimmelnek a színek, a betűtípus vagy az elrendezés, az egész amatőrnek hat – még akkor is, ha a tartalom ütős.
Ahogy egy prezentációhoz dizájnelveket használunk, a CSS-ben szabályokkal kommunikálunk a böngészővel. A szintaktika pedig megmondja, hogyan kell ezeket a szabályokat jól megfogalmazni.
A 3 fő elem, amit meg kell jegyezned
- szelektor – megmondja, mit akarsz formázni (pl.: címsor, bekezdés, gomb)
- tulajdonság – megmondja, milyen stílust akarsz rá
- érték – megmondja, pontosan hogyan nézzen ki
h1 {
color: blue;
}
Ez így olvasva annyit jelent: A címsor (h1) legyen kék színű (blue)
De mi van, ha több dolgot akarsz?
A CSS imádja a listákat. Ha a bekezdéseidre (p) többféle stílust akarsz, simán mehetnek egymás alá.
✅ Fontos szabályok, amiket mindig tarts be:
-
A tulajdonságokat új sorba írd, hogy átlátható maradjon
-
Minden tulajdonság után jön egy pontosvessző (
;) – ezt nem szabad elfelejteni! -
A nyitó kapcsos zárójelet
{közvetlenül a szelektor után írd -
A záró kapcsos zárójel
}zárja le a stílusblokkot
h1 {
color: red;
text-align: center;
font-size: 28px;
}
A legfontosabb karakterek a CSS-ben
| Jel | Jelentés |
|---|---|
{ } |
kapcsos zárójelek közé írjuk a stílusokat |
: |
elválasztja a tulajdonságot és az értéket |
; |
minden stílus végére kell (kivéve az utolsóra – de szokás oda is írni) |
TIPP:
Feladat a leckéhez
-
Írj egy html oldalt, amiben van egy <h1> és egy <p>
- Írj hozzá belső CSS-t a <style> tag segítségével
- Formázd meg a tanultak alapján!
Elakadtál?
Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot
Egy lehetséges megoldás
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<title>CSS példa</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
font-size: 36px;
}
p {
color: #333333;
font-size: 18px;
text-align: justify;
}
ul {
color: darkgreen;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Ez egy címsor</h1>
<p>Ez egy bekezdés, amit már formáztunk CSS segítségével.</p>
<ul>
<li>Első elem</li>
<li>Második elem</li>
<li>Harmadik elem</li>
</ul>
</body>
</html>