Из этого материала вы узнаете, как легко добавлять информацию о стилях и как визуально форматировать веб-страницы с помощью CSS.

Если же вы совсем начинающий веб-разработчик и у вас нет понимания, что такое HTML, то лучше начать с его изучения.

Теперь приступим к изучению CSS.

Включение CSS в документы HTML

CSS может быть прикреплен как отдельный файл или встроен в сам HTML-документ. Существует три способа включения CSS в HTML-документ:

  • Встроенные стили (Inline) — использование атрибута style в самом теге HTML.
  • Внедренные стили (Embed) — использование элемента <style> в разделе <head> документа.
  • Внешние стили (External) — с помощью элемента <link> указывающего на внешний файл CSS.

Теперь рассмотрим все способы подробнее.

Встроенные стили (inline) имеют самый высокий приоритет, а внешние таблицы стилей (external) имеют самый низкий. Это означает, что если вы укажете стили для элемента как во встроенных, так и во внешних таблицах стилей, конфликтующие правила стилей во встроенной таблице стилей переопределят внешнюю таблицу стилей.

Встроенные стили (Inline)

Встроенные стили используются для применения уникальных стилизационных правил к элементу путем помещения их непосредственно в сам тег с помощью атрибута style.

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара "property: value" разделяется точкой с запятой (;), так же, как во встроенных или внешних таблицах стилей. Стили должны быть записаны одной строкой, в которой не должно быть разрыва, как показано здесь:

<h1 style="color:red; font-size:30px;">Это заголовок</h1>
<p style="color:green; font-size:22px;">Это абзац.</p>
<div style="color:blue; font-size:14px;">Это некоторый текстовый контент.</div>

Использование встроенных стилей обычно считается плохой практикой. Поскольку стили смешивается с разметкой документа, это делает код сложным для поддержки и сводит на нет цель использования CSS.

Невозможно стилизовать псевдо-элементы и псевдо-классы с помощью встроенных стилей. Для этого используйте внешние таблицы стилей.

Внедренные стили (Embed)

Встроенные или внутренние таблицы стилей влияют только на текущий документ, в который они встроены.

Встроенные таблицы стилей должны быть определены в <head> разделе документа HTML с использованием элемента <style> . Вы можете определить любое количество элементов <style> в документе HTML, но они должны появляться между тегами <head> и </head>. Например:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Пример HTML Документа</title>
    <style>
        body { background-color: yellow; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>Это заголовок</h1>
    <p>Это параграф текста.</p>
</body>
</html>

Атрибут type тега <style> и <link> (имеется в виду type="text/css") определяет язык таблицы стилей. Этот атрибут является чисто информативным. Вы можете пропустить его, поскольку CSS является стандартным языком таблиц стилей по умолчанию в HTML5.

Внешние стили (External)

Внешние таблицы стилей идеально подходят, когда их нужно применить ко многим страницам веб-сайта.

Внешняя таблица стилей содержит все правила в отдельном документе, на который вы можете ссылаться из любого HTML-файла на своем сайте. Внешние таблицы стилей являются наиболее гибкими, поскольку с помощью внешней таблицы изменив только один файл вы можете изменить внешний вид всего веб-сайта.

Вы можете прикрепить внешние таблицы стилей двумя способами — с помощью ссылки (link) или импорта (import) .

Перед установкой ссылки нам нужно сначала создать таблицу стилей. Давайте откроем любой удобный редактор кода и создадим новый файл. Теперь введите следующий CSS-код внутри этого файла и сохраните файл как "style.css".

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

Внешняя таблица стилей может быть связана с HTML-документом с помощью тега <link>. Тег <link> должен находится внутри раздела <head>, как в следующем примере:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Мой HTML-документ</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Это заголовок</h1>
    <p>Это параграф текста.</p>
</body>
</html>

Среди всех трех методов использование внешней таблицы стилей является лучшим методом определения и применения стилей к HTML-документам. При их использовании, исходный HTML-файл требует минимальных изменений в разметке.

Прикрепление стилей с помощью @import

Правило @import — это еще один способ загрузки внешней таблицы стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу стилей и использовать ее.

Самый простой способ использования — в заголовке (<head>) вашего документа. Обратите внимание, что другие правила CSS все еще могут быть включены в элемент <style> . Вот пример:

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

Точно так же вы можете использовать правило @import для импорта таблицы стилей внутри другой таблицы.

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

Все правила @import должны появляться в начале таблицы стилей. Любое правило, определенное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах стилей. Однако импортировать таблицу стилей в другую таблицу стилей не рекомендуется из-за проблем с производительностью.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.