Rozdział 22 · Tworzenie stron internetowych z Python

CSS: projektowanie i układ elementów strony internetowej

CSS określa wygląd i lokalizację elementów HTML- dokumentu.

CSS (Cascading Style Sheets - Kaskadowe arkusze stylów) to język tabelowy stylów, zaprojektowanych do opisywania wyglądu i układu elementów dokumentu, Napisane HTML lub innym językiem znaczników. Z pomocą CSS ustawionych kolorów, czcionek, rozmiary, wypełnienia, ramki, układ elementów oraz dostosowywanie strony do różnych rozmiarów ekran.

HTML ustala strukturę dokumentu i CSS determinuje, jak ta struktura pojawia się na ekran: bez własnych stylów przeglądarka korzysta ze standardowego projektu — zwykłej czcionki, tekst, minimalne oddzielenie. CSS wybiera elementy strony i ustawia ich właściwości:

stili.css

body {
  font-family: sans-serif;
  background: #f7f7fb;
  color: #1a1a2e;
}

h1 {
  color: #4a2fbd;
}

p {
  line-height: 1.6;
}

Każda zasada CSS — to selektor (które elementy reguła wybiera: tag, klasa lub identyfikator) oraz para nawiasów Nieruchomość: Wartość. Podłączenie pliku CSS- do strony HTML- można wykonać jednym wierszem wewnątrz <head>:

podklyuchenie.html

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

Ta sama strona, CSS: jasnofioletowym tłem, ciemnofioletowym nagłówkiem i zwiększoną odstępami między wierszami w akapicie — Dokładnie ten sam HTML z sekcji 22.2, ale z podłączonym stili.css: tłem, kolor nagłówka i odstęp między wierszami teraz są ustawione jawnie, a nie zostawione do uznania przeglądarki.

Klasy — stylizujemy nie wszystkie tagi po kolei

Selektor według tagu (p { }) maluje wszystkie akapity naraz. Aby wyróżnić tylko niektóre elementy, nadaje im atrybut class, i w CSS odnieść się do tego przez kropkę:

klass.html

<p class="preduprezhdenie">Осторожно, ступенька!</p>

klass.css

.preduprezhdenie {
  color: #b3261e;
  font-weight: 700;
}

Kaskada i dziedziczenie to dwa różne mechanizmy

Kaskada decyduje, którą z kilku konkurujących reguł zastosować do tego samego elementu: w przypadku uproszczonym, gdy pozostałe warunki są równe, bardziej szczegółowy selektor wygrywa mniej szczegółowy, a jeśli szczegółowość jest taka sama, decyduje o kolejności reguł w pliku. Jest to część algorytmu kaskadowego, a nie kaskady jako całości. Dziedzictwo jest osobnym mechanizmem: niektóre właściwości (na przykład, font-family) przejmuje domyślny element od rodzica, jeśli nic nie jest dla niego wyraźnie określone.

Model blokowy

Każdy element ma swoją zawartość i jest wcięty w ramce wokół niego (padding), sama ramka (border) oraz wcięcie od zewnątrz do sąsiednich elementów (margin):

blochnaya_model.css

.kartochka {
  padding: 16px;
  border: 1px solid #ccc;
  margin: 12px;
}

Układ elementów: display i flexbox

Nieruchomości display określa, czy pierwiastek zachowuje się jak blok Pełnowymiarowa (blockjako <p> oraz <div>) lub jako część stringa (inlinejako <a> oraz <span>). Ustawiać wiele pozycji z w równych odstępach, najczęściej stosowanych flexbox:

flexbox.css

.panel {
  display: flex;
  gap: 12px;
  align-items: center;
}

Responsywny układ: jedna strona, różne ekrany

Zapytanie medialne (media query) stosuje część reguł tylko przy określonych warunkach — na przykład tylko na wąskich ekranach:

adaptivnost.css

@media (max-width: 480px) {
  .panel {
    flex-direction: column;
  }
}

Dzięki temu ta sama strona może ustawiać elementy w rzędzie na szerokim ekranie i w kolumnie — na wąskim, bez osobnej strony mobilnej. Końcowy projekt rozdziału (rozdział 22.35) używa właśnie tego zabiegu.

Oficjalna dokumentacja: MDN — CSS.

Praktyka: HTML struktura i style CSS

interaktywny laptop bezpośrednio w przeglądarce – Python 3.14 przez Pyodide, bez instalacji

Otwórz praktykę →

← Back

HTML: struktura strony internetowej

Następny →

JavaScript: programowanie w przeglądarce