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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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> Определяет связь между документом и внешним ресурсом