Podsumowanie modułu CSS

Gratulacje, podróżniku! Przeszliśmy wspólnie przez cały moduł poświęcony CSS - językowi stylizacji, który zamienia surowe hieroglify HTML w piękne malowidła na ścianach świątyni. Czas na krótkie podsumowanie najważniejszych konceptów, które opanowałeś.

Co już potrafisz

Podstawy CSS

Tworzenie reguł CSS z selektorem, właściwością i wartością
Łączenie CSS z HTML przez
```
<link>
```
i
```
<style>
```
Komentarze w CSS:
```
/* komentarz */
```
Rozumiesz, że CSS to kaskadowe arkusze stylów - "kaskadowe" oznacza, że style mogą się nadpisywać

Selektory - Precyzyjne Wskazywanie Elementów

Selektory elementów:
```
h1
```
,
```
p
```
,
```
div
```
- jak wskazanie typu hieroglifu
Selektory klas:
```
.klasa
```
- jak wskazanie grupy skrybów o tej samej specjalizacji
Selektory ID:
```
#identyfikator
```
- jak wskazanie konkretnego faraona po imieniu
Selektory potomków:
```
div p
```
,
```
.kontener h2
```
- elementy wewnątrz innych elementów
Grupowanie selektorów:
```
h1, h2, h3 { ... }
```
- jedna reguła dla wielu elementów
Zaawansowane selektory:
```
+
```
,
```
>
```
,
```
~
```
, selektory atrybutów - precyzyjna kontrola

Kolory i Czcionki

Kolory: nazwy (
```
red
```
), hex (
```
#ff0000
```
), rgb (
```
rgb(255, 0, 0)
```
), hsl
Czcionki:
```
font-family
```
,
```
font-size
```
,
```
font-weight
```
Importowanie czcionek z Google Fonts
Formatowanie tekstu:
```
text-align
```
,
```
text-decoration
```
,
```
text-transform
```

Box Model - Anatomia Elementu

Model pudełkowy CSS to fundament layoutu, tak jak bloki kamienne to fundament piramidy:

```
padding
```
- odstęp wewnętrzny (jak dystans między ścianą a sarkofagiem)
```
margin
```
- odstęp zewnętrzny (jak przestrzeń między piramidami)
```
border
```
- obramowanie (jak mury obronne świątyni)
```
box-sizing: border-box
```
- przewidywalne wymiary (nowoczesny standard)

Display i Pozycjonowanie

```
display: block
```
,
```
inline
```
,
```
inline-block
```
,
```
none
```

position: static

relative

absolute

fixed

sticky

```
z-index
```
- warstwy elementów (jak kolejne warstwy farby na ścianie świątyni)

Kaskadowość i Specyficzność

Kolejność źródeł stylów - kaskada decyduje, który styl wygrywa
Specyficzność selektorów: element (1) < klasa (10) < ID (100) < inline (1000) < !important
Dziedziczenie właściwości - elementy potomne mogą dziedziczyć style od rodziców

Pseudo-klasy i Pseudo-elementy

```
:hover
```
,
```
:focus
```
,
```
:active
```
,
```
:visited
```
- reakcja na interakcję użytkownika
```
:first-child
```
,
```
:nth-child()
```
,
```
:last-child
```
- selekcja na podstawie pozycji
```
::before
```
,
```
::after
```
- dodawanie treści dekoracyjnej
```
::first-line
```
,
```
::first-letter
```
- stylizacja fragmentów tekstu

Analogie Egipskie

W tym module porównywaliśmy CSS do sztuki dekorowania świątyń egipskich:

Selektory to jak wskazywanie, którą ścianę chcesz ozdobić
Właściwości i wartości to jak wybór kolorów pigmentów i wzorów
Box Model to jak planowanie przestrzeni wokół każdego malowidła
Kaskadowość to jak nadpisywanie starszych malowideł nowszymi warstwami
Specyficzność to jak hierarchia - rozkaz faraona (ID) przeważa nad opinią urzędnika (klasa)

Co dalej?

Opanowałeś podstawy CSS, które są fundamentem każdej pięknej strony internetowej. W kolejnych modułach poznasz jeszcze potężniejsze narzędzia:

Flexbox - elastyczne rozmieszczanie elementów
CSS Grid - tworzenie złożonych siatek layoutu
Animacje CSS - ożywianie elementów na stronie
Responsive Design - dostosowywanie do różnych ekranów

Projekt końcowy

Poniżej znajdziesz edytor, w którym możesz przetestować wszystkie poznane techniki CSS. Stwórz stronę o egipskich bogach, wykorzystując jak najwięcej właściwości CSS z tego modułu! Użyj różnych selektorów, kolorów, czcionek, box modelu i pozycjonowania.

Vai a CodeWorlds→