CSS: Pojęcia selektor, cecha i wartość

We wstępie powiedzieliśmy sobie do czego służą style i czy warto je stosować. Wiemy już, że warto i wiemy także do czego służy CSS. Ale nie wiemy najważniejszego: jak zbudować styl. Spokojnie, za chwilę się tego nauczymy.

Wstawiamy pierwszy styl

Ogólna postać arkusza stylu wygląda tak:

Oczywiście nic by się nie stało, gdybyśmy napisali w ten sposób:

Selektor jest tym elementem, dla którego zamierzamy zdefiniować styl. Przykładowo, jeżeli chcemy ustalić kolor tła dla tabeli, to jako selektor musimy podać table, jako cechę – tą właściwość, którą chcemy tabeli przyporządkować – background-color oraz, co jest zrozumiałe, musimy nadać wartość dla tej cechy, np. #FFFFFF albo white. Jak widać, kolory można definiować w dwojaki sposób: korzystając z wartości szesnastkowych (np. #000000 – kolor czarny) albo z angielskich nazw (np. black – kolor czarny). Wypróbujmy nasz przykład:

Pary cecha:wartość ZAWSZE oddzielamy od siebie średnikiem <b>”;”</b>, a jeśli cecha ma kilka wartości, to oddzielamy je od siebie przecinkami. Jeżeli np. chcemy zdefiniować TE SAME cechy i dla tabeli i np. akapitu, to możemy skorzystać ze sprytnej sztuczki, jaką jest grupowanie selektorów.

Dowiemy się teraz trochę więcej o poszczególnych rodzajach selektorów.

Selektory HTMLowe

Są nimi tagi html-a (np. omawiany już table czy td), tylko pozbawione znaków „<” i „>”. Np. znacznik <p> będzie prezentował się w stylach jako p (albo P, wielkość nie ma znaczenia). Wypróbujmy:

Selektory klas

Drugim rodzajem selektora jest selektor klas. Najpierw musimy nazwać jakoś naszą klasę. Niech będzie to np. „webinside”. Klasie tej przypisujemy pary cecha:wartość, dokładnie tak samo jak w przedstawionym powyżej selektorze HTMLowym.

Różnica między tymi dwoma selektorami polega tylko na tym, że w selektorze HTMLowym przypisujemy właściwości konkretnemu elementowi strony (np. tabeli), a w selektorsze klas każdy znacznik htmla opatrzony tą klasą, będzie miał wartości zdefiniowane dla klasy (w tym przypadku wielkość czcionki 12 punktów). Możemy jednak zdecydować, że TYLKO konkretny znacznik htmla opatrzony klasą, będzie miał jej właściwości. Niech będzie to na przykład <p>. Wtedy napiszemy coś takiego:

W tym przypadku wielkość czcionki 12pt będzie miał tylko akapit (czyli <p>), jeżeli jako jego klasę podamy „webinside”. No dobrze, ale jak podać tą klasę? Robimy to w następujący sposób:

Selektory uniwersalne

Bardzo „sprytny” rodzaj selektorów. Wartości zdefiniowane w nim przyjmuje KAŻDY element na stronie. Jeżeli dla selektora uniwersalnego ustalimy krój i kolor tekstu, to cały tekst, (w tabelach, akapitach, w wykazach itp.) będzie wyświetlany tą czcionką i tym kolorem, jaki zdefiniowaliśmy w stylu dla selektora uniwersalnego. Zapisujemy go w ten sposób:

Selektory identyfikatora

Bardzo przypominają one selektory klas. Różnica pomiędzy nimi, a selektorami klas jest taka, że styl zdefiniowany dla klasy możemy nadać wielu takim samym znacznikom na stronie (np. na stronie może być wiele znaczników p i możemy im wszystkim nadać klasę), a selektor identyfikatora oddziaływuje TYLKO na jeden konkretny znacznik na stronie (np. na jeden ze znaczników p). Identyfikator deklarujemy tak:

Aby zaś przypisać identyfikator jakiemuś znacznikowi na stronie, piszemy coś takiego:

Wymieniłem tutaj cztery (najważniejsze) rodzaje selektorów, choć tak naprawdę jest ich dużo więcej. Jednak najczęściej będziesz korzystać podczas budowania swoich stylów z tych wymienionych powyżej.

Cechy

OK, każdy z was jest już prawie mistrzem selektorów, teraz kolej na nauczenie się cech (a raczej poznanie ich bliżej). Jak już wspomnieliśmy, cecha jest tym co chcemy określić dla danego elementu. Jeżeli chcemy określić kolor dla tekstu, to cechą będzie właśnie ten kolor. Oczywiście cecha musi mieć jakąś wartość, ale o tym później. Duży spis cech znajdziesz w artykule „Tabela właściwości CSS”. Omówię tutaj tylko kilka podstawowych, najczęściej stosowanych cech. Formatując tekst w CSS możemy posłużyć się następującymi cechami:

Elementy odnoszące się do tła to:

Jeżeli chcemy ustalić marginesy możemy posłużyć się:

Cechy przeznaczone dla obramowania:

Wartości

Czas omówić wartości. Nie podzielę ich na wartości dotyczące obramowania, tekstu itp., ponieważ wiele z nich można stosować do różnych rzeczy. Jeżeli jakaś wartość będzie dotyczyła TYLKO jakiegoś elementu (np. obramowania), to wyraźnie to zaznaczę.

Po przeczytaniu tego artykułu wiesz już podstawowe rzeczy o stylach, teraz czas rozwijać umiejętności! Czytaj następne artykuły. Więcej wartości wraz z cechami znajdziesz w artykule „Tabela właściwości CSS”.