В этом руководстве мы разберемся с различными типами таблиц стилей CSS с помощью примеров. Таблица стилей в CSS состоит из одной или нескольких инструкций по стилю, называемых правилами или наборами правил.
В нем описывается, как элемент или группа элементов должны отображаться в HTML-документе. Каждое правило выбирает один или несколько HTML-элементов и сообщает браузерам, как эти элементы должны выглядеть.
Различные типы CSS в HTML
CSS поддерживает в основном три типа таблиц стилей (каскадные таблицы стилей), которые мы можем применить к HTML-элементам в документе. Они следующие:
- Встроенный CSS
- Внутренний/Встроенный CSS
- Внешний CSS
Каждый тип служит разным целям и подходит для разных сценариев веб-разработки. Давайте разберемся со всеми тремя типами CSS: встроенным, внутренним и внешним по очереди с помощью примеров.
Встроенный уровень CSS
Мы можем применить встроенный CSS непосредственно в HTML-элементе, используя атрибут style. С помощью встроенного CSS мы применяем правила стиля непосредственно в открывающем теге HTML-элемента, такого как заголовок или абзац, используя атрибут style. На рисунке ниже показан пример встроенного стиля.
Как вы видите на рисунке выше, мы применили встроенный стиль CSS, используя атрибут style в начальном теге h1. Встроенный стиль определяет цвет шрифта текста «Scientech Easy» как темно-синий. Правило стиля будет применяться только к этому элементу h1. Оно не повлияет на другие теги h1 в HTML-документе.
Встроенный стиль CSS изменяет содержимое, выделенное специальной парой тегов, но не влияет на другое содержимое HTML-документа. Давайте рассмотрим это на примере.
Пример 1:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red; text-align: center;">This is a Heading</h1>
<p style="font-size: 18px; color: green;">This is an inline-styled paragraph.</p>
</body>
</html>
В этом примере встроенный CSS, примененный в элементе <h1>, устанавливает цвет текста на красный и выравнивает текст по центру. Мы сделали это, используя атрибут style непосредственно в открывающем теге <h1>. Аналогично, встроенный CSS, применяемый в теге <p>, устанавливает размер шрифта равным 18 пикселям, а цвет текста — зеленому.
Как вы можете видеть, встроенный стиль применяется только к начальному тегу HTML-элемента, где установлен атрибут style. Более того, в атрибутах style конечная точка с запятой необязательна. Однако рекомендуется включать это, потому что это упрощает добавление дополнительных правил, если они вам нужны.
Пример 2:
<!--Without ending semi-colon-->
<p style="font-size: 16px; color: green">This is a paragraph without ending semi-colon.</p>
Пример 3:
<!--With ending semi-colon-->
<p style="font-size: 16px; color: green;">This is a paragraph with ending semi-colon.</p>Оба примера будут корректно работать в браузере, но второй пример с точкой с запятой легче расширить, если вам понадобится добавить больше стилей позже. Кроме того, добавление точки с запятой в конце улучшает ясность и предотвращает ошибки.
Внутренний CSS (или Внутренняя таблица стилей)
Это второй способ применить правила CSS к элементу или группе элементов в документе или веб-странице. В этом методе мы добавляем правила CSS непосредственно в открывающие <head> и закрывающие </head> теги HTML-документа, используя тег <style>. Это называется внутренним CSS или внутренней таблицей стилей.
Внутреннюю таблицу стилей также называют встроенной таблицей стилей. Общий синтаксис для встраивания таблицы стилей или внутреннего CSS с использованием тега <style> в разделе head HTML-файла выглядит следующим образом:
<head>
<style>
/* CSS rules go here */ </style>
</head>
На рисунке ниже вы можете увидеть пример встроенной таблицы стилей.
Как вы видите на рисунке выше, мы разместили правила стиля между открывающими <style> и закрывающими </style> тегами внутри раздела head. Правило стиля устанавливает цвет фона для основного раздела зеленым только для текущей веб-страницы.
Следовательно, вам следует использовать внутреннюю таблицу стилей, когда вы хотите создать стили для отдельной веб-страницы, которая отличается от остальной части веб-сайта. Давайте рассмотрим пример, основанный на ней.
Пример 4:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
</body>
</html>
В этом примере мы оформили элемент body светло-серым цветом фона. Кроме того, мы оформили элемент <h1> зеленым цветом и выровняли по центру. Обратите внимание, что внутренняя таблица стилей имеет приоритет над внешней таблицей стилей.
Использование внутреннего стиля CSS может занять много времени для нескольких веб-страниц, поскольку вам потребуется разместить таблицу стилей на каждой веб-странице. Более того, вам придется редактировать каждую отдельную страницу, когда вы захотите внести изменения во внешний вид сайта.
Внешний CSS (или Внешняя таблица стилей)
Внешний CSS — это тип файла CSS, который содержит все правила стиля, которые мы хотим применить более чем к одной странице веб-сайта. Эта таблица стилей называется внешней таблицей стилей или связанной таблицей стилей. Внешняя таблица стилей — это отдельный текстовый файл, содержащий ряд правил стиля. Его имя должно соответствовать расширению файла.css.
Мы можем применить внешнюю таблицу стилей, связав или прикрепив ее с помощью тега <link> в разделе head HTML-документа. Общий синтаксис для привязки внешней таблицы стилей к HTML-документам выглядит следующим образом:
<link rel="stylesheet" href="URL" type="text/css" media="media-type">
В приведенном выше синтаксисе,
- Тег
<link>: Этот тег определяет связь между текущим HTML-документом и внешней таблицей стилей. rel="stylesheet": Атрибут rel определяет взаимосвязь между текущим HTML-документом и связанным ресурсом. Чтобы связать внешнюю таблицу стилей, мы присваиваем значение «stylesheet».href="URL": Атрибут href задает URL внешнего ресурса. Этот URL может быть относительным путем или абсолютным URL.type="text/css": Атрибут type указывает MIME-тип связанного ресурса. Для файлов CSS значение равно"text/css". Однако этот атрибут необязателен в HTML5, потому что"text/css"является типом по умолчанию для таблиц стилей.media="media-type": Атрибут media указывает тип носителя, для которого определены стили. Мы можем использовать это, чтобы применять правила стиля только для таргетинга на определенные носители, такие как экран, печать или портативные устройства.
При использовании внешней таблицы стилей все HTML-документы или веб-страницы на веб-сайте используют одну и ту же таблицу стилей. Это самый мощный и предпочтительный метод прикрепления таблиц стилей более чем к одной странице веб-сайта. Обратите внимание, что внешняя таблица стилей не содержит никаких HTML-тегов.
Пример 5:
Внешний файл CSS (styles.css):
/* styles.css */body {
background-color: lightgrey;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
color: black;
}
HTML-документ (index.html):
<!DOCTYPE html>
<html>
<head>
<title>External CSS Style Sheet Example</title>
<!--Linking external style sheet-->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
<body>
<h1>This is a heading styled with an external style sheet.</h1>
<p>This is a paragraph styled with an external style sheet.</p>
</body>
</html>
В этом примере мы привязали внешнюю таблицу стилей с помощью тега <link> к HTML-документу. Эта внешняя таблица стилей содержит правила CSS, которые определяют стили для элементов body, h1 и p. В HTML-документе,
rel="stylesheet"указывает, что связанный файл является таблицей стилей.href="styles.css"указывает путь к внешней таблице стилей CSS.type="text/css"указывает тип содержимого в связанном файле. В HTML5 это больше не требуется.media="screen"указывает, что стили должны применяться при просмотре HTML-документа на экране.
Понимание различных типов таблиц стилей CSS, таких как встроенные, внутренние и внешние, является фундаментальным понятием для начинающих, которые хотят изучать CSS. Вам важно понимать, когда использовать встроенный, внутренний и внешний CSS в HTML-документах. В этом руководстве мы объяснили все типы CSS с синтаксисом и примерами, на которых вы должны попрактиковаться.
