ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

HTML СТАРТ HTML Введение HTML Редакторы HTML Основные примеры HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Пути файлов HTML Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Типы ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работники HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

HTML Справочники

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

HTML Стили - CSS


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;">This is a Blue Heading</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>This is a heading</h1>
<p>This is a paragraph.</p>

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

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

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

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

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

Пример

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

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

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

Вот как выглядит файл "styles.css":

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

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


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>This is a heading</h1>
<p>This is a paragraph.</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">I am different</p>

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

Пример

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

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

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


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

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

<p class="error">I am different</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 Справочник тегов.