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:
| selektor {cecha:wartość; cecha:wartość; cecha:wartość;} |
Oczywiście nic by się nie stało, gdybyśmy napisali w ten sposób:
| selektor { cecha:wartość; cecha:wartość; cecha:wartość;} |
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:
| table {background-color:white;} |
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.
| table, p {background-color:white;} |
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:
| P {font-style:italic;} |
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.
| .webinside {font-size:12pt;} |
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:
| P.webinside {font-size:12pt;} |
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:
| <p class=”webinside”>jakiś tekst w akapicie</p> |
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:
| * {font-family:verdana,arial,’times new roman’; color:yellow;} |
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:
| #nasz_identyfikator {cecha:wartość; cecha:wartość; cecha:wartość;} |
Aby zaś przypisać identyfikator jakiemuś znacznikowi na stronie, piszemy coś takiego:
| <p id=”nasz_identyfikator”>tekst, tekst i jeszcze raz tekst</p> |
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:
| font-size – definiuje wielkość czcionki font-family – definiuje rodzinę czcionek font-style – ustala styl tekstu font-weight – odpowiada za wagę czcionki color – ustala kolor tekstu letter-spacing – definiuje odstępny między literami text-decoration – określa dekorację tekstu text-indent – ustala wielkość wcięcia w tekście |
Elementy odnoszące się do tła to:
| background-image – obrazek jako tło background-color – definiuje kolor tła background-attachment – ustala zaczepienie tła background-position – określa pozycję tła background-repeat – odpowiada za powtarzanie się tła |
Jeżeli chcemy ustalić marginesy możemy posłużyć się:
| margin-left – ustawia lewy margines margin-right – ustawia prawy margines margin-top – ustawia górny margines margin-bottom – ustawia dolny margines padding-left – ustawia lewy wewnętrzny margines padding-right – ustawia prawy wewnętrzny margines padding-top – ustawia górny wewnętrzny margines padding-bottom – ustawia dolny wewnętrzny margines |
Cechy przeznaczone dla obramowania:
| border-width – grubość obramowania border-style – styl obramowania border-color – kolor 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ę.
| pt – punkty (np. wielkość czcionki) pc – pica (czyli 12pt, np. wielkość czcionki) px – piksele (np. wielkość czcionki) cm – centymetry (np. wsielkość czcionki czy margines) in – cal (ok. 2,5 cm, np. wielkość czcionki czy margines) xx-small – wielkość czcionki, najmniejsza x-small – wielkość czcionki small – wielkość czcionki medium – wielkość czcionki large – wielkość czcionki x-large – wielkość czcionki xx-large- wielkość czcionki, największa % – procenty (np. margines czy wielkość czcionki) red – kolor (czerwony, nazwa angielska, np. kolor tła) #FF0000 (czerwony, wartość szesnastkowa, np. kolor tła) none – nic (np. dekoracja tekstu, czy styl obramowania) dashed – tylko styl obramowania dotted – tylko styl obramowania solid – tylko styl obramowania double – tylko styl obramowania groove – tylko styl obramowania ridge – tylko styl obramowania inset – tylko styl obramowania outset – tylko styl obramowania italic – pochylenie (tylko styl czcionki) bold – pogrubienie (tylko waga czcionki) bolder – większe pogrubienie (tylko waga czcionki) lighter – cieńsza czcionka (tylko waga czcionki) underline – podkreślenie (tylko dekoracja tekstu) overline – nadkreślenie (tylko dekoracja tekstu) line-through – przekreślenie (tylko dekoracja tekstu) normal – wartość domyślna (np. styl lub wariant czcionki) small-caps – kapitaliki (wariant czcionki) 100 – wartość liczbowa, np. 100 (np. waga czcionki) disc – koło (tylko styl wykazu) circle – okrąg (tylko styl wykazu) square – kwadrat (tylko styl wykazu) decimal – cyfry (tylko styl wykazu) lower-roman – małe cyfry rzymskie (tylko styl wykazu) upper-roman – duże cyfry rzymskie (tylko styl wykazu) lower-alpha – małe litery (tylko styl wkazu) upper-alpha – duże litery (tylko styl wykazu) repeat – powtarzanie (tylko powtarzalność tła) no-repeat – brak powtarzania (tylko powtarzalność tła) fixed – tło nieruchome na ekranie (tylko zaczepienie tła) scroll – tło przewijane razem z tekstem (tylko zaczepienie tła) top – góra (np. pozycja tła lub tabeli) left – lewo (np. pozycja tła lub tabeli) right – prawo (np. pozycja tła lub tabeli) bottom – dół (np. pozycja tła lub tabeli) |
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”.
