Podręcznik HTML i CSS dla początkujących

Podstawy HTML

Wprowadzenie Język HTML Znaczniki HTML Atrybuty Style Podstawowa struktura strony Podstawowe znaczniki Akapity Nagłówki Pogrubienie tekstu Kursywa tekstu Listy nieuporządkowane Listy uporządkowane Linki Linki wewnętrzne Obrazy Szerokość obrazka Wysokość obrazka Ustawianie szerokości i wysokości obrazka Tabele Szerokość i wysokość tabeli Komórki nagłówkowe Praktyka

Podstawy CSS

Wprowadzenie do CSS Jak pracować z CSS Wartości kolorów Dowolne kolory Szerokość i wysokość Wyrównanie tekstu Wyrównanie tekstu do prawej Wyśrodkowanie tekstu Wyrównanie tekstu do lewej Wyrównanie tekstu do lewej i prawej jednocześnie Praktyka z wyrównaniem tekstu Grubość czcionki Kursywa Rozmiar czcionki Rodzina czcionki Interlinia Wartość line-height bez jednostek Właściwość skrótowa font Wcięcie pierwszej linii tekstu Efekty tekstu Podkreślenie tekstu Nadkreślenie tekstu Przekreślenie tekstu Anulowanie efektów dla tekstu Praktykum

Selektory

Pokrewieństwo znaczników Dziedziczenie właściwości Grupowanie selektorów Wspólne właściwości Selektory potomków Selektor dziecka Selektor klasy Znacznik span Znacznik div Grupowanie klas Znacznik z zadaną klasą Selektor potomków i klasy Złożone kombinacje selektora potomków i klas Błąd początkujących w selektorze potomków Element z wieloma klasami Selektor po id Selektor po id i klasy Użycie id Selektor po wielu klasach Kilka selektorów łącznie Błąd kilka selektorów Grupowanie złożonych selektorów Błąd przy grupowaniu Trening kombinacji selektorów Priorytet selektorów Uwaga dotycząca konfliktu właściwości Zasady specyficzności Priorytet selektorów potomków Sąsiedni selektor Selektor rodzeństwa Selektor uniwersalny Selektory atrybutów Stany linków Niuanse kolejności stanów linków Stany link i visited Zwykłe użycie stanów linków Złożone selektory z linkami Link z klasą Wybór elementów końcowych Wybór według pozycji Wybór jedynego potomka Wybór pustych elementów Wybór według pozycji i typu elementów Negacja not

Dekoracja

Kolor tła Podstawy pracy z obramowaniami Jednolite obramowanie Kropkowane obramowanie Obramowanie w postaci kresek Wypukłe obramowanie Podwójne obramowanie Właściwość-skrót dla obramowania Obramowania dla różnych stron Zaokrąglenie krawędzi bloku Zaokrąglenie krawędzi tła Tworzenie koła Zaokrąglenie dla różnych rogów Cztery wartości Dwie wartości Trzy wartości Zaokrąglenie w procentach Tworzenie koła przy zaokrągleniu w procentach Obrazek dla tła Powtarzanie obrazka tła Inne właściwości dla tła Znaczniki list ul Kwadratowe znaczniki list ul Znaczniki list ul w postaci kółek Znaczniki list ul w postaci wypełnionych kółek Brak znaczników list ul Znaczniki list ol Małe cyfry rzymskie dla list ol Wielkie cyfry rzymskie dla list ol Małe litery łacińskie dla list ol Wielkie litery łacińskie dla list ol Małe litery greckie dla list ol Liczby z zerem z przodu dla list ol

Model blokowy

Margines zewnętrzny margin Marginesy margin dla różnych stron Kilka wartości w margin Cztery wartości w margin Dwie wartości w margin Trzy wartości w margin Wypełnienie wewnętrzne padding Wypełnienia padding dla różnych stron Kilka wartości w padding Rozszerzanie elementów Wpływ obramowania na rozszerzanie elementów Wspólny wpływ padding i obramowania na rozszerzanie elementów Anulowanie rozszerzania elementów Elementy blokowe Szerokość i wysokość elementu blokowego Szerokość elementu blokowego Wysokość elementu blokowego Wysokość bez zawartości Kilka elementów blokowych obok siebie Elementy liniowe Szerokość i wysokość elementu liniowego Kilka elementów liniowych obok siebie Odstępy między elementami liniowymi Definicja modelu blokowego Właściwość display Elementy liniowo-blokowe Szerokość i wysokość elementu liniowo-blokowego Szerokość elementu liniowo-blokowego Wysokość elementu liniowo-blokowego Kilka elementów liniowo-blokowych obok siebie Wyrównanie elementów blokowych Wyrównanie elementu blokowego z odstępem z lewej strony Wyrównanie elementu blokowego z odstępem z prawej strony Wyrównanie elementów liniowych Wyśrodkowanie elementów liniowych Wyśrodkowanie kilku elementów liniowych Wyrównanie elementów liniowych do prawego brzegu Wyrównanie elementów liniowo-blokowych Wyśrodkowanie elementów liniowo-blokowych Wyrównanie elementów liniowo-blokowych do prawego brzegu Elementy flex Wysokość rodzica elementów flex Szerokość rodzica elementów flex Rodzic liniowo-blokowy Wypełnienia padding rodzica Marginesy margin potomkom Wyrównanie elementów flex Wyrównanie elementów flex do środka Wyrównanie elementów flex wzdłuż rodzica Wyrównanie elementów flex wzdłuż rodzica z odstępami Wyrównanie elementów flex wzdłuż rodzica z równymi odstępami

Pozycjonowanie

Absolutne Względne Absolutne względem rodzica Absolutne względem absolutnego Absolutne bez współrzędnych Wyśrodkowanie przez absolute Wartości ujemne absolute Pozycjonowanie stałe Blok na pełną szerokość ekranu Nakładanie elementów wzdłuż osi Z Regulacja nakładania elementów wzdłuż osi Z Niuanse stosowania ujemnej wartości z-index

Floaty

Wprowadzenie do właściwości float Właściwość float i znaczniki Połączenie float i margin Połączenie float i padding Elementy pływające pod znacznikami Działanie floatów na rodzica Wysokość rodzica floatów Tekst w rodzicu floatów Obfływanie Anulowanie obfływania Oddzielny div z clearfixem Wysokość rodzica i clearfix Właściwość float dla bloków Właściwość float i kilka bloków Właściwość float i rodzic bez tekstu

Flexbox

Ułożenie w rzędzie lub kolumnie Ułożenie elementów flex w odwróconym rzędzie Ułożenie elementów flex w kolumnie Odwracanie kolumny z elementami flex Oś główna i oś poprzeczna Wyrównanie wzdłuż osi głównej Wyrównanie wzdłuż osi poprzecznej Wartość center właściwości align-items Wyśrodkowanie bez wysokości bloków Wyśrodkowanie z różną wysokością bloków Wartość stretch właściwości align-items Praktyka wyrównania wzdłuż osi Wyrównanie pojedynczego elementu Kolejność bloków flex

Siatki

Wprowadzenie do siatek Tory i linie Wyświetlanie w debugerze Kolumny Jednostka fr Ułamkowe fr Piksele i fr Procenty i fr Funkcja repeat Wartość auto Wartość auto-fill Funkcja minmax Wartość auto-fit Wiersze Skrót dla wierszy i kolumn Łączenie wierszy Łączenie kolumn Kombinacje łączeń Nakładanie kolumn Odstęp między kolumnami Odstęp między wierszami Odstęp między kolumnami i wierszami Kafelki

Makiedy

Tworzenie menu Proste jednokolumnowe makiedy stron Schemat makietów z wieloma wrapperami Strukturalne bloki strony Schemat dwukolumnowego makietu Schemat trójkolumnowego makietu strony Specjalne znaczniki dla elementów makietu strony Podstawowe znaczniki makietu Znacznik dla sekcji Praktyka na makietach
swptuzlka