Sok formázási módot megtanultunk az utóbbi hetekben, s ezentúl áttérünk a további "formázásokhoz". Azért idézőjelben, mert nem igazán olyan formázás lesz ez, mint az eddigiek, hanem legfőképpen az elhelyezkedésen, s más érdekességeken fogunk változtatni. Kezdjünk is bele.
CSOPORTOSÍTÁS - GROUPING
Eddigi tanulmányaink során minden elemet külön formáztunk, de most megtanuljuk, hogy hogyan lehet egy tulajdonságot több elemhez is hozzárendelni (most nem az egyforma classokról lesz szó, mert ezt már megbeszéltük).
Vegyük azt, hogy az oldalon belül az összes bekezdésnek, linknek ugyan azokat a tulajdonságokat szeretnénk megadni. A következőképpen tehetjük meg:
p, a{
color:green;
}
Tehát a formázandó elemeket vesszővel elválasztva egymás mellé írjuk. Fontos, hogy ott legyen a vessző. Okát a vonal alatt nézzük meg:
NESTING
Azok a formázások, amelyeket eddig csináltunk, az egész oldalra globálisan hatottak (kivéve az ID szerinti formázásokat). Tehát ha beállítottuk, hogy a bekezdésen belüli szöveg legyen zöld, akkor az minden bekezdésre vonatkozott.
p{
color:green;
}
De mi van akkor, ha csak a bekezdéseken belüli LINKEKET akarom zöldre? Így tehetem meg:
p a{
color: green;
}
Ez mind szép és jó, de akkor miért nem csak simán a linkeket formáztam?
Vegyünk egy példát:
akarunk agy mebübar-t, valami nagyon különleges formázással (menüt mindig listával készítünk). Elkészítjük hozzá a kódot:
ul{
font-family:arial;
font-size:18px;
color:green;
background-color:red;
}
Boldogok vagyunk, mert tök jól néz ki. De aztán, amikor a tartalmi részre szeretnénk egy listát létrehozni, arra is érvényes lesz a formázás. Most kezdhetjük előröl a formázást, ahelyett, hogy létrehoztunk volna egy div-et menü ID-vel és a következő kódot írtuk volna meg:
#menü ul{
font-family:arial;
font-size:18px;
color:green;
background-color:red;
}
Kicsit elegánsabb megoldás... Tehát akkor mi is a nesting? Segítségével formázhatunk egy elemen belül egy másik elemet, anélkül, hogy az a többi, ugyan olyan típusú elemre hatással lenne.
A mai harmadik témánk nagyon egyszerű lesz, hiszen már beszéltünk róla. A szélesség és a magasság beállításáról lesz szó. Vagyis csak megemlítem a lehetőségeket:
Az első oszlopban a tulajdonság, a másodikban, hogy mit csinál, a harmadikban a lehetséges értékei (a hossz a a számot jelöli), a negyedikben pedig az, hogy hányadik CSS támogatja (nekünk egyelőre nem fontos).
| height | Megmondja az elem magasságát. | auto hossz % | 1 |
| max-height | Megmondja az elem maximum magasságát. | none hossz % | 2 |
| max-width | Megmondja az elem maximum szélességét. | none hossz % | 2 |
| min-height | Megmondja az elem minimum magasságát. | hossz % | 2 |
| min-width | Megmondja az elem minimum szélességét. | hossz % | 2 |
| width | Megmondja az elem szélességét. | auto hossz % | 1 |
Ennyit mára :D Holnap folytatjuk...
Nincsenek megjegyzések:
Megjegyzés küldése