W tym kursie dzielimy podstawy CSS na proste i przystępne fragmenty. W kolejnych modułach dowiesz się, jak działają podstawowe aspekty usług porównywania cen i jak skutecznie wykorzystać je w swoich projektach. Aby poruszać się po modułach, użyj panelu menu z logo „Learn CSS”.
Poznasz podstawowe informacje o CSS, takie jak model prostokątny, kaskada i specyficzność, Flexbox, siatka i z-index. Poznasz też funkcje, typy kolorów, gradienty, właściwości logiczne i dziedziczenie, dzięki czemu utworzysz wszechstronny programista frontendu gotowy do zastosowania z dowolnym interfejsem użytkownika.
Każdy moduł jest pełen interaktywnych prezentacji i testów, dzięki którym sprawdzisz swoją wiedzę. Każdemu zagadnieniu towarzyszy odcinek podcastu, który pogłębia wiedzę i pozwala dalej poszerzać wiedzę.
Ten kurs jest przeznaczony dla początkujących i zaawansowanych programistów CSS. Możesz przeglądać całą serie od początku do końca, aby lepiej zrozumieć pojęcie CSS, lub używać jej jako odniesienia do konkretnych tematów stylów. Jeśli nie masz doświadczenia w tworzeniu stron internetowych, przeczytaj artykuł Nauka HTML, aby dowiedzieć się, jak tworzyć znaczniki i łączyć arkusze stylów.
Oto czego się nauczysz:
Model pudełkowy
Wszystko, co wyświetla się w CSS, jest polem, więc podstawą tego stylu jest zrozumienie sposobu działania modelu pola CSS.
Selektory
Aby zastosować kod CSS do elementu, musisz go zaznaczyć. CSS pozwala to robić na wiele różnych sposobów. W tym module możesz je poznać.
Wodospad
Czasami do elementu można zastosować co najmniej 2 konkurujące reguły CSS. Dowiedz się, jak przeglądarka wybiera, której użyć, i jak kontrolować ten wybór.
Szczegółowość
W tym module przyjrzymy się bliżej specyfice, która jest kluczowym elementem kaskady.
Dziedziczenie
Niektóre właściwości CSS dziedziczą, jeśli nie określisz dla nich wartości. Z tego modułu dowiesz się, jak to działa i jak możesz je wykorzystać.
Kolor
Kolor można określić w CSS na kilka sposobów. W tym module omawiamy najczęściej używane wartości kolorów.
Jednostki rozmiaru
Dowiedz się, jak zmieniać rozmiar elementów za pomocą CSS w przypadku elastycznego środowiska internetu.
Układ
Omówienie różnych metod układu, które można wybrać podczas tworzenia komponentu lub układu strony.
Flexbox
Flexbox to mechanizm układu przeznaczony do rozmieszczania grup elementów w jednym wymiarze. Z tego modułu dowiesz się, jak z niego korzystać.
Siatka
Układ siatki CSS umożliwia stosowanie dwuwymiarowego układu, który kontroluje układ w wierszach i kolumnach. Odkryj wszystko, co oferuje siatka.
Właściwości logiczne
Logiczne właściwości i wartości zależne od przepływu są powiązane z przepływem tekstu, a nie z fizycznym kształtem ekranu. Dowiedz się, jak korzystać z nowego podejścia do usług porównywania cen.
Odstępy
Dowiedz się, jak wybrać najlepszą metodę odstępów między elementami w przypadku używanej metody układu i tworzonego komponentu.
Pseudoelementy
Pseudoelement jest jak dodawanie lub kierowanie na kolejny element bez konieczności dodawania kodu HTML. W tym module pełnią różne funkcje.
Pseudoklasy
Pseudoklasy umożliwiają stosowanie CSS w zależności od zmian stanu. Oznacza to, że projekt może reagować na dane wejściowe użytkownika, takie jak nieprawidłowy adres e-mail.
Granice
Ramka tworzy ramkę na prostokąty. Dowiedz się, jak zmienić rozmiar, styl i kolor obramowania za pomocą CSS.
Cienie
Jest wiele sposobów dodawania cieni do tekstu i elementów w CSS. Dowiedz się, jak korzystać z poszczególnych opcji i jakie zadania są przeznaczone.
Ostrość
Zrozumienie znaczenia koncentracji w aplikacjach internetowych. Dowiesz się, jak zarządzać zaznaczeniem i jak zadbać o to, aby ścieżka na stronie działała zarówno dla osób używających myszy, jak i dla osób korzystających z klawiatury do nawigacji.
Kolejność nakładania elementów i konteksty warstwowe
Dowiedz się, jak kontrolować kolejność nakładania się elementów, korzystając z z-index i kontekstu warstwowego.
Funkcje
CSS ma szereg wbudowanych funkcji. Poznaj niektóre najważniejsze funkcje i dowiedz się, jak z nich korzystać.
Gradienty
W tym module dowiesz się, jak używać różnych typów gradientów dostępnych w CSS. Gradienty umożliwiają tworzenie wielu przydatnych efektów bez konieczności tworzenia obrazów w aplikacjach graficznych.
Animacje
Animacja to świetny sposób na wyróżnienie interaktywnych elementów i dodanie zabawy do projektów. Dowiedz się, jak dodawać efekty animacji i nimi zarządzać za pomocą CSS.
Filtry
Filtry w CSS umożliwiają stosowanie efektów, które wydają się możliwe tylko w aplikacji graficznej. W tym module dowiesz się, jakie narzędzia są dostępne.
Tryby mieszania
Z tego modułu dowiesz się, jak za pomocą trybów mieszania tworzyć efekty kompozycji, mieszając co najmniej 2 warstwy. Z tego modułu dowiesz się, jak izolować obraz z białym tłem.
Listy
Lista pod względem struktury składa się z elementów kontenera wypełnionych elementami listy. W tym module dowiesz się, jak dodać styl do wszystkich części listy.
Przejścia
Dowiedz się, jak definiować przejścia między stanami elementu. Użyj przejść, aby poprawić wygodę użytkowników, przekazując wizualną opinię na ich temat.
Przenieś
Przepełnienie to sposób radzenia sobie z treściami, które nie mieszczą się w określonym rozmiarze nadrzędnym. W tym module dowiesz się, jak dodać styl do treści, które wykraczają poza schemat.
Tła
Dowiedz się, jak stylizować tła pól za pomocą CSS.
Tekst i typografia
Dowiedz się, jak dostosować styl tekstu w przeglądarce.
Podsumowanie i dalsze kroki
Dodatkowe zasoby, które pomogą Ci wykonać kolejne kroki.
Czy chcesz poznać CSS? Zaczynamy.