Ugrás a fő tartalomhoz

CSS tulajdonságok és értékek

1. Szövegformázás tulajdonságai​

Betűtípus beállítása​

p {
    font-family: Arial, sans-serif;  /* Elsődleges és tartalék betűtípus */
}

Gyakori betűtípus-családok:

  • serif - talpas betűk (pl. Times New Roman)
  • sans-serif - talp nélküli betűk (pl. Arial)
  • monospace - fix szélességű betűk (pl. Courier)

Betűméret​

p {
    font-size: 16px;                /* Pixelben megadva */
    font-size: 1.2em;               /* Relatív méret */
    font-size: 120%;                /* Százalékos méret */
}

Betűstílus és vastagság​

p {
    font-weight: bold;              /* Félkövér */
    font-weight: normal;            /* Normál */
    font-style: italic;             /* Dőlt */
}

Szövegigazítás​

p {
    text-align: left;               /* Balra */
    text-align: center;             /* Középre */
    text-align: right;              /* Jobbra */
    text-align: justify;            /* Sorkizárt */
}

2. Színek és háttér​

Szövegszín​

p {
    color: red;                     /* Névvel */
    color: #FF0000;                 /* Hexadecimális */
    color: rgb(255, 0, 0);         /* RGB */
}

Háttérszín​

div {
    background-color: lightgray;    /* Névvel */
    background-color: #f0f0f0;      /* Hexadecimális */
}

Átlátszóság​

div {
    opacity: 0.5;                   /* 0 és 1 között */
}

3. Méret és térköz​

Szélesség és magasság​

div {
    width: 200px;                   /* Fix szélesség */
    height: 100px;                  /* Fix magasság */
    max-width: 800px;              /* Maximum szélesség */
    min-height: 400px;             /* Minimum magasság */
}

Margó (külső térköz)​

div {
    margin: 10px;                   /* Minden oldalon */
    margin-top: 10px;              /* Felül */
    margin-right: 20px;            /* Jobbra */
    margin-bottom: 10px;           /* Alul */
    margin-left: 20px;             /* Balra */
    
    /* Rövidített írásmód (fent, jobbra, lent, balra) */
    margin: 10px 20px 10px 20px;
}

Padding (belső térköz)​

div {
    padding: 10px;                  /* Minden oldalon */
    padding-top: 10px;             /* Felül */
    padding-right: 20px;           /* Jobbra */
    padding-bottom: 10px;          /* Alul */
    padding-left: 20px;            /* Balra */
    
    /* Rövidített írásmód */
    padding: 10px 20px 10px 20px;
}

4. Szegélyek​

Alap szegély​

div {
    border: 1px solid black;       /* Vastagság, stílus, szín */
}

Szegély részei külön​

div {
    border-width: 1px;             /* Vastagság */
    border-style: solid;           /* Stílus */
    border-color: black;           /* Szín */
}

Szegély oldalanként​

div {
    border-top: 1px solid black;    /* Felső szegély */
    border-right: 2px dotted red;   /* Jobb szegély */
    border-bottom: 1px solid black; /* Alsó szegély */
    border-left: 2px dotted red;    /* Bal szegély */
}

5. Képek formázása​

Képméretezés​

img {
    width: 400px;                   /* Fix szélesség */
    height: auto;                   /* Arányos magasság */
    max-width: 100%;               /* Reszponzív méretezés */
}

Kép igazítása​

img {
    display: block;                 /* Blokkszintű megjelenítés */
    margin: 0 auto;                /* Középre igazítás */
}

6. Jó gyakorlatok mértékegységeknél​

Mikor mit használjunk:​

  • px - Fix méreteknél (szegély, kis méretű elemek)
  • em - Relatív betűméreteknél (az aktuális betűmérethez képest)
  • rem - Relatív betűméreteknél (a gyökérelem betűméretéhez képest)
  • % - Relatív szélességeknél, magasságoknál
  • vw, vh - Viewport-függő méreteknél

Példák:​

body {
    font-size: 16px;               /* Alap betűméret */
}

h1 {
    font-size: 2em;                /* Kétszeres betűméret */
}

.container {
    width: 80%;                    /* A szülő 80%-a */
    max-width: 1200px;            /* Maximum szélesség */
}

7. Gyakorlati példák​

1. Cikk formázása​

article {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

article h1 {
    font-size: 2em;
    color: #333;
    text-align: center;
}

article p {
    margin-bottom: 1.2em;
    text-align: justify;
}

2. Kártya elem​

.card {
    width: 300px;
    padding: 20px;
    margin: 10px;
    background-color: white;
    border: 1px solid #ddd;
}

.card img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.card h2 {
    color: #333;
    margin-bottom: 10px;
}

8. Ellenőrző kérdések​

  1. Mi a különbség a margin és padding között?
  2. Hogyan lehet egy képet reszponzívvá tenni?
  3. Mikor használjunk em-et és mikor px-et?
  4. Hogyan lehet egy elemet vízszintesen középre igazítani?
  5. Mi a különbség a színek különböző megadási módjai között?

9. Gyakorló feladatok​

1. Alapfeladat​

Készíts egy stíluslapot, amely:

  • Beállít egy alapértelmezett betűtípust
  • Megfelelő térközöket ad a bekezdéseknek
  • A címsorokat középre igazítja
  • A képeket reszponzívvá teszi

2. Haladó feladat​

Készíts egy híroldal-szerű elrendezést:

  • Főcím középen
  • Bekezdések sorkizártan
  • Képek középre igazítva
  • Megfelelő térközök az elemek között

A következő leckében a CSS dobozmodellel fogunk részletesebben foglalkozni, amely segít megérteni, hogyan épülnek fel az elemek a weboldalon.