Lekcja 19 - CSS - arkusze stylow, formatowanie stron

📚

Teoria

▼

Czym jest CSS?

CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylow) to jezyk opisujacy wyglad dokumentow HTML. Dzieki CSS mozemy kontrolowac kolory, czcionki, rozmiary, odstepy, uklad strony i wiele innych aspektow wizualnych - bez zmieniania struktury HTML.

                    Zasada rozdzielenia tresci od wygladu: HTML odpowiada za STRUKTURE i TRESC strony, CSS za jej WYGLAD i FORMATOWANIE. Dzieki temu mozna zmienic caly wyglad strony, edytujac tylko plik CSS, bez dotykania kodu HTML.
                

Trzy sposoby dodawania CSS

Inline (w linii) - bezposrednio w atrybucie style elementu HTML:
```
<p style="color: red; font-size: 18px;">Czerwony tekst</p>
```
Wewnetrzny - w sekcji <style> w naglowku <head>:
```
<style>
    p { color: blue; }
</style>
```
Zewnetrzny (zalecany!) - osobny plik .css podlaczony do HTML:
```
<link rel="stylesheet" href="style.css">
```

Skladnia CSS

Regula CSS sklada sie z selektora i bloku deklaracji:

selektor {
    wlasciwosc: wartosc;
    wlasciwosc2: wartosc2;
}

Rodzaje selektorow CSS

Selektor elementu - p { } - wszystkie akapity
Selektor klasy - .nazwa { } - elementy z class="nazwa"
Selektor ID - #nazwa { } - element z id="nazwa" (unikalny)
Selektor uniwersalny - * { } - wszystkie elementy
Selektor potomka - div p { } - akapity wewnatrz div
Selektor dziecka - div > p { } - bezposrednie dzieci
Selektor grupowy - h1, h2, h3 { } - wiele selektorow naraz
Pseudoklasy - a:hover { } - stan najechania myszka

Kolory w CSS

Kolory mozna definiowac na kilka sposobow:

Nazwa - color: red; (ok. 140 nazw kolorow)
Hex - color: #FF0000; (szesnastkowo: RR GG BB)
RGB - color: rgb(255, 0, 0); (czerwony, zielony, niebieski: 0-255)
RGBA - color: rgba(255, 0, 0, 0.5); (z przezroczystoscia)
HSL - color: hsl(0, 100%, 50%); (odcien, nasycenie, jasnosc)

Czcionki (fonty)

body {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    font-weight: bold;       /* normal, bold, 100-900 */
    font-style: italic;      /* normal, italic */
    line-height: 1.5;        /* interlinea */
    text-align: center;      /* left, right, center, justify */
    text-decoration: none;   /* underline, overline, line-through */
    text-transform: uppercase; /* lowercase, capitalize */
}

Model pudelkowy (Box Model)

Kazdy element HTML jest "pudelkiem" skladajacym sie z warstw:

content - tresc elementu (tekst, obraz)
padding - odstep wewnetrzny (miedzy trescia a obramowaniem)
border - obramowanie (ramka)
margin - odstep zewnetrzny (miedzy elementem a sasiadami)

.box {
    width: 300px;
    padding: 20px;           /* gora, prawo, dol, lewo */
    padding: 10px 20px;      /* gora/dol, prawo/lewo */
    border: 2px solid black;
    margin: 10px auto;       /* auto centruje w poziomie */
    box-sizing: border-box;  /* szerokosc zawiera padding i border */
}

Tlo elementow

.element {
    background-color: #f0f0f0;
    background-image: url('tlo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

✏️

Zadania

▼

Latwe

Zadanie 1: Stylizacja strony CSS

Wez strone HTML stworzona na poprzedniej lekcji i dodaj do niej zewnetrzny arkusz stylow (plik style.css). Zmien: kolor tla strony, czcionke i kolor naglowkow, rozmiar czcionki akapitow, dodaj obramowanie do tabeli. Podlacz plik CSS za pomoca <link>.

Pokaz przykladowe rozwiazanie

/* style.css */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #2c3e50;
    text-align: center;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

p {
    font-size: 16px;
    line-height: 1.6;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #3498db;
    color: white;
}

Srednie

Zadanie 2: Selektory i klasy

Stworz strone z trzema sekcjami (div) o roznych klasach: "info", "ostrzezenie", "blad". Kazda sekcja powinna miec inny kolor tla, obramowanie i ikone. Dodaj takze pseudoklase :hover, ktora zmienia kolor tla przy najechaniu myszka. Uzyj selektora potomka, aby rozne naglowki w roznych sekcjach mialy rozne kolory.

Srednie

Zadanie 3: Model pudelkowy w praktyce

Stworz strone z trzema "kartami" (box) obok siebie. Kazda karta powinna miec: bialy kolor tla, cien (box-shadow), zaokraglone rogi (border-radius), padding 20px, margin 10px. Eksperymentuj z roznymi wartosciami margin i padding - zaobserwuj jak wplywaja na uklad strony.

Trudne

Zadanie 4: Kompletna strona z CSS

Zaprojektuj kompletna strone "wizytowke" z: naglowkiem (header) z tlem gradientowym, menu nawigacyjnym z efektem hover, sekcja "O mnie" z obrazem i tekstem, sekcja "Umiejetnosci" z kolorowymi paskami, stopka. Calosc ostylowana zewnetrznym plikiem CSS. Uzyj Google Fonts do importu ciekawej czcionki.

🎥

Materialy wideo

▼

Czym jest CSS? Kaskadowe Arkusze Stylów 🎨

Maciej Majka | Strony Internetowe & Marketing

Kurs efektywne strony z CSS3 : Technologia WEB FONT

strefakursow.pl

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

📜

Podstawa programowa

▼

Lekcja 19: CSS - arkusze stylow, formatowanie stron