11. Podstawy CSS

W kilku poprzednich rozdziałach utworzyliśmy stronę internetową o Richardzie Feynmanie. Choć nie jest to jeszcze bardzo imponujące dzieło, dzięki temu zyskaliśmy solidne podstawy wiedzy na temat budowy dokumentu i elementów HTML, co pozwala nam już bez problemu stworzyć dowolną prostą stronę HTML.

W międzyczasie przy różnych okazjach wielokrotnie przewijały się pojęcie CSS i obietnica, że w jednym z dalszych rozdziałów poznasz tę technologię. Właśnie nadszedł ten czas. Ten rozdział jest jednym z serii rozdziałów wprowadzających do Kaskadowych arkuszy stylów.

To, czym w ogóle są Kaskadowe arkusze stylów (and. Cascading Style Sheets), zostało już wyjaśnione w rozdziale wprowadzającym do kursu, więc jeśli tego nie pamiętasz, przeczytaj jeszcze raz sekcję HTML i CSS – papużki nierozłączki.

W tym rozdziale poznasz podstawy CSS, czyli zapoznasz się z najważniejszymi pojęciami i elementami tej technologii służącej do upiększania stron internetowych. W kilku kolejnych będziesz stopniowo rozszerzać swoją wiedzę na temat CSS w trakcie poznawania dalszych tajników technologii HTML5.

Domyślne style przeglądarek

Poprzedni rozdział zakończyliśmy dodaniem do naszej strony zdjęcia Richarda Feynmana, aby zwiększyć jej atrakcyjność wizualną. Dodawanie grafik to chyba jedyny sposób na poprawę estetyki strony za pomocą samego języka HTML. Aby zrobić cokolwiek więcej w tym zakresie, potrzebujemy już CSS. Spójrzmy jeszcze raz na naszą stronę i zastanówmy się, co najbardziej „kłuje” nas w oczy.

Tak wygląda strona całkowicie pozbawiona arkuszy stylów, prawda? Nie do końca. Tak naprawdę obecnie wszystkie przeglądarki mają wbudowane arkusze stylów, które decydują o domyślnym wyglądzie wszystkich elementów na stronie.

Jeśli na przykład chcesz podejrzeć arkusze stylów używane przez przeglądarkę Firefox, wpisz w pasku adresu resource://gre-resources/ i naciśnij klawisz Enter. Zostanie wyświetlony folder zawierający wiele różnych plików, w tym kilka plików .css (spójrz na poniższy rysunek).

Aby obejrzeć domyślny arkusz stylów elementów HTML przeglądarki Firefox, kliknij w tym oknie plik html.css.

Co by tu jeszcze… poprawić

Jeśli przyjrzysz się naszej stronie na powyższym zrzucie ekranu, to zauważysz, że odstępy między nagłówkami i akapitami nie wyglądają najlepiej. Na przykład odstęp między ostatnim wierszem akapitu a znajdującym się za nim nagłówkiem jest taki sam, jak odstęp między tym nagłówkiem, a akapitem znajdującym się pod nim. To powoduje, że sekcje treści nie są wystarczająco wyraźnie od siebie oddzielone. Poza tym wydaje się, że odstęp między nagłówkiem, a akapitem pod nim jest odrobinę za duży. Spójrz na poniższy rysunek.

Spróbujemy to poprawić. W tym celu zmienimy odstęp zarówno pod nagłówkiem, jak i nad nim. Wiemy już, że za obecne odstępy odpowiadają domyślne style przeglądarki. Nie musimy ich znać, aby je zmienić. Wystarczy, że użyjemy odpowiednich reguł CSS, które ustawią takie wartości marginesów, jakie nam odpowiadają.

Powiedzmy, że chcemy, aby nagłówek był odsunięty od znajdującego się za nim akapitu na odległość pięciu pikseli, a od tego, co znajduje się przed nim – o 30 pikseli. W ten sposób uzyskamy wyraźniejsze wizualne oddzielenie poszczególnych sekcji strony. Spójrz na poniższą ilustrację.

W CSS do ustawiania marginesu górnego elementów służy własność margin-top, a do ustawiania marginesu dolnego – własność margin-bottom. Aby zatem uzyskać interesujący nas efekt, musimy napisać nazwę elementu, który chcemy zmodyfikować oraz określić, co i w jaki sposób chcemy zmienić. Poniżej znajduje się potrzebny nam arkusz stylów. Przyjrzyj mu się dokładnie i spróbuj samodzielnie wywnioskować, jak zbudowana jest podstawowa reguła CSS. Poniżej znajdziesz szczegółowy opis wszystkich związanych z tym pojęć.

p {margin-top: 5px;}
h1 {margin-bottom: 0; margin-top: 30px;}
h2 {margin-bottom: 0; margin-top: 30px;}
h3 {margin-bottom: 0; margin-top: 30px;}

Aby ten arkusz stylów cokolwiek zmienił na naszej stronie, musimy go do niej dodać. Jest kilka metod dołączania arkuszy stylów do stron, których dokładny opis znajduje się w następnym rozdziale. Do celów testowych świetnie nadaje się metoda polegająca na użyciu elementu style w nagłówku (w elemencie head) dokumentu.

Otwórz więc swój edytor kodu, a w nim otwórz swoją stronę o Feynmanie i w sekcji nagłówkowej w dowolnym miejscu (tylko nie w innym elemencie) wpisz następujący kod:

<style>
    p {margin-top: 5px;}
    h1 {margin-bottom: 0; margin-top: 30px;}
    h2 {margin-bottom: 0; margin-top: 30px;}
    h3 {margin-bottom: 0; margin-top: 30px;}
</style>

W Visual Studio powinno to wyglądać na przykład tak:

Jeśli Twój nagłówek dokumentu wygląda tak samo, naciśnij kombinację klawiszy Ctrl+S, aby zapisać zmiany, a następnie naciśnij klawisze Ctrl+Shift+F9, aby otworzyć swoją stronę w wybranej przeglądarce internetowej. Teraz powinna ona wyglądać tak, jak na poniższym zrzucie ekranu:

Jak widzisz, praca z CSS jest bardzo prosta. Wystarczy podać nazwę interesującego nas elementu (p, h1, h2 i h3 w naszym przykładzie), a następnie w klamrze określić co i w jaki sposób chcemy zmienić. To naprawdę tak proste. Nazwa elementu w regule CSS nazywa się selektorem, a zawartość klamry nazywamy deklaracją. Teraz przyjrzymy się dokładnie budowie arkusza stylów CSS.

Anatomia arkusza stylów

Arkusz stylów (ang. stylesheet) CSS to zbiór reguł definiujących właściwości prezentacyjne elementów na stronie internetowej. Reguła CSS (ang. CSS rule) składa się z selektora i bloku deklaracji. Selektor (ang. selector) określa elementy, do których odnosi się reguła, a blok deklaracji (ang. declaration block) określa parametry różnych właściwości elementów.

Blok deklaracji CSS znajduje się w nawiasie klamrowym – {} – i zawiera dowolną liczbę deklaracji, z których każda (oprócz ostatniej) musi być zakończona średnikiem. Ostatnia deklaracja może, ale nie musi, być zakończona średnikiem.

Deklarację CSS (ang. CSS declaration) tworzy para własność: wartość (znakiem rozdzielającym jest dwukropek), zazwyczaj zakończona średnikiem. Własność CSS określa, co jest modyfikowane, a wartość CSS określa sposób tej modyfikacji.

Ogólna postać reguły CSS wygląda tak:

selektor {własność1: wartość; własność2: wartość; …}

Poniżej znajduje się schemat ilustrujący budowę przykładowej reguły CSS.

Arkusz stylów CSS to właśnie zbiór takich reguł odnoszących się do różnych elementów na stronie.

Selektory CSS

W CSS dostępnych jest wiele selektorów (ang. selector), które pozwalają odnosić się do różnych elementów na stronie (wybierać je) w zależności od ich miejsca w strukturze dokumentu, zdefiniowanych atrybutów oraz nazwy.

Najprostszym rodzajem selektora jest selektor typu (ang. type selector), który wskazuje typ interesującego nas elementu. Ma on postać nazwy elementu i jest to jedyny selektor, jakiego do tej pory używaliśmy, więc już go znasz.

Aby na przykład zmienić wygląd wszystkich nagłówków h1, skrótów (abbr) lub akapitów (p), wystarczy wpisać nazwę wybranego elementu i dodać do niej blok deklaracji:

h1 {color: blue}
abbr {font-size: 10px}
p {margin: 20px} 

Pierwsza z powyższych reguł zmienia kolor tekstu nagłówków na niebieski. Druga ustawia rozmiar czcionki skrótów na 10 pikseli. Natomiast trzecia nadaje akapitom 20-pikselowy margines z wszystkich stron.

Oprócz tego istnieje jeszcze wiele innych selektorów, które umożliwiają zmianę formatowania elementów zależnie od tego, w jakim otoczeniu się znajdują. Niektóre z nich są nawet dość skomplikowane. Na razie omówimy sobie tylko parę najczęściej używanych z nich: selektor uniwersalny, selektor potomka, selektor dziecka i selektor atrybutu. Są to tzw. selektory kombinacyjne, ponieważ zawierają kombinatory (znaki * , + itd.) oraz składają się z więcej niż jednego elementu.

Selektor uniwersalny ma postać gwiazdki (*) i odnosi się do wszystkich elementów na stronie (oczywiście nie licząc elementu head i jego zawartości, ponieważ arkusze stylów nie odnoszą się do nagłówka dokumentu). Na przykład poniższa reguła CSS ustawia kolor pisma wszystkich elementów na stronie na różowy.

* {color: pink}

Za pomocą selektora uniwersalnego można też wybrać wszystkie elementy znajdujące się w wybranym elemencie, np.:

p * {color: black}

Ta reguła nadaje czarny kolor tekstu wszystkim elementom em znajdującym się w akapitach.

p * em {color: red}

Inne selektory są bardziej wybiórcze, np. selektor potomka odnosi się do elementu znajdującego się wewnątrz innego elementu. W poniższym przykładzie tylko skrót MIT miałby czerwony kolor tekstu.

…
p abbr {color: red;}
…
<p>Studiował na <abbr title="Massachusetts Institute of Technology">MIT</abbr></p>
<h1>Czym jest zasada <abbr title="Don't Repeat Yourself">DRY</abbr></h1>

Selektor dziecka jest jeszcze bardziej precyzyjny, ponieważ odnosi się tylko do elementu, który znajduje się bezpośrednio w innym elemencie, tzn. jest jego dzieckiem. W poniższym przykładzie tylko skrót DRY miałby czerwony kolor tekstu.

…
p > abbr {color: red;}
…
<p>Studiował na <strong><abbr title="Massachusetts Institute of Technology">MIT</abbr></strong> i stosował się do zasady <abbr title="Don't Repeat Yourself">DRY</abbr>.</p> 

Z kolei selektor atrybutu pozwala odnosić się do elementów w zależności od ich atrybutów. Jest kilka rodzajów tego selektora. Na razie zapoznamy się z jego najprostszą formą, która wybiera elementy mające po prostu określony atrybut. Poniższa reguła na przykład zmienia na czerwono kolor wszystkich elementów abbr mających atrybut title.

abbr[title] {color: red;} 

Poniższa tabela zawiera zestawienie wszystkich poznanych przez nas do tej pory selektorów, zaczynając od najbardziej ogólnego.

Własności CSS

Większość własności CSS ma postać angielskich słów, więc łatwo jest je zapamiętać, a nawet odgadnąć. Tak jest choćby w przypadku marginesu. Wystarczy napisać margin-top albo margin-bottom, aby zmienić właściwości odpowiednio marginesu górnego lub dolnego.

Niektóre własności CSS, np. dotyczące marginesów czy obramowania, mają kilka form zapisu. Omówimy je na przykładzie własności marginesów, które już częściowo znamy.

Własności marginesów

Elementy blokowe HTML mają marginesy z czterech stron. Wartość każdego z nich można zdefiniować osobno, za pomocą indywidualnej własności, lub zbiorczo, za pomocą tzw. własności skrótowych (ang. shorthand property).

Indywidualne własności marginesów to:

margin-top
margin-right
margin-bottom
margin-left

Własności te służą odpowiednio do definiowania marginesu górnego, prawego, dolnego i lewego. Na przykład, poniższy arkusz stylów definiuje margines górny o szerokości 10 pikseli, margines prawy o szerokości 15 pikseli, margines dolny o szerokości 20 pikseli i margines lewy o szerokości 25 pikseli.

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Ponadto istnieje własność skrótowa margin, która występuje w czterech wariantach – z jedną wartością, z dwiema wartościami, z trzema wartościami oraz z czterema wartościami – pozwalających ustawiać poszczególne marginesy na różne sposoby.

Jeśli wszystkie marginesy elementu mają taką samą wartość, to można zastosować własność skrótową margin z jedną wartością. Na przykład ta deklaracja ustawia szerokość wszystkich marginesów wybranego elementu na 10 pikseli: margin: 10px;.

Jeśli marginesy mają takie same wartości parami, to można użyć skrótu zawierającego dwie wartości. Pierwsza odnosi się do marginesów górnego i dolnego, a druga – do lewego i prawego. Na przykład ta deklaracja ustawia marginesy górny i dolny na 20 pikseli, a lewy i prawy na 10 pikseli: margin: 20px 10px;. (Zwróć uwagę, że wartości w definicjach własności skrótowych są rozdzielane spacjami).

Kolejny rodzaj skrótu zawiera trzy wartości. Pierwsza i ostatnia odnoszą się odpowiednio do marginesów górnego i dolnego, a środkowa – zarazem do prawego i lewego. Na przykład ta deklaracja ustawia górny margines na 10 pikseli, lewy i prawy na 15 pikseli, a dolny na 20 pikseli: margin: 10px 15px 20px;.

Ostatni rodzaj własności skrótowej zawiera cztery wartości, odnoszące się kolejno do górnego, prawego, dolnego i lewego marginesu. Ta deklaracja ustawia margines górny na 5 pikseli, prawy na 10 pikseli, dolny na 15 pikseli, a lewy na 20 pikseli: margin: 5px 10px 15px 20px;.

W CSS jest kilka własności skrótowych podobnych do opisanej, a także kilka innego typu. W przypadku właściwości „czterostronnych”, jak margines, zawsze obowiązują te same zasady dotyczące kolejności „góra, prawa, dół, lewa”. Na przykład w podobny sposób można definiować właściwości krawędzi obramowania czy dopełnienia elementów.

Ponadto istnieją własności skrótowe innego typu, np. font umożliwia zbiorcze definiowanie różnych właściwości czcionki, a background pozwala na zbiorcze definiowanie właściwości tła. W ich przypadku trzeba po prostu wiedzieć, jakie ustawienia można zdefiniować w jednej deklaracji i jaka powinna być ich kolejność.

Scalanie marginesów

Marginesy w CSS mają pewną specyficzną właściwość zwaną scalaniem marginesów (ang. margin collapsing). Polega ona na tym, że jeśli „zetkną” się dwa marginesy pionowe, tzn. na przykład dolny margines jednego elementu zetknie się z górnym marginesem innego elementu, to ich wartości nie zostaną zsumowane, tylko ulegną scaleniu w ten sposób, że przyjmą szerokość tego szerszego. Spójrz na poniższy przykład:

<p style="margin-bottom: 30px">…</p>
<p style="margin-top: 20px">…</p>

Gdybyśmy umieścili te dwa elementy na stronie internetowej, odstęp między nimi nie wynosiłby 50 pikseli (tyle wynosi suma ich marginesów dolnego i górnego), tylko 30 pikseli. Przyczyną tego jest właśnie scalanie marginesów.

P.S. W tym przykładzie użyliśmy śródliniowych arkuszy stylów. Poznasz je dokładnie w następnym rozdziale, ale już teraz wiesz, że posługiwanie się nimi to nic trudnego.

Wartości CSS

W definicjach wartości w CSS można używać całego wachlarza jednostek – długości, procentów, kilku rodzajów notacji wartości kolorów, adresów URL, łańcuchów znaków oraz słów kluczowych.

Adresów URL używa się m.in. we własnościach wstawiających obrazy do tła elementów, np. background-image.

Łańcuchy znaków są używane między innymi we własności content, która jest używana w parze z pseudoelementami ::before i ::after, do wstawiania tekstu przed lub za wybranymi elementami.

Za pomocą procentów można określać wiele wielkości, np. szerokość elementu można wyrazić jako procent szerokości okna itd.

Jednostki długości są używane do określania szerokości i wysokości oraz ogólnie rozmiaru. W niektórych przypadkach wartości wyrażone przy ich użyciu mogą być także ujemne. Na przykład, jeśli górny margines elementu ma wartość -10px, to znaczy, że element ten zostanie „podciągnięty” o 10 pikseli do góry.

Nie wszystkie własności mogą mieć wartości ujemne, ponieważ w niektórych przypadkach nie miałoby to sensu. Na przykład trudno sobie wyobrazić ujemną grubość obramowania elementu. Jeśli wartość ujemna zostanie użyta w niedozwolonym miejscu, przeglądarka ignoruje zawierającą ją deklarację.

Ogólnie w CSS obowiązuje taka zasada, że jeśli deklaracja zawiera błąd, przeglądarka ignoruje ją, a pozostałe deklaracje interpretuje normalnie. Można to wykorzystać do testów. Jeśli na przykład zdefiniujemy deklarację margin-top: 10px;, a następnie chcemy sprawdzić, jak strona będzie wyglądać bez niej, to wystarczy ją „popsuć” na chwilę, np. dodając spację gdziekolwiek w nazwie własności: m argin-top: 10px;.

W tej chwili najbardziej interesują nas niektóre jednostki długości i sposoby definiowania kolorów. Przyjrzymy się jednym i drugim bardziej szczegółowo.

Jednostki długości

Wartość długości w CSS składa się z liczby całkowitej lub dziesiętnej i jednostki. Wyjątkiem jest wartość 0, po której nie trzeba wstawiać jednostki – zero to zero i nie ma znaczenia, czy jest to zero metrów czy milimetrów. Liczba nie może być oddzielona od jednostki żadnym znakiem, nawet spacją.

Jednostki długości w CSS dzielą się na względne i bezwzględne.

Jednostki względne

Względne jednostki długości określają długość w odniesieniu do jakiejś innej wartości, np. wysokości litery x albo rozmiaru pisma elementu głównego (html).

W CSS jest dostępny całkiem pokaźny zestaw tych jednostek, np. em (rozmiar czcionki rodzica lub samego elementu), ex (wysokość litery x), ch (szerokość cyfry 0), rem (rozmiar czcionki elementu głównego – html), lh (wysokość linii elementu) czy vw (1% szerokości obszaru widoku przeglądarki).

Zaletą jednostek względnych jest to, że za ich pomocą można sprawić, aby rozmiar tekstu i innych elementów zmieniał się proporcjonalnie do innych elementów na stronie.

Jednostki bezwzględne

Jednostki bezwzględne mają ściśle określoną stałą wartość i zasadniczo są niezależne od jakichkolwiek czynników. Przykładami jednostek bezwzględnych są cm, mm czy px, czyli odpowiednio centymetry, milimetry i piksele.

Większość tych jednostek znajduje zastosowanie głównie w druku, np. podczas projektowania stron internetowych nie używa się raczej centymetrów ani milimetrów.

Z tej grupy na stronach internetowych używa się tylko pikseli, ale należy pamiętać, że piksele nie są „całkiem” bezwzględne, ponieważ różne urządzenia mają piksel o różnej wielkości oraz różnią się gęstością pikseli.

Piksele należą do najczęściej używanych jednostek. Choć nie zawsze są idealnym wyborem i z łatwością można znaleźć argumenty za tym, aby zamiast nimi posługiwać się jednostkami względnymi, np. rem, to jednak należą do najłatwiejszych w użyciu. Dlatego w tym kursie wartości będą wyrażane najczęściej właśnie w pikselach.

Jednostki kolorów

Wartości kolorów w CSS można wyrażać na kilka sposobów – m.in. za pomocą notacji szesnastkowej (zwanej też heksadecymalną) RGB, za pomocą funkcji, np. rgb(), za pomocą nazw (słów kluczowych) i na kilka innych sposobów.

Do najczęściej używanych metod definiowania kolorów w CSS zalicza się używanie jednej z notacji RGB. Skrót RGB pochodzi od angielskich słów red, green, blue (czerwony, zielony, niebieski). Definicja koloru w tej notacji polega na określeniu poziomu intensywności w kolorze trzech składowych – właśnie czerwieni, zieleni i niebieskiego. Przez zmieszanie poszczególnych barw składowych w odpowiednich proporcjach można uzyskać dowolny kolor.

W tym kursie będziemy posługiwać się notacją szesnastkową, więc poniżej znajduje się jej dokładniejszy opis. Szczegółowy opis pozostałych można znaleźć w tłumaczeniu specyfikacji modułu kolorów.

Notacja szesnastkowa

Notacja szesnastkowa (heksadecymalna) to jeden z typów notacji RGB, w której udział każdej z barw składowych określa się za pomocą dwucyfrowej liczby szesnastkowej. Barwy składowe są trzy, więc wartość koloru w notacji szesnastkowej składa się w sumie z sześciu znaków.

Szesnastkowa (heksadecymalna) wartość koloru w CSS ma postać: #RRGGBB, czyli składa się ze znaku #, po którym następują trzy liczby szesnastkowe, określające kolejno poziom barwy czerwonej (RR, zielonej (GG) i niebieskiej (BB).

Liczba szesnastkowa lub heksadecymalna to liczba wyrażona w szesnastkowym systemie liczenia. Tak jak w dobrze Ci znanym systemie dziesiętnym (decymalnym) operuje się dziesięcioma cyframi od 0, 1, 2, 3, 4, 5, 6, 7, 8 i 9, w systemie szesnastkowym operuje się szesnastoma cyframi 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (wielkość liter jest bez znaczenia).

W systemie szesnastkowym jest szesnaście cyfr, więc brakujące cyfry spoza przedziału od 0 do 9 uzupełniono oznaczeniami w postaci liter od A do F. Najmniejsza liczba dziesiętna to 0, podobnie jest w systemie szesnastkowym. Natomiast podczas gdy największą dwucyfrową liczbą dziesiętną jest 99 (dwie największe cyfry w tym systemie), to największą dwucyfrową liczbą szesnastkową jest FF (dwie największe cyfry w tym systemie).

Im mniejsza jest wartość szesnastkowa koloru, tym kolor ten „bliższy” jest czerni, a im większa jest wartość szesnastkowa koloru, tym „bliżej” mu do bieli. W związku z tym wartość #000000 oznacza kolor czarny, a wartość #FFFFFF oznacza kolor biały. Jeśli ustawimy składnik czerwony na wartość maksymalną, a pozostałe składniki na minimalną, #FF0000, to otrzymamy czystą czerwień. Jeśli ustawimy na maksimum składnik zielony, a pozostałe na minimum (#00FF00), to otrzymamy czystą zieleń. A jeśli wyeliminujemy czerwień i zieleń oraz ustawimy maksymalny poziom niebieskiego (#0000FF), to otrzymamy czysty kolor niebieski.

Przezroczystość, czyli kanał alfa

Oprócz samego koloru, możemy także określić jego poziom przezroczystości. Służy do tego tzw. kanał alfa i w notacji szesnastkowej ma on postać dwóch dodatkowych cyfr szesnastkowych dodanych na końcu wartości, tak że staje się ona ośmiocyfrowa, np.: #FF228800.

Im mniejsza wartość kanału alfa, tym kolor jest bardziej przezroczysty. W związku z tym wartość 00 oznacza całkowitą przezroczystość (elementu nie widać), a FF – całkowity brak przezroczystości (domyślny sposób wyświetlania).

Kolory w Paint.NET

Do pracy z kolorami przydaje się edytor Paint.NET (albo jakikolwiek inny edytor grafiki). Po jego uruchomieniu w lewym dolnym rogu okna zobaczysz koło kolorów, jak na poniższym zrzucie ekranu:

Kliknij przycisk Więcej, aby wyświetlić menu ustawień koloru, w którym możesz wybrać dowolny kolor za pomocą myszy i sprawdzić jego wartość w różnych formatach zapisu, w tym w formacie szesnastkowym (pole Hex). Spójrz na poniższy rysunek.

Obecnie jest wybrany kolor czarny, o czym świadczy kolor kwadratu w pobliżu lewego górnego rogu tego okna (pod listą rozwijaną z wybraną opcją Podstawowy). Jeśli klikniesz gdziekolwiek w obrębie koła kolorów, zmieni się kolor tego kwadratu i odpowiednio zmienią się wartości w różnych notacjach. Na przykład poniżej wybrany został kolor różowy, któremu odpowiada wartość szesnastkowa FF16F7.

W ten sposób możesz wygodnie dobierać kolory do użycia na swojej stronie internetowej. Tylko nie zapomnij dodać znaku # przed wartością, ponieważ tego wymaga składnia CSS.

Przykład użycia wartości koloru

Rozwodzimy się na temat różnych notacji wyrażania kolorów CSS i uczymy się sprawdzania wartości szesnastkowych interesujących nas barw, ale jeszcze nie wiemy, jak tę wiedzę zastosować w praktyce (chociaż wcześniej zostało już pokazanych parę praktycznych przykładów).

W ramach przykładu zmienimy więc kolor nagłówka h1 na ciemnozieloną barwę o wartości szesnastkowej 30514F. W CSS do ustawiania koloru tekstu służy własność color, więc wystarczy, że do reguły z selektorem h1 dodamy deklarację color: #30514F:

h1 {margin-bottom: 0; margin-top: 30px; color: #30514F;}

Gotowe. Teraz wszystkie nagłówki h1 w naszej witrynie będą miały kolor ciemnozielony. Sprawdź to!

Jeśli akurat jesteś w bojowym nastroju, to możesz też pobawić się przezroczystością. Wypróbuj różne wartości kanału alfa. Zmień na przykład wartość koloru na #30514F00 i sprawdź, co się stanie. Pamiętasz dlaczego tak się stało? Jeśli nie to przeczytaj jeszcze raz punkt Przezroczystość, czyli kanał alfa.

Komentarze w CSS

W CSS stosowana jest składnia komentarzy w stylu języka C, czyli zaczerpnięta z języka programowania o nazwie C. W tej notacji początek komentarza wyznaczają znaki /*, a koniec – */, np.:

/* To jest komentarz
    w arkuszu stylów.
    Wszystko, co się w nim znajduje
    jest ignorowane przez przeglądarki. */

Komentarz w CSS może zajmować dowolną liczbę wierszy i podobnie jak w HTML oraz w różnych językach programowania służy do wstawiania notatek do kodu nieprzeznaczonych dla użytkownika, tylko dla projektanta.

Komentarze mogą znajdować się w arkuszu stylów w dowolnym miejscu. Wszystkie poniższe przykłady są poprawne:

p {margin-top: 5px;} /* zmienia margines górny akapitu */
h1 {margin-bottom: 0; margin-top: 30px;} /* zmienia marginesy dolny i górny nagłówka */
p {margin-top: 5px; /* zmienia margines górny akapitu */}

Sprawdzanie poprawności i porządkowanie kodu CSS

Jeśli napiszesz arkusz stylów i chcesz się upewnić, że jest w pełni poprawny, to tak jak w przypadku kodu HTML, masz dwie możliwości do wyboru. Możesz skorzystać z walidatora internetowego lub narzędzia dostępnego w Twoim edytorze kodu.

Internetowy walidator CSS jest dostępny na stronie https://jigsaw.w3.org/css-validator. Podobnie jak walidator HTML umożliwia sprawdzanie kodu przez podanie adresu URL, przesłanie pliku lub wpisanie kodu bezpośrednio w polu tekstowym.

W Visual Studio Code narzędzie sprawdzające składnię CSS jest dostępne standardowo, więc nic nie trzeba robić, aby zacząć z niego korzystać. Jeśli popełnisz błąd składni w arkuszu stylów, edytor powiadomi Cię o tym, wyświetlając liczbę znalezionych błędów na pasku stanu u dołu, w lewym dolnym rogu okna programu. Na przykład na poniższym zrzucie ekranu widać, że w naszym arkuszu stylów zostały znalezione cztery błędy.

Znasz już podstawy technologii CSS. Znasz budowę arkusza stylów, umiesz posługiwać się niektórymi selektorami i własnościami oraz orientujesz się w kwestiach różnego rodzaju jednostek. Ponadto wiesz, jak dołączyć arkusz stylów do strony, aby go przetestować. Nie znasz jednak jeszcze wszystkich metod dołączania arkuszy stylów do strony i nie wiesz, czym się one między sobą różnią. Tego wszystkiego, a nawet więcej, dowiesz się w następnym rozdziale.

Podsumowanie

• Przeglądarki internetowe mają własne domyślne arkusze stylów.
• Mianem arkusza stylów określa się zarówno pojedynczą regułę CSS, zbiór reguł CSS, jak i plik zawierający reguły CSS.
• Reguła CSS składa się z selektora i bloku deklaracji.
• Selektor określa elementy, które mają zostać sformatowane przez deklaracje.
• Istnieje wiele typów selektorów, np. selektor uniwersalny, selektor typu, selektor potomka, selektor dziecka i selektor atrybutu.
• Blok deklaracji to zbiór deklaracji ujęty w klamrę.
• Deklaracja składa się z par własność: wartość (rozdzielanych dwukropkiem).
• Własność CSS określa modyfikowaną właściwość elementu.
• Wartość określa sposób tej modyfikacji.
• W CSS jest dostępnych kilka typów jednostek, m.in.: jednostki długości, łańcuchy znaków, adresy URL, procenty i jednostki definiowania kolorów.
• Jednostki długości dzielą się na względne (np. em) i bezwzględne (np. cm).
• Wartości kolorów w CSS można wyrażać na wiele sposobów.
• Jedną z popularnych metod definiowania kolorów w CSS jest wariant notacji RBG zwany notacją szesnastkową lub heksadecymalną.
• Szesnastkowa wartość koloru ma ogólną postać #RRGGBB, gdzie RR oznacza udział w barwie koloru czerwonego, GG – koloru zielonego, a BB – koloru niebieskiego.
• Szesnastkowy (heksadecymalny) system liczenia obejmuje szesnaście cyfr: 0–9 i A–F (wielkość liter nie ma tu znaczenia).
• Oprócz samego koloru, w notacji szesnastkowej można określić także poziom przezroczystości.
• Poziom przezroczystości określa wartość tzw. kanału alfa, który ma postać dwóch dodatkowych cyfr szesnastkowych dodanych na końcu wartości szesnastkowej.
• Im wyższa wartość kanału alfa, tym niższy poziom przezroczystości koloru.
• Edytor grafiki Paint.NET może być bardzo pomocny przy wyborze kolorów do użycia na stronie.
• Komentarze w CSS mają postać /* … */.
• Poprawność kodu CSS można sprawdzić w walidatorze internetowym lub za pomocą narzędzi dostępnych w używanym edytorze kodu.

Ćwiczenia

1. Napisz selektory CSS wg następujących opisów:
   1. Wybiera wszystkie elementy img będące dzieckiem elementu p.
   2. Wybiera wszystkie elementy p, które są potomkiem elementu body.
   3. Wybiera wszystkie elementy abbr, które mają atrybut title.
2. Spójrz na poniższy kod, a następnie napisz reguły CSS wg instrukcji i dodaj je w odpowiednim miejscu do strony (w elemencie style).

   
   <body>
     <h1>Richard Feynman</h1>
     <p>Richard Phillips Feynman to amerykański fizyk teoretyk, który w 1999 roku znalazł się na liście dziesięciu najwybitniejszych fizyków wszech czasów.</p>
     <img height="241" src="img/feynman-bebny-duzy.png" alt="Richard Feynman z bębnami">
     <h2>Studia w <abbr>MIT</abbr></h2>
     <p>Studiował w <abbr title="Massachusetts Institute of Technology">MIT</abbr>.</p>
     <h2>Ciekawostki</h2>
     <h3>Projekt Manhattan</h3>
     <p>Feynman od bardzo młodych lat był uznawany za wybitnego fizyka, dzięki czemu otrzymał propozycję wzięcia udziału w projekcie Manhattan.</p>
   </body>
   

   1. Zmień kolor nagłówka h1 na zielony.
   2. Ustaw lewy i prawy margines wszystkich akapitów na 10 pikseli, górny margines – na 5 pikseli, a dolny – na 20 pikseli.
   3. Ustaw dolny margines wszystkich nagłówków na 0.
   4. Ustaw kolor tekstu wszystkich elementów abbr znajdujących się w akapitach na ciemnozielony.
   5. Ustaw kolor tekstu wszystkich elementów z atrybutem title na ciemnoczerwony.
   6. Dodaj do dokumentu komentarz, dzięki któremu nie zapomniesz, że trzeba rozbudować sekcję ciekawostek.
   7. Sprawdź poprawność swojego kodu CSS w walidatorze internetowym i popraw wszystkie ewentualne błędy.
   8. Sprawdź poprawność całego swojego dokumentu za pomocą narzędzi Visual Studio Code i popraw wszystkie ewentualne błędy.
3. Popraw błędy w poniższych deklaracjach.
   1. coror: #123456;
   2. margin—top: 20px;
   3. margin-pot: 10px;
   4. color: #34fa4g;
   5. color: #47fae5436;