САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c 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 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

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

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

HTML с CSS



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

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


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

CSS - Cascading Style Sheets (Каскадные Таблицы Стилей).

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

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

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

  • Встроенный - с помощью атрибута style в HTML элементы
  • Внутренний - с помощью элемента <style> в разделе <head>
  • Внешний - с помощью внешнего CSS-файла

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

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


Встроенный CSS

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

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

В данном примере задается синий цвет текста элемента <h1>:

Пример

<h1 style="color:blue;">Заголовок синиго цвета</h1>
Редактор кода »

Внутренний 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>
Редактор кода »

Внешний CSS

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

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

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

Пример

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

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

</body>
</html>
Редактор кода »

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

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

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

Свойство Шрифтов

Свойство 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>
Редактор кода »

Свойство Border

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

Пример

p {
    border: 1px solid powderblue;
}
Редактор кода »

Свойство Padding

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

Пример

p {
    border: 1px solid powderblue;
    padding: 30px;
}
Редактор кода »

Свойство Margin

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

Пример

p {
    border: 1px solid powderblue;
    margin: 50px;
}
Редактор кода »

Атрибут id

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

<p id="p01">Я другой</p>

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

Пример

#p01 {
    color: blue;
}
Редактор кода »

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


Атрибут class

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

<p class="error">Я другой</p>

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

Пример

p.error {
    color: red;
}
Редактор кода »

Внешние Ссылки

Внешние таблицы стилей могут указать полный адрес или относительный путь к текущей веб-странице.

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

Пример

<link rel="stylesheet" href="https://schoolsw3.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, чтобы установить желтый цвет фона (тела) документа.

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

  :yellow;

</style>
</head>
<body>

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

</body>
</html>

Начните упражнения


Теги Стилей HTML

Тег Описание
<style> Определяет стили для HTML-документ
<link> Определяет связь между документом и внешним ресурсом