Selektory CSS - jak powstają reguły w arkuszach stylów

Czas najwyższy zająć się wyglądem naszego szablonu, czyli regułami zawartymi w pliku style.css.

Kiedy otworzysz sobie w swoim edytorze ten plik, od razu zauważysz, że jego budowa jest bardzo powtarzalna. Plik CSS składa się bowiem w całości z reguł ustalających wygląd poszczególnych elementów strony.

Ogólna budowa takiej reguły jest następująca:

selektor
{
   atrybut1: wartość;
   atrybut2: wartość;
   ...
   atrybutN: wartość;
}

Selektor to nic innego jak wskaźnik wskazujący nam na to, którego elementu strony (lub której grupy elementów) dotyczy dana reguła.

Po selektorze mamy już konkretne atrybuty (takie jak na przykład szerokość, kolor) i ich wartości (na przykład liczbę pikseli i wartość koloru). Atrybuty te zawarte są między nawiasami klamrowymi, a każdy z nich zakończony jest średnikiem.

Na przykład poniższy selektor dotyczy znacznika <body>:

body
{

A ten odnosi się do wszystkich znaczników <img>, czyli wszystkich obrazków na stronie:

img
{

Selektor może wskazywać również na jeden konkretny element o określonym identyfikatorze, na przykład na któryś z pojemników na stronie. Wówczas jego nazwa poprzedzona jest krzyżykiem # (tak zwanym haszem):

#topCont
{

Może też wskazywać na wszystkie elementy danej klasy, wówczas jego nazwa poprzedzona jest kropką:

.bottom
{

Sposobów budowania selektorów jest całkiem sporo, możesz określać na prawdę bardzo szczegółowe reguły, dobierając się do pojedynczych elementów strony lub tylko do wybranych według bardzo zakręconych reguł.

Nam w tej chwili wystarczy poznanie jeszcze tylko jednej reguły, która wybiera element zawarty w innym elemencie. Na przykład przedstawiony poniżej kod wybiera wszystkie znaczniki <a> zawarte w pojemiku topleft:

#topleft a
{

Pamiętaj jeszcze tylko o tym, że jeżeli jest kilka reguł, to do danego elementu dopasowywana jest ta, która określa go najdokładniej. Czyli wspomniana wyżej reguła dla znaczników <a> w pojemniku topleft jest dokładniejsz niż na przykład ogólna reguła dla wszystkich znaczników <a>.

W CSS istnieje jeszcze coś takiego jak mechanizm dziedziczenia. Polega on na tym, że jeżeli określisz atrybuty dla jakiegoś znacznika to wszystkie znaczniki znajdujące się w nim przyjmą również te atrybuty. Czyli jak określisz na przykład, że w danym pojemniku wszystko ma być żółte to nie musisz pisać osobnych reguł dla każdego możliwego znacznika, którego do tego pojemnika wrzucisz. Będzie on domyślnie żółty, a dopiero jeżeli chcesz żeby było inaczej to musisz napisać szczegółową regułę.

Mam nadzieję, że nie namieszałem za bardzo. A nawet jeśli, to wszysto stanie się jasne kiedy przejdziemy do analizowania naszego pliku CSS.