3.2 Minta oldal és css magyarázat

Minta oldal letöltése

style.css online megnyitása

Kezdjük rögtön az első elemmel!

body{

}

Amit ide írsz az az egész oldalra érvényes lesz! Megadhatsz betűtípust, betűszínt, oldal háttérszínt stb…

#tartalom{

}

A html fájlban a legnagyobb doboznak nevezett div tag stílusa. Mivel ebben van benne a másik három doboz, ennek a stílusa érvényes lesz a másik háromra is, mivel ez a szülő!

#tartalom .fejlec{

}

#tartalom .szoveg{

}

#tartalom .lablec{

}

Ezek a három kisebb doboz stílusát változtatják, lehet velük játszadozni, átírkálni a dolgokat, pl színeket, betűméretet, és megnézni az eredményt!

h1{

}

A címsorokról tudni kell, hogy van alapértelmezett beállításuk. Tehát ha te nem nyúlsz hozzá css-ben a h1 tag-hez, vagyis ezt a részt kitörlöd a css fájlból, a címsor akkor sem fog visszaváltozni sima egyszerű szöveggé! Lehet nekik plusz elemeket adni, mint ahogy én is tettem a példában, pl minden betű nagybetű legyen (uppercase), vagy a betűtípusa különbözzön a body részben megadotthoz képest!

Egy-két stíluselem magyarázat:

text-align:justify;

A szöveget amit írsz sorkizárttá teszi, kb mint MS Word-ben.

margin:0px;

padding:0px;

A margin és padding is távolság adásra jó. A kettő között a különbséget úgy tudnám legegyszerűbben leírni, hogy a margin külső távolság, a padding pedig belső. Ha dobozba gondolkodunk akkor a margin a doboz alja és a föld között ad távolságot (jelen esetben másik doboztól való távolságot), míg a padding a doboz alja és a doboz belsejében lévő dolgok között ad távolságot (pl szöveget bentebb helyezi a szélétől). A példában sok helyen használtam mindkettő megoldást, ezekkel is el lehet játszani, átírni a számokat kisebbre nagyobbra, és nézni mi a végeredmény.