Zajęcia -Tomasz Sadowski

Oto kilka sposobów na użycie stylów CSS w dokumencie HTML:

1. Styl inline

Styl CSS można zastosować bezpośrednio w atrybucie style konkretnego elementu HTML.

<h1 style="color: blue; font-size: 24px;">Mój nagłówek</h1>

2. Styl wewnętrzny

Można zdefiniować style CSS w sekcji <style> w nagłówku dokumentu HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Moja strona</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Mój nagłówek</h1>
</body>
</html>

3. Styl zewnętrzny

Można utworzyć zewnętrzny plik CSS i dołączyć go do dokumentu HTML za pomocą elementu <link> w nagłówku.

<!DOCTYPE html>
<html>
<head>
    <title>Moja strona</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Mój nagłówek</h1>
</body>
</html>

Plik style.css może wyglądać tak:

body {
    background-color: #f0f0f0;
}
h1 {
    color: blue;
}

4. Styl w pliku CSS w trybie `@import`

Można importować inne pliki CSS za pomocą reguły @import wewnątrz sekcji <style>.

<!DOCTYPE html>
<html>
<head>
    <title>Moja strona</title>
    <style>
        @import url('style.css');
    </style>
</head>
<body>
    <h1>Mój nagłówek</h1>
</body>
</html>

5. Styl w pliku JavaScript

Można również dynamicznie dodawać style CSS za pomocą JavaScript.

<script>
    document.getElementById("myElement").style.color = "red";
</script>

Te różnorodne metody pozwalają na elastyczne zastosowanie CSS w dokumentach HTML, w zależności od potrzeb projektu.

Ćwiczenie 1: Podstawowe stylowanie tekstu

Zadanie:
Utwórz stronę z nagłówkiem i kilkoma paragrafami tekstu. Użyj CSS, aby zmienić styl tekstu. Zmień następujące właściwości:

Kolor tekstu,
Rozmiar czcionki,
Krój czcionki,
Grubość czcionki (bold),
Styl czcionki (italic).

Ćwiczenie 2: Stylowanie tła

Zadanie:
Użyj CSS, aby zmienić kolor tła strony i dodać tło do sekcji z tekstem. Wprowadź następujące zmiany:

Ustaw kolor tła całej strony.
Dodaj inny kolor tła do nagłówka <h1> i paragrafów <p>.
Zastosuj gradient liniowy jako tło jednej z sekcji.

Ćwiczenie 3: Ramki (borders)

Zadanie:
Stwórz prostą stronę z obrazkami i paragrafami. Użyj CSS do dodania różnych ramek do elementów:

Dodaj ramkę do paragrafów.
Zastosuj różne style ramek (solid, dashed, dotted).
Ustaw różne kolory i grubości ramek dla różnych elementów.

Ćwiczenie 4: Stylowanie list i łączy (links)

Zadanie:
Utwórz listę nawigacyjną z odnośnikami (linkami) i użyj CSS do jej stylizacji:

Zmień styl punktów w liście.
Użyj CSS do zmiany wyglądu linków (kolor, podkreślenie) w stanie normalnym, po najechaniu kursorem (hover) oraz po kliknięciu (visited).
Ustaw marginesy i padding dla elementów listy.

Ćwiczenie 5: Box model i marginesy

Zadanie:
Zastosuj model pudełkowy (box model) do kilku elementów strony. Użyj paddingu, marginesów i szerokości:

Zastosuj różne wartości paddingu i marginesów do paragrafów.
Ustaw maksymalną i minimalną szerokość elementów.
Wyrównaj elementy centralnie na stronie.

Ćwiczenie 6: Pozycjonowanie elementów

Zadanie:
Przećwicz różne techniki pozycjonowania elementów na stronie:

Ustaw element w pozycjonowaniu absolutnym, względnym i stałym (absolute, relative, fixed).
Stwórz prostą stronę, na której jeden z elementów będzie na stałe przypięty do dolnej części ekranu.

Ćwiczenie 7: Flexbox – układ w pionie i poziomie

Zadanie:
Zbuduj układ strony z użyciem flexboxa:

Ustaw elementy w wierszu (flex-direction: row) oraz w kolumnie (flex-direction: column).
Wyrównaj elementy na osi głównej i osi poprzecznej (justify-content, align-items).
Zastosuj elastyczne rozciąganie elementów, aby dostosowywały się do dostępnej przestrzeni.

Ćwiczenie 8: Grid – zaawansowane układy

Zadanie:
Użyj CSS Grid do stworzenia bardziej zaawansowanego układu strony:

Stwórz układ z trzema kolumnami i dwoma wierszami.
Określ, które elementy mają zająć więcej niż jedną kolumnę lub wiersz.
Dopasuj szerokości kolumn i wysokości wierszy (np. 1fr, auto).