САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

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 Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

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

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

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 Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

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="http://www.progtutorial.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 Справочник тегов.