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
-
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 {
/* ... */
} -
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
-
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
- Mi a különbség az osztály és az azonosító között?
- Hogyan öröklődnek a CSS tulajdonságok?
- Mikor használjunk osztályt és mikor azonosítót?
- Hogyan lehet felülírni az örökölt tulajdonságokat?
- 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.