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

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 Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

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

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

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

HTML с CSS



CSS - Каскадные Таблицы Стилей.

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

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

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


Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб страницы.

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

Совет: Слово cascading означает, что стиль, примененный к родительскому элементу, будет также применяться ко всем дочерним элементам внутри родительского элемента. Таким образом, если вы установите цвет основного текста на "blue", все заголовки, параграфа и другие текстовые элементы внутри тела также получат тот же цвет (если вы не укажете что-то еще)!


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>

<p style="color:red;">Красный параграф.</p>
Редактор кода »


Внутренний CSS

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

Внутренний CSS определяется в разделе <head> HTML страницы, в элементе <style>:

В следующем примере задается цвет текста всех элементов <h1> (на этой странице) до синего цвета, а цвет текста всех элементов <p>красный. Кроме того, страница будет отображаться с помощью фона "powderblue":

Пример

<!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 Colors, Fonts и Sizes

Здесь мы продемонстрируем некоторые часто используемые свойства 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>
Редактор кода »

Свойство Border

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

Совет: Вы можете определить границу почти для всех HTML элементов.

Пример

Использование свойства CSS border:

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

Свойство Padding

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

Пример

Использование свойств CSS border и padding:

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

Свойство Margin

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

Пример

Использование свойств CSS border и margin:

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

Ссылка на внешний CSS

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

Пример

В этом примере используется полный 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 Путь к Файлам.


Краткое содержание

  • Используйте 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 для пространство снаружы границы

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


HTML Упражнения

Проверте себя с помощью упражнений

Упражнение:

Используйте CSS, чтобы установить желтый цвет фона (тела) документа.

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

  :yellow;

</style>
</head>
<body>

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

</body>
</html>

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


HTML Стиль тегов

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

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.