Podpowiedź Przed rozpoczęciem tego rozdziału, polecam zapoznać się z moim podstawowym kursem "Plan nauki Frontend Developer", a dokładniej z rozdziałem "Podstawy CSS". Warto przećwiczyć podstawowe praktyki pisania kodu, co w przyszłości pomoże przy wykonywaniu zadań.

CSS – co to i do czego nam będzie potrzebne?

W poprzednim rozdziale pokazałem, że HTML odpowiada za strukturę strony. Teraz pokaże, jak definiować wygląd strony za pomocą pliku CSS.

Za pomocą stylów CSS można zmienić wygląd elementów, a dokładniej:

kolor i rozmiar czcionki,
obramowanie elementów,
pozycje elementów,
grafika w tle strony,
animacje, i wiele innych sposobów przedstawienia elementów na stronie…

W tym rozdziale pokaże jak zmienić wygląd elementów HTML. Do tego posłużą nam arkusze stylów CSS.

Łączenie CSS z HTML. Przeciążenie.

Stworzony plik ze stylami CSS podpinamy w nagłówku strony, (a dokładniej między tagami head) za pomocą tagu link. To tag niewymagający zamknięcia.

Poniżej dodaję przykładowe podpięcie do HTML pliku “style.css”:

<link rel="stylesheet" type="text/css" href="style.css">

Tłumacząc powyższy przykład, atrybut href wskazuje plik, w którym znajdują się napisane przez programiste reguły. Ta metoda zadziała prawidłowo dla pliku “style.css” znajdującego się w tym samym katalogu co plik HTML, do którego podpinamy style. W przypadku, gdy plik ze stylami jest “głębiej”, np. w katalogu o nazwie “stylesheets”, to wtedy atrybut href wyglądałby następująco: href="stylesheets/style.css (nazywana ścieżką względną – bez pełnego adresu pliku typu C:\file\...).

Zasada jest prosta – style są czytane przez przeglądarkę “z góry na dół”. Jeżeli na początku pliku stworzymy regułę nadającą akapitom kolor niebieski, a pod koniec pliku stworzymy regułę CSS ustawiającą im kolor pomarańczowy, to finalnie akapity zostaną wyświetlane na pomarańczowo – ostatni styl nadpisze poprzednie.

Tak samo dzieje się w przypadku, gdy podpinamy dwa pliki ze stylami:

<link rel="stylesheet" type="text/css" href="pierwszy.css">
<link rel="stylesheet" type="text/css" href="drugi.css">

W przypadku, gdy w obu plikach znajdzie się reguła ustawiająca kolor tekstu akapitom, to przeglądarka wykorzysta reguły z drugiego pliku. W skrócie – styl w drugim pliku nadpisze styl z pierwszego pliku. Należy zaznaczyć, aby unikać zbyt dużej liczby nadpisań, tzn. przeciążeń stylów.

Konstrukcja stylów

Poniżej dodaje przykład reguły (stylu) CSS:

p {
    font-size: 26px;
    color: blue;
}

A teraz spójrz jak wygląda reguła z prawidłowym nazewnictwem:

selector {
    property: value;
    property: value;
}

Poniżej dodaję szczegółowy opis elementów reguły:

selector – wskazuje element HTML, do którego przypisany jest styl,
{ … } – klamry domykają blok kodu. W środku znajdują się właściwości oraz ich wartości,
property – właściwość CSS, np. wysokość, szerokość, kolor,
: – dwukropek oddzielający właściwość od wartości w regule,
value – wartość określająca cechę, np. dla rozmiaru tekstu podaje się wartość liczbową (np. 26px),
; – średnik umieszczamy zawsze na końcu linii kodu. To uniwersalna praktyka która obowiązuje w wielu językach programowania.

Rodzaje selektorów

Liderem wśród selektorów jest selektor klasy przypisany do elementu. Gdy mamy element HTML z atrybutem class="box" to możemy stylować dany element używając jego klasy jako selektora. Wszystkie pozostałe elementy z taką klasą, również otrzymają zdefiniowane w CSS reguły wyglądu.

Reguła z selektorem dla klasy tworzymy poprzez dodanie kropki przed nazwą klasy. Poniżej dodałem przykład stylu stworzonego z selektorem klasy:

.box {
    color: blue;
}

Powyższy styl zadziała w przypadku (nada nagłówkowi w HTML niebieski kolor tekstu), np.:

<h1 class="box">

Kolejnym popularnym selektorem jest selektor dla tagu. Tutaj natomiast nie stosujemy żadnego przedrostka w CSS. Gdy mamy nadać style dla konkretnego tagu z HTML, to wystarczy, że wykorzystamy jako selektora jego nazwy.

Poniżej dodałem przykładową regułę dla elementu p:

p {
    background-color: orange;
}

Powyższa reguła sprawia, że wszystkie paragrafy p będą miały pomarańczowy kolor.

Kolejną opcją są selektory dla identyfikatorów. Przy frontendzie tego typu selektory rzadko używamy (częściej wykorzystywane są przez programistów backend). Każdemu elementowi HTML z id="surname" można przypisać style w CSS za pomocą selektora #surname (dodajemy # przed nazwą id). Należy pamiętać, że dany identyfikator może być przypisany jedynie jednemu elementowi HTML (w przeciwieństwie do klas).

Poniżej dodaję przykład z zastosowaniem identyfikatorów:

#surname {
    display: none;
}

Powyższe rozwiązanie sprawi, że element z atrybutem id="surname" zostanie ukryty.

Dla zainteresowanych Listę wszystkich selektorów można znaleść na stronie internetowej.

Popularna grupa właściwości CSS

Poniżej dodaje popularna grupę właściwości CSS. Używa się ich bardzo często w pisaniu styli naszym elementom.

margin – organizuje marginesy elementom na stronie, np. margin: 15px; Taki zapis sprawi, że element będzie miał 15px margines (z każdej strony),
color – ustawia kolor tekstu w danym elemencie, np. color: blue;
padding – odpowiada za przestrzeń między zawartością elementu a jego ramką, np. padding: 20px;
background – ustawia właściwość tła, np. background: green;
display – określa, jak ma się wyświetlać element, np. display: none;
border – odpowiada za parametry obramowania elementu np. border: 3px solid #ccc; (tzn. ramka o grubości 3px, linia ciągła koloru szarego),
height – ma za zadanie ustawić wysokość podawaną w pikselach lub procentach, np. height: 300px;
width – wyznacza szerokość danego elementu, np. width: 200px;
text-align – rozmieszcza tekst w danym elemencie, tzn. wyśrodkowanie tekstu lub wyrównanie go do jednej z krawędzi, np. text-align: center; (wyśrodkowanie tekstu), text-align: left; (wyrównanie do lewej),
font-family – właściwość czcionki, określa rodzaj wyświetlanej czcionki tekstu wewnątrz elementu, np. font-family: 'Roboto';.

Wykaz właściwości CSS oraz ich wartości znajduje się na stronie CSSreference.

Zabawa z kolorami CSS

Istnieje kilka sposobów na ustawienie koloru czcionki lub tła. Wszystkie chwyty dozwolone – zależne od potrzeb i upodobań programisty.

Wyróżniamy następujące formy zapisu koloru:

heksadecymalny (hex) – kod cyfr koloru zapisany w systemie szesnastkowym. Przykładowo, aby uzyskać kolor biały, należy użyć zapisu: #ffffff. Można skróconego zapisu: #fff (każdy znak w takim przypadku się podwaja). Aby wygenerować oczekiwany kolor należy użyć tzw. color picker. Przykładowy znajdziemy w wyszukiwarce Google. W tym miejscu polecam zainstalować do przeglądarki dodatek: ColorZilla. Umożliwia on pobieranie koloru z każdego elementu z widoku przeglądarki,
angielskie nazwy koloru – kolory podawane w języku angielskim, np. green, red, white, black, itd. Do pełnej listy odsyłam tutaj.
RGB – jest to wypadkowa trzech kolorów (red, green, blue). Zapis takiej formy jest następujący:rgb(255, 0, 0) daje kolor czerwony. Natomiast kolor biały uzyskujemy stosując: rgba(255, 255, 255). Każda wartość po przecinku to liczba z zakresu 0-255. Taka samo jak dla hex, frontendowcy najczęściej używają kolory wygenerowane za pomocą color pickerów,
RGBa – analogia do RGB. Różnica jest taka, że w tym przypadku dochodzi jeszcze dodatkowy parametr odpowiadający za przezroczystość, np. rgba(255, 0, 0, 1) wyświetli kolor czerwony, a rgba(255, 255, 255, 0.5) wygeneruje kolor biały ale półprzezroczysty. Ostatnia wartość przyjmuje wartości od 0 (całkiem przeźroczysty) do 1 (całkowicie nieprzezroczysty). Taką wartość podajemy jako ułamek z kropką (wartość z przecinkiem jest błędem w tym przypadku).

Wiodącym zapisem kolorów jest format heksadecymalny, ponieważ jest prostym zapisem. Minus takiego zapisu, to brak możliwości zapisania koloru z przeźroczystością. Gdy jest taka opcja potrzebna, to należy użyć zapisu RGBa.

Box-model CSS

Box-model to schemat, w którym każdy umieszczony na stronie element HTML jest swego rodzaju pudełkiem – bardzej fachowo “kontenerem”. Tłumaczyć można sobie tak – mamy pudełka umieszczane wewnątrz siebie jak matrioszki. Najmniejszy z nich jest treścią (content). Drugie pudełko to padding, tzn. odległość treści od ramki tzn. – border będącej kolejnym pudełkiem. Ramka również ma swoją grubość którą musimy określić. Największym opakowaniem jest margines. Wyznacza on w jakiej odległości od brzegów strony lub innych elementów powinien znajdować się ten element, którym się aktualnie interesujemy.

Komponenty pudełek

Powyższe pudełka w przeciwieństwie do tych prawdziwych nie wymagają wszystkich ścian. Przykładowo, możliwe jest ustawienie tylko jednej części ramki dla elementu HTML. Aby taki efekt uzyskać, należy do nazwy właściwości CSS (padding, border, margin) dodajemy przyrostek definiujący kierunek:

-top, używamy, jeśli chcemy ustawić właściwość dla góry elementu HTML,
-bottom, używamy, gdy chcemy ustawić właściwość dla dołu elementu HTML,
-left, używamy, gdy chcemy ustawić właściwość dla lewej części elementu HTML,
-right, używamy, gdy chcemy ustawić właściwość dla prawej części elementu HTML.

Przykładowo, gdy chcemy ustawić ramkę na dole elementu, to musimy skorzystać z właściwości: border-bottom.

Wartości zgodnie z ruchem wskazówek zegara

Z powyższych informacji już wiesz jak zrobić ramkę tylko na górze elementu. Odwódźmy sytuacje – chcemy zrobić ramki na każdym boku pudełka oprócz góry. Czy trzeba pisać kod odpowiadający za właściwości border-right, border-bottom i border-left ustawiając border-top domyślnie na 0?

Mamy jednak prostsze rozwiązanie – w takim przypadku wykorzystać można znów właściwość border. Jeśli dla border podamy cztery wartości, np. border: 0 1px 2px 3px, ustawimy inną grubość ramki dla każdego brzegu elementu. Skąd jednak wiedzieć w jakiej kolejności uzupełniać wartości? Domyślnym sposobem jest podawanie wartości zgodnie z ruchem wskazówek zegara, zaczynając od górnej. W ostatnim przykładzie nie mielibyśmy górnej ramki, ponieważ jej grubość ustawiona jest na 0px. Prawa miałaby 1px, dolna 2px i lewa 3px grubości.

Przeglądarki czytają arkusze stylów które im dostarczamy i je interpretujemy. Pytanie – jak sobie radzą z takimi zapisami jak poniżej?

border: 5px 10px 5px 10px;

Przeglądarka powyższy zapis tłumaczy sobie na porozbijane, dokładniejsze zapisy, tak jak niżej:

border-top: 5px;
border-right: 10px;
border-bottom: 5px;
border-left: 10px;

W tym przypadku mamy dla górnej i dolnej ramki takie same wartości. Również dla bocznych mają one tą samą wartość. Pójdźmy krok dalej – uprośćmy zapis do minimum. Zapis:

border: 5px 10px 5px 10px;

Możemy przedstawić w następujący sposób:

border: 5px 10px;

Walidacja kodu i debugowanie – dobre praktyki z CSS

Gdy skończymy tworzyć nasze reguły w CSS, warto sprawdzić ich poprawność. W tym celu została stworzona strona css-validator.org. Umożliwia ona sprawdzenie naszego kodu. Na stronie możemy podać adres naszej witryny, plik albo wkleić nasz kod.

Kolejnym dobrym zwyczajem jest debugowanie kodu. Aby to zrobić, należy otworzyć narzędzie dla deweloperów, klikając na interesującym nas elemencie prawym przyciskiem myszy i wybierając opcje “Zbadaj element”. Po lewej stronie inspektora widzimy nasz kod HTML. Po prawej są reguły CSS. Za pomocą tego narzędzia możemy zobaczyć jakie reguły działają na dany element.

Ćwiczenie: Strona internetowa na rozgrzewkę – style CSS

Przejdź do kodu ćwiczenia z poprzedniego rozdziału. Skopiuj go do nowego projektu.
Dodaj plik style.css do projektu. Połącz oba pliki następującym kodem (w sekcji head, pod tytułem):

<link rel="stylesheet" type="text/css" href="style.css">

- W pliku style.css napisz selektor dla tagu body i dodaj po nim klamry {}.
- W powyższej regule dodaj właściwość background-color i nadaj tło dla całej strony w kolorze #DCDAD0.
- Wróćmy na chwile do pliku index.html. W elemencie body utwórz tag div z klasą content (class="content"). Jego zamykający odpowiednik div umieść tuż przed tagiem zamykającym body. W taki sposób cała treść strony znajdzie się wewnątrz elementu div. Będzie to nasz kontener.
- W pliku style.css utwórz regułę dla świeżo dodanego elementu, sięgając po niego za pomocą jego klasy (“content”).
- W powyższej regule ogranicz szerokość naszego kontenera (tzn. wymieniony wcześniej znacznik div z klasą content do przechowywania innych elementów) do 550px.
- Następnie nadaj mu margines, dzięki któremu będzie wyśrodkowany w poziomie (margin: 0 auto;). Więcej informacji na ten temat podam w następnym rozdziale.
- Nadaj mu białe tło. Dla background-color użyj wartości: white lub #FFF. Dodaj padding o wartości 15px;
- Czas na kolejną regułę – dla tagu h1. Stwórz ją i dodaj w niej wyśrodkowanie tekstu za pomocą właściwości: text-align: center;.
- Przejdź do pliku index.html. Pod tagiem body a przed div-em z klasą “content” wstaw nagłówek strony. W tym celu stwórz tag div z klasą header. Na końcu nie zapomnij go zamknąć.
- Wewnątrz powyższego tagu umieść tag h1 i umieść w nim tekst witający.
- Zdjęcia na stronie mogą wychodzić poza nasz div o klasie content. Wartość width: 100%; dla tagu img to deklaracja, która rozwiąże nasz problem. W tej chwili zdjęcia będą zajmować 100% szerokości swojego rodzica.
- Przejdźmy do stworzenia stopki. Pod zamknięciem elementu o klasie content otwórz tag div o klasie footer. W środku umieść paragraf z tekstem “Imię i nazwisko, 2022”.
- Przejdź do pliku style.css Korzystając z selektora body ustaw margines całej zawartości strony na 0.
- Nadszedł czas na ostylowanie nagłówka strony. Utwórz dla niego selektor, korzystając z nadanej mu klasy. Wewnątrz tego selektora nadaj mu właściwości wyśrodkowania tekstu, padding o wartości 30px 0, kolor tła #b08541 oraz biały kolor tekstu.
- Czas na ostylowanie stopki. Utwórz selektor, korzystając z klasy, którą nadałeś stopce. Wpisz w nim właściwości: kolor tła #4d5657, ustawienie wielkich liter text-transform: uppercase;) oraz pogrubienie czcionki.
- Ostylujmy paragraf znajdujący się w stopce. Utwórz dla niego selektor i spraw, aby marginesy wynosiły 0, a padding wynosił 30px na górze, 0 po prawej, 15px na dole i 20px od lewej strony.

ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

pensive-wildflower-7geb7
pensive-wildflower-7geb7 danielminschinski

Wszystkie pytania proszę kierować na mojego Messengera, lub bezpośrednio na emaila: danielminschinski@gmail.com

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA

#1.2. Stylowanie z CSS | #1. Struktura HTML oraz stylizacja CSS