Lekcja 49 - CSS - arkusze stylow, projektowanie wygladu

📚

Teoria

▼

Czym jest CSS?

CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylow) to jezyk sluzacy do opisywania wygladu dokumentow HTML. Dzieki CSS mozemy kontrolowac kolory, czcionki, marginesy, rozmieszczenie elementow i wiele innych aspektow wizualnych strony.

                    Rozdzielenie tresci od wygladu: HTML odpowiada za strukture i tresc strony, CSS za jej wyglad. To pozwala latwo zmieniac styl calej strony bez modyfikacji HTML.
                

Sposoby dolaczania CSS

Zewnetrzny arkusz stylow (zalecany):

<link rel="stylesheet" href="style.css">

Styl wewnetrzny (w naglowku):

<style>
    h1 { color: blue; }
</style>

Styl inline (niezalecany):
```
<p style="color: red;">Tekst</p>
```

Selektory CSS

/* Selektor elementu */
p { color: blue; }

/* Selektor klasy */
.naglowek { font-size: 24px; }

/* Selektor identyfikatora */
#menu { background: gray; }

/* Selektor potomka */
nav a { text-decoration: none; }

/* Selektor grupowy */
h1, h2, h3 { font-family: Arial; }

/* Pseudoklasy */
a:hover { color: red; }
li:first-child { font-weight: bold; }

Najwazniejsze wlasciwosci CSS

color - kolor tekstu
background-color - kolor tla
font-family - kroj czcionki
font-size - rozmiar czcionki (px, em, rem, %)
font-weight - grubosc czcionki (bold, normal, 100-900)
text-align - wyrownanie tekstu (left, center, right, justify)
text-decoration - dekoracja (underline, none, line-through)
width / height - szerokosc / wysokosc
border - obramowanie (np. 2px solid black)
border-radius - zaokraglenie rogow

Model pudelkowy (Box Model)

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

content - tresc elementu
padding - odstep wewnetrzny (miedzy trescia a obramowaniem)
border - obramowanie
margin - odstep zewnetrzny (miedzy elementami)

.pudelko {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    /* Calkowita szerokosc: 300 + 2*20 + 2*2 + 2*10 = 364px */
}

/* box-sizing: border-box - szerokosc obejmuje padding i border */
* { box-sizing: border-box; }

Kolory w CSS

Nazwy: red, blue, green, white, black, tomato...
Hex: #FF0000, #00FF00, #0000FF, #333333
RGB: rgb(255, 0, 0), rgb(0, 128, 0)
RGBA: rgba(0, 0, 0, 0.5) - z przezroczystoscia
HSL: hsl(0, 100%, 50%) - odcien, nasycenie, jasnosc

✏️

Zadania

▼

Latwe

Zadanie 1: Pierwsze style

Stworz plik style.css i podlacz go do strony HTML z poprzedniej lekcji. Dodaj style: a) zmien czcionke naglowkow na bezszeryfowa (sans-serif), b) ustaw kolor tla strony na jasny, c) wycentruj naglowek glowny, d) zmien kolor linkow i dodaj efekt :hover.

Pokaz przykladowe rozwiazanie

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #2c3e50;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

Srednie

Zadanie 2: Stylowanie tabeli

Ostyluj tabele z planem lekcji (z lekcji 48): a) dodaj obramowanie do komorek, b) zastosuj naprzemienne kolory wierszy (tr:nth-child), c) podswietl wiersz przy najechaniu myszka, d) wyrozij naglowki kolumn kolorem tla, e) zaokraglij rogi tabeli.

Srednie

Zadanie 3: Box Model - wizytowka

Stworz wizytowke (div) z: imieniem, stanowiskiem, emailem i telefonem. Zastosuj model pudelkowy: padding 20px, border 2px, margin 30px auto (wycentrowanie), szerokosc 400px, cien (box-shadow), zaokraglone rogi. Uzyj box-sizing: border-box.

Trudne

Zadanie 4: Kompletna strona ze stylami

Stworz strone "Moje miasto" (HTML + CSS w osobnych plikach): a) naglowek z tlem gradientowym (linear-gradient), b) nawigacja pozioma z efektami hover, c) sekcja z 3 kartami (ramka, cien, zaokraglenia, padding), d) stopka z ciemnym tlem. Uzyj minimum 15 roznych wlasciwosci CSS.

🎥

Materialy wideo

▼

CSS Course Episode 1: Cascading Style Sheets - First Project, Basic Knowledge

Pasja informatyki

Generowanie stylów CSS w programie Photoshop

Tomasz Kościański Akademia Komputerowa

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

📜

Podstawa programowa

▼

Lekcja 49: CSS - arkusze stylow, projektowanie wygladu