Глава 22 · Веб-разработка с Python

Делаем красивее — CSS

CSS превращает голый HTML в страницу с цветом, шрифтами и аккуратными отступами.

Делаем красивее — CSS

Сам по себе HTML выглядит скучно — чёрный текст на белом фоне. За внешний вид отвечает CSS (Cascading Style Sheets — каскадные таблицы стилей). CSS выбирает элементы и задаёт им свойства — цвет, отступы, размер шрифта:

stili.css

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

h1 {
  color: #4a2fbd;
}

p {
  line-height: 1.6;
}

Подключить CSS-файл к HTML-странице можно одной строкой внутри <head>:

podklyuchenie.html

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

«Каскадные» — откуда название

Если два правила CSS задают один и тот же элемент по-разному, побеждает то, что идёт позже или более точно указывает на элемент — стили как бы «стекают» друг на друга, как каскад. Именно поэтому в имени CSS есть слово «каскадные».

Практика в Jupyter Notebook

22-02-html-css.ipynb · включает пример CSS

Открыть ноутбук →

← Назад

HTML

JavaScript