Стили HTML с помощью CSS

Стили HTML - CSS

CSS означает Cascading Style Sheets (каскадные таблицы стилей). Он экономит много работы, так как может управлять оформлением многих веб-страниц одновременно. CSS отвечает за стили и цвета, позволяет управлять текстом, оформлять блоки и многое другое.

Что такое CSS?

CSS используется для оформления макета веб-страницы. С его помощью можно управлять цветом, шрифтом, размером текста, расстоянием между элементами, тем, как позиционируются элементы, фоновыми изображениями и цветами, разными макетами для разных размеров экрана и многим другим.

Совет: «Каскадный» означает, что стиль, заданный для родительского элемента, применяется и к его дочерним элементам. Так, если задать синий цвет текста body, заголовки и абзацы внутри body тоже станут синими, если не указано иное.

Использование CSS

CSS можно добавить в HTML тремя способами: встроенный (inline) — с помощью атрибута style элемента; внутренний (internal) — с помощью элемента <style> в <head>; и внешний (external) — с помощью элемента <link>, указывающего на отдельный файл CSS.

Наиболее распространён внешний файл, но в этом руководстве используются встроенные и внутренние стили, так как их легче показать и опробовать.

Встроенный CSS

Встроенный CSS применяет уникальный стиль к одному элементу с помощью его атрибута style.

Пример

Синий заголовок и красный абзац, оформленные встроенным способом.

Страница, использующая встроенный CSS через атрибут style: синий h1 «A Blue Heading» и красный абзац «A red paragraph.»

> Результат: полная HTML-страница

Prompt

Страница, использующая встроенный CSS через атрибут style: синий h1 «A Blue Heading» и красный абзац «A red paragraph.»

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Встроенный Css</title>
</head>
<body>

<h1 style="color:blue;">Синий заголовок</h1>

<p style="color:red;">Красный абзац.</p>

</body>
</html>

Внутренний CSS

Внутренний CSS определяет стиль для всей страницы. Он размещается в <head> внутри элемента <style> и применяется к каждому подходящему элементу на этой странице.

Пример

Страница, оформленная с помощью внутреннего блока <style>.

Страница, использующая внутренний CSS в элементе style в head: фон страницы powderblue, все h1 синие, все p красные, с одним заголовком и одним абзацем в body.

> Результат: полная HTML-страница

Prompt

Страница, использующая внутренний CSS в элементе style в head: фон страницы powderblue, все h1 синие, все p красные, с одним заголовком и одним абзацем в body.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Внешний CSS

Внешняя таблица стилей определяет стиль для многих страниц. На неё ссылаются из <head> каждой страницы с помощью элемента <link>. Файл содержит только CSS (без HTML) и сохраняется с расширением .css.

Совет: С внешней таблицей стилей можно изменить внешний вид всего сайта, отредактировав всего один файл.

Пример

Страница, ссылающаяся на внешний файл styles.css.

Страница, ссылающаяся на внешнюю таблицу стилей styles.css с помощью элемента link в head, содержащая один заголовок и один абзац.

> Результат: полная HTML-страница

Prompt

Страница, ссылающаяся на внешнюю таблицу стилей styles.css с помощью элемента link в head, содержащая один заголовок и один абзац.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

styles.css

Как выглядит внешний файл styles.css.

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Цвета, шрифты и размеры CSS

Некоторые распространённые свойства CSS: color задаёт цвет текста, font-family задаёт шрифт, а font-size задаёт размер текста.

Пример

Страница, использующая color, font-family и font-size.

Страница с внутренним CSS, демонстрирующим color, font-family и font-size: h1 синий, verdana, 300%; p красный, courier, 160%, с одним заголовком и одним абзацем.

> Результат: полная HTML-страница

Prompt

Страница с внутренним CSS, демонстрирующим color, font-family и font-size: h1 синий, verdana, 300%; p красный, courier, 160%, с одним заголовком и одним абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Рамка CSS

CSS-свойство border рисует рамку вокруг элемента. Рамку можно добавить почти к любому элементу.

Пример

Абзац с рамкой.

Страница с внутренним CSS, задающим абзацам сплошную рамку 2px powderblue, с одним отображаемым абзацем.

> Результат: полная HTML-страница

Prompt

Страница с внутренним CSS, задающим абзацам сплошную рамку 2px powderblue, с одним отображаемым абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<p>Это абзац с рамкой.</p>

</body>
</html>

Внутренний отступ (padding) CSS

CSS-свойство padding добавляет пространство между текстом и рамкой.

Пример

Абзац с рамкой и внутренним отступом.

Страница с внутренним CSS, задающим абзацам сплошную рамку 2px powderblue и внутренний отступ 30px, с одним абзацем.

> Результат: полная HTML-страница

Prompt

Страница с внутренним CSS, задающим абзацам сплошную рамку 2px powderblue и внутренний отступ 30px, с одним абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<p>Это абзац с рамкой и внутренним отступом.</p>

</body>
</html>

Внешний отступ (margin) CSS

CSS-свойство margin добавляет пространство снаружи рамки.

Пример

Абзац с рамкой и внешним отступом.

Страница с внутренним CSS, задающим абзацам сплошную рамку 2px powderblue и внешний отступ 50px, с одним абзацем.

> Результат: полная HTML-страница

Prompt

Страница с внутренним CSS, задающим абзацам сплошную рамку 2px powderblue и внешний отступ 50px, с одним абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<p>Это абзац с рамкой и внешним отступом.</p>

</body>
</html>

Ссылка на внешний CSS

Можно сослаться на внешнюю таблицу стилей полным URL или путём, относительным к текущей странице или домену.

Полный URL

Ссылка с полным веб-адресом.

Страница, ссылающаяся на таблицу стилей с помощью полного URL: https://prompt-cookbook.com, с заголовком и абзацем.

> Результат: полная HTML-страница

Prompt

Страница, ссылающаяся на таблицу стилей с помощью полного URL: https://prompt-cookbook.com, с заголовком и абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://prompt-cookbook.com">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Относительно домена

Ссылка на файл в папке html текущего сайта.

Страница, ссылающаяся на таблицу стилей с помощью пути, относительного к домену: /html/styles.css, с заголовком и абзацем.

> Результат: полная HTML-страница

Prompt

Страница, ссылающаяся на таблицу стилей с помощью пути, относительного к домену: /html/styles.css, с заголовком и абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Та же папка

Ссылка на файл в той же папке, что и страница.

Страница, ссылающаяся на таблицу стилей, находящуюся в той же папке: styles.css, с заголовком и абзацем.

> Результат: полная HTML-страница

Prompt

Страница, ссылающаяся на таблицу стилей, находящуюся в той же папке: styles.css, с заголовком и абзацем.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Итоги главы

Подведём итог: используйте атрибут style для встроенного оформления, элемент <style> для внутреннего CSS и элемент <link> для внешнего CSS, оба размещаются в <head>. Распространённые CSS-свойства включают color для цвета текста, font-family для шрифтов, font-size для размера текста, border для рамок, padding для пространства внутри рамки и margin для пространства снаружи неё.

Теги стиля HTML

Два связанных тега — это <style>, который определяет информацию о стиле для документа, и <link>, который определяет связь между документом и внешним ресурсом.