Kurs CSS - zarządzanie wyglądem i układem stron internetowych

1. Podstawy CSS

CSS zostaje osadzony w kontekście podstawowej struktury HTML oraz roli arkuszy stylów w oddzielaniu treści od prezentacji. To część porządkująca fundamenty: czym jest CSS, jak jest dołączany do strony i jakie miejsce zajmuje w pracy front-endowej.

• wprowadzenie do CSS,
• podstawy struktury HTML ,
• arkusze stylów.

2. Składnia CSS i selektory

Składnia CSS wyznacza sposób budowania poprawnych reguł i precyzyjnego wskazywania elementów w dokumencie. Oprócz podstawowych typów selektorów omawiane są zagnieżdżenia i kombinatory, które pozwalają opisywać bardziej złożone zależności w HTML.

• składnia CSS,
• rodzaje selektorów,
• zagnieżdżanie selektorów i kombinatory – metody precyzyjnego stylowania za pomocą złożonych selektorów.

3. Deklaracje i komentarze

Na poziomie pojedynczej reguły CSS kluczowe znaczenie mają deklaracje określające właściwości i ich wartości. Uzupełnieniem są komentarze, które porządkują kod, ułatwiają dokumentowanie decyzji i wspierają późniejsze utrzymanie arkuszy stylów.

• deklaracje stylów,
• komentarze w CSS.

4. Dziedziczenie i specyfika

Relacje w hierarchii HTML decydują o tym, które właściwości są przejmowane automatycznie przez kolejne elementy. Sekcja koncentruje się na dziedziczeniu stylów w CSS i pokazuje, jak to zjawisko wpływa na organizację arkusza oraz końcowy wygląd dokumentu.

• dziedziczenie stylów – analiza dziedziczenia stylów między elementami w hierarchii HTML.

5. Stylowanie tła i obramowania

Tło i obramowanie w dużym stopniu kształtują odbiór pojedynczego elementu interfejsu. Sekcja pokazuje, jak konfigurować kolor, obrazy i gradienty tła, definiować border oraz wykorzystywać outline do dodatkowego wyróżnienia bez identycznego wpływu na układ.

• tła – właściwości tła, w tym kolor, obraz oraz gradienty i ich zastosowania,
• obramowania,
• właściwości outline – ustawienia dodatkowego obramowania i ich wpływ na wygląd elementów.

6. Wymiary, odstępy i jednostki

Ustalanie wymiarów elementów zaczyna się od doboru odpowiednich jednostek i zrozumienia ich zachowania w układzie strony. Dalej omawiane są wysokość i szerokość, a także marginesy oraz padding, które regulują przestrzeń zewnętrzną i wewnętrzną.

• jednostki miary,
• wysokość i szerokość elementów – techniki ustawiania i kontrolowania wymiarów elementów na stronie,
• marginesy i padding – metody zarządzania przestrzeniami wokół i wewnątrz elementów.

7. Tekst i jego właściwości

Typografia w CSS łączy estetykę z czytelnością treści. Uczestnicy pracują z kolorem, wyrównaniem, dekoracją i transformacją tekstu, a następnie z ustawieniami czcionek, odstępów i cieni, które porządkują hierarchię informacji na stronie.

• kolor i wyrównanie tekstu,
• dekoracja i transformacja tekstu,
• odstępy i cienie – zastosowanie odstępów oraz cieni w projektowaniu tekstu,
• czcionki.

8. Stylowanie elementów HTML

Stylowanie typowych elementów HTML wymaga uwzględnienia ich funkcji i budowy w dokumencie. W ramach sekcji omawiane są tabele, listy, hiperłącza, ikony, obrazy i formularze, z naciskiem na praktyczne użycie reguł CSS dla przejrzystego wyglądu.

• tabele i listy – sposoby stylowania tabel oraz list przy użyciu CSS,
• hiperłącza i ikony,
• obrazy i formularze.

9. Kolory i efekty

Dobór kolorów wpływa na czytelność i spójność projektu, dlatego nacisk położono na tworzenie oraz stosowanie palet barw. Część poświęcona efektom wyjaśnia także użycie przezroczystości i gradientów w CSS do budowania bardziej złożonej warstwy wizualnej.

• paleta kolorów – definiowanie i używanie palet kolorów w projektowaniu stron,
• przezroczystość i gradienty – techniki nadawania przezroczystości oraz tworzenia gradientów w CSS.

10. Wyświetlanie i pozycjonowanie elementów

Poprawne rozmieszczenie treści zależy od sposobu wyświetlania elementów i zasad ich pozycjonowania. Materiał obejmuje model pudełkowy oraz ustawienia display, a następnie position, z-index, float i overflow, wraz z technikami dopasowania i wyrównania.

• model pudełkowy (display) – zrozumienie modelu pudełkowego oraz różne ustawienia display,
• pozycjonowanie elementów – metody ustawiania elementów na stronie przy użyciu position, z-index, float oraz overflow,
• dopasowanie i wyrównanie – techniki dopasowywania oraz wyrównywania elementów względem siebie.

11. Zaawansowane techniki CSS

Praktyczne wzorce interfejsu pozwalają połączyć kilka bardziej zaawansowanych technik CSS w jednym obszarze pracy. Sekcja obejmuje budowę menu rozwijanych, galerii zdjęć, elastycznych układów stron oraz stylowanie przycisków i zastosowanie masek.

• menu rozwijane,
• galeria zdjęć – budowa i stylowanie galerii zdjęć przy użyciu CSS,
• układy stron – projektowanie elastycznych i responsywnych układów stron internetowych,
• maski i przyciski – stylowanie przycisków oraz wykorzystanie masek w CSS.

12. Przekształcenia i animacje

Za pomocą transformacji 2D i 3D można zmieniać położenie, skalę i orientację elementów bez modyfikacji struktury dokumentu. Uzupełnieniem są przejścia i animacje w CSS, wykorzystywane do budowania kontrolowanych efektów ruchu i reakcji interfejsu.

• transformacje 2D i 3D,
• przejścia i animacje – dodawanie dynamicznych efektów do stron za pomocą przejść i animacji.

13. Responsywność

Responsywne projektowanie stron obejmuje zasady dopasowywania układu do różnych szerokości ekranu. W tej części omawiane są punkty przegięcia oraz sposób przygotowania responsywnych szablonów, tak aby serwis zachowywał spójność i użyteczność na wielu urządzeniach.

• tworzenie responsywnych stron – podstawy responsywności oraz definiowanie punktów przegięcia,
• responsywne szablony – techniki projektowania responsywnych szablonów stron internetowych.