Ugrás a fő tartalomhoz

HTML és CSS együttműködése

1. HTML és CSS kapcsolata​

Az alapvető koncepció​

  • HTML: tartalom és struktúra
  • CSS: megjelenés és formázás

Hogyan kapcsolódik össze?​

<!-- HTML fájlban -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="kiemelt">Fontos szöveg</p>
</body>
/* CSS fájlban */
.kiemelt {
    color: red;
}

2. Osztályok használata​

Osztályok definiálása HTML-ben​

<p class="kiemelt">Ez egy kiemelt bekezdés</p>
<p class="kiemelt fontos">Ez kiemelt és fontos</p>

Osztályok stílusozása CSS-ben​

.kiemelt {
    background-color: yellow;
}

.fontos {
    font-weight: bold;
}

/* Több osztály kombinációja */
.kiemelt.fontos {
    border: 1px solid red;
}

Osztályok újrafelhasználása​

<p class="kiemelt">Első kiemelt szöveg</p>
<div class="kiemelt">Második kiemelt elem</div>
<span class="kiemelt">Harmadik kiemelt rész</span>

3. Azonosítók használata​

Azonosító definiálása HTML-ben​

<!-- Azonosítók csak EGYSZER használhatók egy oldalon! -->
<div id="fejlec">
    <h1>Weboldal címe</h1>
</div>

Azonosító stílusozása CSS-ben​

#fejlec {
    background-color: navy;
    color: white;
    padding: 20px;
}

4. Stílusok öröklődése​

Alapvető öröklődés​

<div class="tartalom">
    <p>Ez a szöveg örökli a szülő tulajdonságait</p>
</div>
.tartalom {
    font-family: Arial;
    color: navy;
}

Öröklődés felülírása​

<div class="tartalom">
    <p class="kiemelt">Ez a szöveg saját stílust kap</p>
</div>
.tartalom {
    color: navy;
}

.kiemelt {
    color: red;  /* Felülírja az örökölt színt */
}

5. Elemkiválasztás különböző módjai​

1. Elem alapján​

p {
    margin: 10px 0;
}

2. Osztály alapján​

.kiemelt {
    font-weight: bold;
}

3. Azonosító alapján​

#fejlec {
    background-color: black;
}

4. Hierarchia alapján​

/* Minden p elem a tartalom osztályon belül */
.tartalom p {
    line-height: 1.6;
}

/* Közvetlen gyermek elemek */
.tartalom > p {
    margin: 10px 0;
}

6. Gyakori minták és praktikák​

1. Általános stílusok definiálása​

/* Alapértelmezett stílusok */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

2. Komponens-alapú osztályok​

/* Újrahasználható komponensek */
.gomb {
    display: inline-block;
    padding: 10px 20px;
    background-color: blue;
    color: white;
}

.keret {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px;
}

3. Segédosztályok​

/* Általános segédosztályok */
.kozepre {
    text-align: center;
}

.rejtett {
    display: none;
}

7. Jó gyakorlatok​

  1. Osztályok elnevezése

    • Használj beszédes neveket
    • Kerüld a rövidítéseket
    • Használj kötőjelet a szavak között
    .fo-tartalom {
        /* ... */
    }

  2. Struktúra és szervezés

    • Csoportosítsd a kapcsolódó stílusokat
    • Használj megjegyzéseket a kódban
    • Tartsd logikus rendben a szabályokat

  3. Specifikusság kezelése

    • Kerüld a túl specifikus szelektorokat
    • Ne használj inline stílusokat
    • Minimalizáld az azonosítók használatát

8. Gyakorló feladatok​

1. Alapfeladat​

Készíts egy egyszerű cikk oldalt:

  • Használj osztályokat a különböző részeknél
  • Alkalmazz öröklődő stílusokat
  • Készíts újrafelhasználható komponenseket

2. Haladó feladat​

Készíts egy teljes weboldal vázat:

  • Header, footer, fő tartalom
  • Többszintű menürendszer
  • Különböző stílusú cikk dobozok

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

  1. Mi a különbség az osztály és az azonosító között?
  2. Hogyan öröklődnek a CSS tulajdonságok?
  3. Mikor használjunk osztályt és mikor azonosítót?
  4. Hogyan lehet felülírni az örökölt tulajdonságokat?
  5. Milyen előnyei vannak a komponens-alapú megközelítésnek?

Most, hogy már érted, hogyan működik együtt a HTML és a CSS, képes leszel komplex weboldalak struktúrájának és stílusának létrehozására. A következő témakörökben még részletesebben foglalkozunk a speciális CSS technikákkal és a reszponzív designnal.