ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

HTML Стили - CSS

❮ Prev Next ❯

Мода выходит из моды, а стиль – никогда! И это правда!
Коко Шанель

CSS расшифровывается как Cascading Style Sheets - каскадные таблицы стилей.

CSS экономит много работы. Он может управлять макетом нескольких веб-страниц одновременно.

CSS = Стили и цвета

Манипуляция текстом
Цвета, Блоки

В этой теме:

Стилизация HTML с помощью CSS. Каскадные таблицы стилей

CSS расшифровывается как Cascading Style Sheets - Каскадная таблица стилей.

CSS описывает, как HTML элементы должны отображаться на экране, бумаге или других носителях..

CSS экономит много времени. CSS может контролировать макет нескольких веб-страниц одновременно.

CSS можно добавить к HTML-элементам тремя способами:

  • Inline (встроенный или строчный) - используя атрибут style в HTML элементах
  • Internal (внутренний) - используя элемент <style> в разделе <head>
  • External (внешний) - с помощью внешнего файла CSS

Наиболее распространенный способ добавить CSS – это сохранять стили в отдельных файлах CSS. Тем не менее, здесь мы будем использовать встроенный и внутренний стиль, потому что для обучения это легче продемонстрировать, и вам проще будет попробовать написание CSS-кода самостоятельно.

Подсказка: Вы можете узнать больше о CSS в CSS Учебнике на нашем сайте W3Schools на русском.

Inline CSS - Встроенный (строчный) стиль

Встроенный CSS используется для применения уникального стиля к одному HTML элементу.

Встроенный CSS использует атрибут style HTML элемента.

Этот пример устанавливает цвет текста элемента <h1> в синий:

Пример

<h1 style="color:blue;">Это синий заголовок</h1>
Попробуйте сами »

Internal CSS - Внутренний стиль

Внутренний CSS используется для определения стиля отдельной HTML-страницы.

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

Пример

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Это заголовок</h1>
<p>Это параграф.</p>

</body>
</html>
Попробуйте сами »

External CSS - Внешний стиль

Внешняя таблица стилей используется для определения стиля для нескольких HTML-страниц.

С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив лишь один файл!

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на неё в разделе <head> HTML-страницы:

Пример

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это параграф.</p>

</body>
</html>
Попробуйте сами »

Внешнюю таблицу стилей также, как и HTML-код, можно написать в любом текстовом редакторе. Файл не должен содержать код HTML и должен быть сохранен с расширением .css.

Ось як виглядає файл "styles.css":

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

Примечание: Подробнее о текстовых редакторах вы можете прочитать в разделе HTML Редакторы на нашем сайте W3Schools на русском.

CSS Шрифты

CSS свойство color определяет цвет текста, который будет использоваться.

CSS свойство font-family определяет семейство шрифта, которое будет использоваться.

CSS свойство font-size определяет размер текста, который будет использоваться.

Пример

<!DOCTYPE html>
<html>
<head>
<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 Border - Граница

CSS свойство border определяет границу вокруг HTML элемента:

Пример

p {
  border: 1px solid powderblue;
}
Попробуйте сами »

CSS Padding - Внутренний отступ

CSS свойство padding определяет отступ (пробел) между текстом и границей:

Пример

p {
  border: 1px solid powderblue;
  padding: 30px;
}
Попробуйте сами »

CSS Margin - Внешний отступ

CSS свойство margin определяет пространство (пробел) вне границы (внешний отступ):

Пример

p {
  border: 1px solid powderblue;
  margin: 50px;
}
Попробуйте сами »

Атрибут идентификатора - id

Чтобы указать конкретный стиль для одного определённого элемента, добавьте атрибут id до элемента:

<p id="p01">Я отличаюсь</p>

потом укажите стиль для элемента с указанным id:

Пример

#p01 {
  color: blue;
}
Попробуйте сами »

Идентификатор id указывается в css с помощью символа # (решетка) и названия идентификатора.

Примечание: Идентификатор (id) элемента должен быть уникален на странице, поэтому селектор идентификаторов используется для выбора одного уникального элемента!

Атрибут класса - class

Чтобы указать стиль для определённых типов элементов, добавьте атрибут class до элемента:

<p class="error">Я отличаюсь</p>

Потом укажите стиль для элементов с определённым классом:

Пример

p.error {
  color: red;
}
Попробуйте сами »

Класс (class) указывается в css с помощью символа . (точка) и название класса.

Внешние таблицы стилей

На внешние таблицы стилей можно ссылаться по полному URL или по пути относительно текущей веб-страницы.

В этом примере используется полный URL для ссылки на таблицу стилей:

Пример

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Попробуйте сами »

Этот пример ссылается на таблицу стилей, расположенную в папке html на текущем веб-сайте:

Пример

<link rel="stylesheet" href="/html/styles.css">
Попробуйте сами »

Этот пример ссылается на таблицу стилей, расположенную в той же папке, что и текущая страница:

Пример

<link rel="stylesheet" href="styles.css">
Попробуйте сами »

Вы можете прочитать больше о путях к файлам в разделе HTML Пути к файлам на нашем сайте W3Schools на русском.

Резюме раздела

  • Используйте HTML атрибут style для встроенного стиля
  • Используйте HTML элемент <style> для определения внутреннего CSS
  • Используйте HTML элемент <link> для ссылки на внешний файл CSS
  • Используйте HTML элемент <head> для сохранения элементов <style> и <link>
  • Используйте CSS свойство color для установки цвета текста
  • Используйте CSS свойство font-family для установки семейства шрифтов текста
  • Используйте CSS свойство font-size для установки размера текста
  • Используйте CSS свойство border для установки границ элементов
  • Используйте CSS свойство padding для установки отступа внутри границ
  • Используйте CSS свойство margin для установки отступа за пределами границ

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте CSS, чтобы установить желтый цвет (yellow) фона документа (body).

<!DOCTYPE html>
<html>
<head>
<style>

  :yellow;

</style>
</head>
<body>

<h1>Моя домашняя страница</h1>

</body>
</html>

HTML Теги стиля

Тег Описание
<style> Определяет информацию про стили HTML документа
<link> Определяет ссылку между документом и внешним ресурсом

Для получения полного списка всех доступных тегов HTML посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Что такое стилизация веб-страниц?
  • Как расшифровывается CSS?
  • Для чего нужны каскадные таблицы стилей?
  • Как можно добавить CSS в HTML-элементы?
  • Какой атрибут использует встроенный CSS?
  • В каком разделе веб-страницы указывается внутренний CSS?
  • Как указывается внешняя таблица стилей в HTML-документе?
  • Какое расширение должно быть в файле внешней таблицы стилей?
  • Какое CSS-свойство определяет цвет текста?
  • Какое CSS-свойство определяет семейство шрифта?
  • Какое CSS-свойство определяет размер текста?
  • Какое CSS-свойство определяет границу вокруг HTML-элемента?
  • Какое CSS-свойство определяет внутренний отступ между текстом и пределом HTML-элемента?
  • Какое CSS-свойство определяет внешний отступ вне предела HTML-элемента?
  • Какой атрибут используется для конкретного стиля определенного HTML-элемента?
  • С помощью какого символа в CSS указывается идентификатор (id) HTML-элемента?
  • Какой атрибут используется для определённых типов HTML-элементов?
  • С помощью какого символа в CSS указывается название класса HTML-элемента?
  • Какие есть способы ссылки на внешний файл стилей?

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

HTML - CSS - W3Schools Видеоурок

Это видео — введение в CSS и как добавить стили в HTML.

Входит в серию видеоуроков по изучению HTML для начинающих!

❮ Prev Next ❯