Когда речь идет о веб-сайтах, важно не только содержание, но и его представление. Язык таблиц стилей CSS обычно используется для соответствующего форматирования HTML. Таким образом определяются такие атрибуты, как расположение, цвет и форма отдельных элементов HTML. Указания по оформлению CSS существуют независимо от HTML и также должны быть интегрированы в электронный документ.
Как добавить CSS в HTML: какие методы существуют?
Связать CSS с HTML можно с помощью внутренних или внешних таблиц стилей. При использовании внутренних таблиц стилей инструкции CSS располагаются внутри HTML-документа. Затем вы можете интегрировать CSS в начало HTML-файла или поместить его в исходный код. При использовании этого метода преимуществом является хорошее базовое понимание HTML и его синтаксиса. Наиболее распространенным и чистым способом разработки веб-сайтов является использование внешних таблиц стилей CSS. CSS интегрируется путем связывания HTML-документа с внешним CSS-файлом. Ниже приведен обзор трех методов:
- Встроенный стиль, т.е. непосредственно в исходном коде
- В начале HTML-документа
- Внедрение во внешний файл CSS
Конструктор сайтов IONOS MyWebsite включает в себя широкий выбор шаблонов дизайна, чтобы вы могли создать профессионально выглядящий сайт.
Включить CSS: встроенный стиль
При этом методе инструкции по оформлению интегрируются непосредственно в исходный код с помощью тега стиля. Желаемые свойства присваиваются только одному элементу, поэтому возможны отклонения в оформлении всего HTML-документа. В приведенном ниже примере заголовок h1 должен отображаться синим цветом и размером шрифта 14:
<h1 style="color:blue; font-size:14px;">This is a headline</h1>При таком типе интеграции многие преимущества CSS теряются. Это включает возможность определить одну команду, которая затем применяется, например, ко всем элементам h1 в HTML-документе. При некоторых обстоятельствах также возрастают усилия по обслуживанию, поскольку требуется прямое вмешательство в HTML-код.
Добавление CSS в начало HTML
Здесь вы включаете CSS в заголовок HTML-документа. Таким образом, тег стиля становится частью элемента head и применяется ко всему файлу. Инструкции по оформлению содержатся в документе, но отделены от HTML-кода. В приведенном ниже примере применяется та же команда, что и в предыдущем примере. Однако на этот раз все заголовки h1 в файле должны быть отформатированы в соответствии с этой информацией.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>Интеграция CSS с внешним файлом
Это, возможно, самый лучший способ связать CSS с HTML. Веб-сайт часто состоит из множества страниц, поэтому имеет смысл сохранять инструкции по оформлению в отдельном файле. Это позволяет четко разделить содержание и дизайн и облегчает обслуживание. Экспортированный файл просто привязывается к HTML-документу. Вы сохраняете внешнюю таблицу стилей с расширением .css, а затем с помощью тега ссылки включаете ее в HTML-файл. В следующем примере файл CSS назван stylesheet.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>Атрибут rel определяет тип логической связи, а href указывает на CSS-файл для вставки. Обратите внимание, что элемент link может принимать другие атрибуты. Например, с помощью media = «print» вы указываете, что таблица стилей будет использоваться только в режиме печати. Внешняя таблица стилей не содержит HTML-тегов, только соответствующий селектор и фигурные скобки с декларациями, как в следующем примере:
h1 {
color: blue;
font-size:14px;
}Откройте для себя лучшие приемы CSS для оптимизации дизайна вашего веб-проекта или доверьтесь нашей услуге MyWebsite Design Service для получения профессиональных результатов.