Brzmi już mniej strasznie? A może jeszcze bardziej? W istocie CSS jest o wiele prostszy, niż mogłoby się na starcie wydawać. Wystarczy zapamiętać kilka podstawowych zasad, przy pomocy których tworzymy komendy css. Zacznijmy od początku.
Atrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów. Każda reguła odnosi się do konkretnego elementu (znacznika) i składa się z dwóch części: selektora i deklaracji. Selektor określa do jakich elementów ma zostać przypisane formatowanie, a deklaracja je podaje. W deklaracji umieszczamy jej cechę oraz wartość:
selektor {cecha: wartość}Można więc powiedzieć, że selektor to nic innego jak element wskazujący nam na to, którego elementu strony (lub której grupy elementów) dotyczy dana reguła. Deklaracja to już konkretne atrybuty (takie jak szerokość, kolor) i ich wartości (liczba pikseli, wartość koloru). Atrybuty te wpisywane są między nawiasami klamrowymi.
Jak już wspomniałam, selektor wskazuje nam element lub grupę elementów strony - poprzedzony jest wtedy kropką (dla grupy elementów) lub krzyżykiem "#" (dla pojedynczego elementu). Przykładowo:
.LinkList {text-align: justify}
#LinkList1 {text-align: justify}Komenda pierwsza przyporządkuje styl do wszystkich elementów strony o klasie LinkList, druga natomiast do pojedynczego elementu LinkList1.
Żeby nasz kod był możliwie przejrzysty, CSS daje nam możliwość przypisania do selektora kilku deklaracji. Przykładowo, jeśli chcemy, żeby nasz post miał nie tylko wyjustowany tekst, ale także podkreślony, możemy zawrzeć obie te cechy przy pojedynczym selektorze, oddzielając je średnikami:
selektor {cecha: wartość; cecha: wartość}
.post {text-align: justify; text-decoration: underline}Także selektory można łączyć, o ile chcemy nadać im tą samą cechę i wartość. Przykładowo, możemy ustawić justowanie tekstu dla trzech konkretnych ramek tekstowych znajdujących się na naszym blogu - wystarczy oddzielić selektory przecinkami i ustawić odpowiednią deklarację. Kod będzie wyglądał następująco:
selektor, selektor, selektor {cecha: wartość}
#Text1, #Text2, #Text3 {text-align: justify}Przechodząc przez łączenie stylów, wspomnę także o ich dziedziczeniu. Co to jest i dlaczego warto o tym wspomnieć? Dziedziczenie jest czymś, co bardzo się przydaje i polega na tym, że elementy leżące niżej w hierarchii (potomkowie), dziedziczą atrybuty formatowania, które zostały nadane ich przodkom (elementom znajdującym się wyżej). Może nam to znacznie uprościć sprawę, jeśli chcemy na przykład, by cały tekst znajdujący się w lewej kolumnie został wyjustowany. Zamiast przypisywać deklarację do poszczególnych elementów, wystarczy zdefiniować styl dla kolumny (która znajduje się wyżej w hierarchii). Będzie wyglądało to następująco:
.column-left-inner {text-align: justify}Skąd wiadomo, który element jest w hierarchii wyżej, a który niżej? Wyobraźmy sobie, że nasza kolumna jest pudełkiem oznaczonym literą A. Wrzucone do niego zostały mniejsze pudełeczka - na przykład ramki z tekstem oznaczone jako B. Wyżej w hierarchii będzie ten element, który jest większy i do którego mieszczą się inne, mniejsze. W tym przypadku będzie to pudełko A, a więc kolumna.
Należy jednak pamiętać, że jeśli nadamy potomkom formatowanie sprzeczne z formatowaniem przodków, element przyjmie wartości przyporządkowane w formatowaniu potomka - czyli elementu "mniejszego". Można więc podsumować, że potomkowie dziedziczą formatowanie przodków zawsze, o ile nie jest to sprzeczne z ich własnym.
I zdaje się, że z podstaw absolutnych byłoby na tyle - a przynajmniej mnie nic innego do głowy w tej chwili nie przychodzi. Jeśli coś jest niejasne, proszę pytać, chętnie rozwieję wszelkie wątpliwości.
PS. Mam nadzieję, że ta instrukcja jest mniej chaotyczna i pogmatwana niż mi się wydaje.