ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

HTML Стили - CSS

❮ Prev Next ❯

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

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

В этой теме:

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

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

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

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

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

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

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

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

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 Пути к файлам.

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

  • Используйте 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>My Home Page</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-элемента?
  • Какие есть способы ссылки на внешний файл стилей?
❮ Prev Next ❯