Ten kurs dzieli podstawy CSS na jasne i przystępne części. W kolejnych modułach dowiesz się, jak działają podstawowe aspekty CSS i jak skutecznie wykorzystywać je w projektach. Aby poruszać się po modułach, użyj panelu menu obok logo „Learn CSS”.
Poznasz podstawy CSS, takie jak model pudełkowy, kaskadowość i specyficzność, flexbox, siatka i indeks z. Poznasz też funkcje, typy kolorów, gradienty, właściwości logiczne i dziedziczenie, dzięki czemu staniesz się wszechstronnym programistą interfejsu, gotowym do tworzenia dowolnych interfejsów użytkownika.
Każdy moduł zawiera interaktywne wersje demonstracyjne i testy, które pozwolą Ci sprawdzić swoją wiedzę. Oprócz nauki przez czytanie i oglądanie prezentacji do każdego tematu dołączony jest odcinek podcastu, który stanowi kolejny sposób na zdobywanie i poszerzanie wiedzy.
Ten kurs jest przeznaczony zarówno dla początkujących, jak i zaawansowanych programistów CSS. Możesz przejść przez wszystkie odcinki od początku do końca, aby ogólnie poznać CSS, lub używać ich jako materiału referencyjnego dotyczącego konkretnych tematów związanych ze stylizacją. Jeśli dopiero zaczynasz przygodę z tworzeniem stron internetowych, zapoznaj się z artykułem Learn HTML, aby dowiedzieć się, jak pisać znaczniki i łączyć arkusze stylów.
Dowiesz się:
Model pudełkowy
Wszystko, co wyświetla CSS, to pole, więc zrozumienie działania modelu pola CSS jest podstawą CSS.
Selektory
Aby zastosować CSS do elementu, musisz go wybrać. Usługa porównywania cen oferuje kilka różnych sposobów na to, a w tym module możesz je poznać.
Zagnieżdżanie
Zagnieżdżanie reguł stylów CSS może sprawić, że arkusze stylów będą bardziej uporządkowane, łatwiejsze do odczytania i utrzymania.
Kaskada
Czasami do elementu można zastosować 2 lub więcej konkurujących reguł CSS. Dowiedz się, jak przeglądarka wybiera, którego z nich użyć, i jak kontrolować ten wybór.
Specyficzność
W tym module przyjrzymy się bliżej specyficzności, która jest kluczowym elementem kaskady.
Dziedziczenie
Niektóre właściwości CSS są dziedziczone, jeśli nie określisz dla nich wartości. Z tego modułu dowiesz się, jak to działa i jak wykorzystać tę wiedzę na swoją korzyść.
Kolor
W CSS kolor można określić na kilka sposobów. W tym module omówimy najczęściej używane wartości kolorów.
Jednostki rozmiaru
Dowiedz się, jak określać rozmiar elementów za pomocą CSS, korzystając z elastycznego medium, jakim jest internet.
Układ
Omówienie różnych metod układu, które możesz wybrać podczas tworzenia komponentu lub układu strony.
Flexbox
Flexbox to mechanizm układu graficznego przeznaczony do rozmieszczania grup elementów w jednym wymiarze. Więcej informacji o tym, jak z niej korzystać, znajdziesz w tym module.
Siatka
Układ siatki CSS to dwuwymiarowy system układu, który kontroluje układ w wierszach i kolumnach. Poznaj wszystkie możliwości siatki.
Właściwości logiczne
Właściwości i wartości logiczne, względne w stosunku do przepływu, są powiązane z przepływem tekstu, a nie z fizycznym kształtem ekranu. Dowiedz się, jak korzystać z tego nowszego podejścia do CSS.
Właściwości niestandardowe
Właściwości niestandardowe, czyli zmienne CSS, umożliwiają porządkowanie i ponowne wykorzystywanie wartości w arkuszu CSS, dzięki czemu style są bardziej elastyczne i łatwiejsze do zrozumienia.
Odstępy
Dowiedz się, jak wybrać najlepszą metodę rozmieszczania elementów w przypadku używanego układu i tworzonego komponentu.
Pseudoelementy
Pseudoelement to dodanie lub kierowanie na dodatkowy element bez konieczności dodawania kolejnego kodu HTML. Pełnią one różne role, o których dowiesz się z tego modułu.
Pseudoklasy
Pseudoklasy umożliwiają stosowanie CSS na podstawie zmian stanu. Oznacza to, że projekt może reagować na działania użytkownika, np. na wpisanie nieprawidłowego adresu e-mail.
Obramowania
Obramowanie tworzy ramkę dla pól. Dowiedz się, jak zmienić rozmiar, styl i kolor obramowań za pomocą CSS.
Cienie
Istnieje kilka sposobów dodawania cieni do tekstu i elementów w CSS. Dowiedz się, jak korzystać z poszczególnych opcji i do jakich zadań zostały one zaprojektowane.
Ostrość
Dowiedz się, dlaczego fokus jest ważny w aplikacjach internetowych. Dowiesz się, jak zarządzać fokusem i jak zadbać o to, aby ścieżka na stronie działała zarówno w przypadku osób korzystających z myszy, jak i tych, które poruszają się po stronie za pomocą klawiatury.
Kursory i wskaźniki
Kursor jest niezbędny, aby użytkownicy wiedzieli, z czym wchodzą w interakcję. Z tego modułu dowiesz się, jak dostosowywać kursory w określonych sytuacjach.
Kolejność nakładania elementów i konteksty nakładania
Dowiedz się, jak kontrolować kolejność nakładania się elementów na siebie za pomocą właściwości z-index i kontekstu układania.
Położenie kotwicy
Pozycjonowanie elementów za pomocą CSS umożliwia deklaratywne pozycjonowanie elementu względem innego elementu.
Wyskakujące okienko i okno dialogowe
Wyskakujące okienko to dowolny element z atrybutem popover. Jest przydatny w przypadku wielu wzorców interaktywnych, w tym etykietek, alertów, powiadomień i innych.
Funkcje
CSS ma szereg wbudowanych funkcji. Poznaj niektóre z najważniejszych funkcji i dowiedz się, jak z nich korzystać.
Ścieżki, kształty, przycinanie i maskowanie
Ścieżki, kształty, przycinanie i maskowanie umożliwiają deweloperom renderowanie złożonych kształtów w CSS za pomocą różnych funkcji, które mogą zapewnić użytkownikom niezapomniane wrażenia.
Gradienty
Z tego modułu dowiesz się, jak używać różnych typów gradientów dostępnych w CSS. Gradienty mogą tworzyć wiele przydatnych efektów bez konieczności używania aplikacji graficznych do tworzenia obrazów.
Animacje
Animacja to świetny sposób na wyróżnienie elementów interaktywnych oraz dodanie do projektów atrakcyjności i zabawy. Dowiedz się, jak dodawać efekty animacji i nimi sterować za pomocą CSS.
Filtry
Filtry w CSS oznaczają, że możesz stosować efekty, które wcześniej były dostępne tylko w aplikacjach graficznych. W tym module dowiesz się, co jest dostępne.
Tryby mieszania
Twórz efekty kompozycyjne, mieszając 2 lub więcej warstw, i dowiedz się, jak wyodrębnić obraz z białym tłem, w tym module o trybach mieszania.
Listy
Lista składa się z elementu kontenera listy wypełnionego elementami listy. Z tego modułu dowiesz się, jak stylować wszystkie elementy listy.
Liczniki
Usługi porównywania cen oferują kilka sposobów kontrolowania liczników na liście w różnych przypadkach użycia. Z tego modułu dowiesz się, jak kontrolować liczniki na liście.
Przejścia
Dowiedz się, jak zdefiniować przejścia między stanami elementu. Używaj przejść, aby poprawić wrażenia użytkownika, zapewniając wizualne informacje zwrotne dotyczące interakcji użytkownika.
Przejścia widoku w aplikacjach SPA
Przejścia widoku umożliwiają zachowanie ciągłości lub kontekstu między stronami w aplikacji SPA.
Overflow
Przepełnienie to sposób radzenia sobie z treściami, które nie mieszczą się w ustalonym rozmiarze elementu nadrzędnego. W tym module wyjdziesz poza schematy i dowiesz się, jak stylować przepełnione treści.
Tła
Dowiedz się, jak określać styl tła pól za pomocą CSS.
Tekst i typografia
Dowiedz się, jak formatować tekst w internecie
Zapytania o kontenery
W przeciwieństwie do zapytań o media zapytania o kontenery umożliwiają wprowadzanie bardziej szczegółowych zmian w elementach na podstawie rozmiaru i stanu ich elementów nadrzędnych lub kontenerów.
Podsumowanie i dalsze kroki
Dodatkowe materiały, które pomogą Ci w dalszych działaniach.
Chcesz nauczyć się CSS? Zaczynamy.