Встроенный, вложенный и внешний CSS
26.12.2020
Встроенный (inline) CSS
Использование встроенного стиля является одним из способов для вставки таблицы стилей. С помощью встроенного стиля, применяется уникальный стиль к одному элементу.
Чтобы использовать встроенный стиль, добавьте атрибут style к соответсвующему тегу.
В нижеуказанном примере отображено, как создавать параграф с серым фоном и белым текстом:
<p style="color:white; background-color:gray;"> Это пример встроенного CSS стиля.</p>
Вложенный (Embedded) CSS
Вложенные стили определяются с помощью элемента <style>, внутри секции head HTML страницы.
Например, следующий код определяет стиль всех параграфов:
<html>
<head>
<title>Название страницы</title>
<style>
p {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<p>Это первый параграф</p>
<p>Это второй параграф</p>
</body>
</html>
Внешний (External) CSS
В этом способе, все правила стилей содержатся в одном текстовом файле, который сохраняется с расширением .css.
Затем на этот файл ссылается HTML с помощью тега <link>. Элемент <link> располагается внутри секции заголовка (head).
<html>
<head>
<title>Название страницы</title>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
<p>Это первый параграф</p>
<p>Это второй параграф</p>
<p>Это третий параграф</p>
</body>
</html>p {
color: white;
background-color: gray;
}
Проверка знаний
Категории
Дополнительные сведения
Данные уроки мы - модераторы Web-infinity стараемся делать простыми в понимании, интересными, полезными и эффективными особенно для начинающих. Если у вас появились вопросы на каком либо этапе, уроке, то вы можете обратиться в поддержку по адресу web-infinity-team@mail.ru