Néhány szó a CSS-ről, mire jó, miért használjuk
A stílusok megírása előtt ki kell választanunk az elemeket, majd megírni rájuk a megelelő stílusokat melyeket szeretnénk.
Az elemek kiválasztásához használjuk a selector-oknak nevezett sokféle leírást, melyek az elemekre hivatkoznak.
Hivatkozhatunk az elemekre a HTML tag neve szerint, az elemeknek beállított class-ra, ID-ra, bármelyik tulajdonságának értékére, az elemek alelemeire, az elemek szomszédaira (azonos szinten levő közvetlen utánna levő elem), stb. A lehetőségek szinte határtalanok.
Lássunk néhány példát:
/* Az összes div elemre vonatkozik */
div {}
/* Azokra az elemekre vonatkozik, melyeknek van class="product" tulajdonsága */
.product {}
/* A fennebb leírt elem alelemei között található div elemekre vonatkozik */
.product div {}
/* Arra és csak arra az egy elemre vonatkozik melynek, van id="product" tulajdonsága */
#product {}
/* Az összes input elemre vonatkozik */
input {}
/* Azokra az input elemekre vonatkozik, melyeknek van type="text" tulajdonsága */
input[type="text"] {}
/* Arra a div elemre vonatkozik mely rendelkezik egy class="product" tulajdonsággal */
div.product {}
/* Arra a div elemre vonatkozik, mely rendelkezik egy class="product item" tulajdonsággal */
div.product.item {}
Ezeket a selector-okat kombinálva egyre pontosabban meg tudjuk határozni, hogy mely elemekre szeretnénk stílust írni.
Fontos tudnivaló, hogy:
ha a selector-okat szünet nélkül írjuk le: div.product azokra a div elemekre vonatkozik, amelyek rendelkeznek egy product class értékkel.
ha teszünk közéje szünetet: div .product akkor a div elem al elemei között található más elemekről beszélünk, amelyek rendelkeznek egy class="product" értékkel.
Lehetőségünk van még elemek kiválasztására ha rá tettük az egeret:
/* Azokra div elemekre vonatkozik amelyekre rátettük az egeret */
div:hover {}
/* Azokra az elemekre vonatkozik melyeknek van class="product" tulajdonsága és rajta van az egér. */
.product:hover {}
Továbbá azokra melyek be vannak pipálva, ki vannak választva, aktívak, stb. ezeket a : segítségével tehetjük meg.
/* Azokra a checkbox-okra vonatkozik, melyek be vannak pipálva */
checkbox:checked {}
/* Azokra az option elemekre vonatkozik, melyek ki vannak választva egy legördülő listában */
option:selected {}
/* Az aktív link elemekre vonatkozik */
a:active {}
/* A nem aktív input elemekre vonatkozik */
input:disabled {}
/* Azokra a li elemekre vonatkozik, melyek első elemek egy ul elemen belül */
ul li:first-child
/* Minden li elemre vonatkozik, amely utolsó eleme egy ul-en belül található elemek közül */
ul li:last-child {}
/* Minden olyan div elemre vonatkozik, melyek a szülő elemen belül az utolsó div elemek */
div div:last-child {}
/* Azokra a li elemekre vonatkozik, melyek nem rendelkeznek egy class="menu" tulajdonsággal, ezt úgy is mondjuk, hogy nincs "menu" class-ja */
li:not(.menu) {}
Amennyiben nem szeretnénk azonos tulajdonságokat sokszor leírni, ezáltal spórolni a hellyel, a betűkkel, idővel módosítás esetén, az azonos tulajdonságokat írhatjuk több selector-ra egyaránt, ebben az esetben a selector-okat vesszővel elválasztva írjuk egymás után, pl:
checkbox:checked,
option:selected
{
/* tulajdonságok */
}
/* vagy */
a:active,input:disabled
{
/* tulajdonságok */
}
/* vagy */
div .product checkbox:checked,
#content ul li select option:selected
{
/* tulajdonságok */
}
Ebben az esetben vigyázni kell, mert ha kifelejtünk 1 vesszőt, vagy a végére is teszünk plusszban, akkor a teljes tulajdonság beállítás érvénytelen lesz. Nem veszi figyelembe a böngésző.
