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

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

HTML/CSS. Как подключить каскадную таблицу стилей (CSS) к веб-странице?

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

Стилизация HTML с помощью CSS

CSS - (англ. Cascading Style Sheets — каскадные таблицы стилей). CSS описывает, как элементы HTML должны отображаться на экране, бумаге или на других носителях. CSS экономит много работы. Таблица стилей может управлять размещением нескольких веб-страниц одновременно.

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

Inline (встроенный или строчный) - с помощью атрибута style в HTML-элементах
Internal (внутренний) - с помощью элемента <style> в разделе <head>
External (внешний) - с помощью внешнего файла CSS

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

Примечание: Вы можете узнать больше о CSS в Учебнике по CSS на нашем сайте на русском языке или на сайте W3schools в оригинале.

Встроенный (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 страниц используется внешняя таблица стилей. С помощью внешней таблицы стилей вы можете изменить вид всего веб-сайта, изменив лишь один CSS файл!

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на CSS файл в разделе <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-кода и должен быть сохранён с расширением .css.

Какие современные текстовые редакторы можно использовать для создания и редактирования CSS кода, вы можете узнать на нашем сайте в теме Редакторы кода

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

Пример:

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

CSS Fonts - Шрифты

Свойство 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 определяет добавление пространства (пробела) между текстом и границей border (внутренний отступ):

Пример:

p {
border: 1px solid powderblue;
padding: 30px;
}

Попробуйте сами »

CSS Margin - Внешний отступ

CSS свойство margin определяет пространство (пробел) за пределами границы border (внешний отступ):

Пример:

p {
border: 1px solid powderblue;
margin: 50px;
}

Попробуйте сами »

Атрибут Id (идентификатора)

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

<p id="p01">I am different</p>

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

Пример:

#p01 {
color: blue;
}

Попробуйте сами »

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

Атрибут Class (класс)

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

<p class="error">I am different</p>

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

Пример:

p.error {
color: red;
}

Попробуйте сами »

Внешние ссылки на таблицы стилей

На внешние таблицы стилей можно ссылаться с полным URL-адресом или путём, связанным с текущей веб-страницей.

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

Пример:

Попробуйте сами »

Этот пример ссылается на таблицу стилей, расположенную в папке 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 для задания внешнего отступа (за пределами border)

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

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 » Упражнение 6 »

HTML теги стиля

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

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

❮ Prev Next ❯