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.