Подключение стилей CSS в HTML странице - шпаргалка для новичков

0 ∞

Не знаете как привязать CSS к HTML? Подключение CSS-кода на HTML-странице можно производить четырьмя способами: в тело документа, встроить код в заголовочную часть страницы (header), указать ссылку на внешний файл, а также импортировать CSS-файл.

Содержание

Как добавить CSS в HTML - встроенные стили

В первом случае стили применяются непосредственно к HTML-элементу. Вместо того чтобы объявить все стили сразу, а затем применять их по ходу кода, вы стилизуете каждый элемент отдельно.

Пример:

<p style="color:olive;font-size:24px;">HTML Styles with CSS</p>

Посмотреть демо

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

Фиксирование шрифтов на странице с помощью таблицы стилей

Как вставить CSS  в HTML - встроенная стилизация

Этот метод, позволяющий осуществить подключение CSS к HTML подразумевает, что вы добавляете весь необходимый код стилизации одним большим фрагментом. Это позволяет стилизовать любой элемент на странице. Подобный подход можно реализовать путем встраивания CSS-кода с помощью <style> в заголовочную часть страницы. Например, поместите приведенный ниже код в раздел <head> HTML-документа:

<style>
    body {
        background-color: darkslategrey;
        color: azure;
        font-size: 1.1em;
    }
    h1 {
        color: coral;
    }
    #intro {
        font-size: 1.3em;
    }
    .colorful {
        color: orange;
    }
</style>

Примерно так будет выглядеть код HTML страницы:

<!DOCTYPE html>
<html>
    <head>
        <title>My Example</title>
        <style>
            body {
                background-color: darkslategrey;
                color: azure;
                font-size: 1.1em;
            }
            h1 {
                color: coral;
            }
            #intro {
                font-size: 1.3em;
            }
            .colorful {
                color: orange;
            }
        </style>
    </head>
    <body>
        <h1>Встроенная стилизация</h1>
        <p id="intro">Позволяет вам определять стили сразу для всей страницы.</p>
        <p class="colorful">Этот абзац оформлен при помощи класса.</p>
    </body>
</html>
Каскадные таблицы стилей (преимущества и недостатки)

Посмотреть демо

Привязка CSS  к HTML - внешние стили

Внешние стили – это один из самых распространенных способов подключения стилей CSS.

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

Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом <link> с указанием атрибутов href и rel="stylesheet":

<!DOCTYPE html>
<html>
    <head>
        <title>Пример</title>
        <link rel="stylesheet" href="/css/tutorial/example.css">
    </head>
    <body>
        <h1>Встроенная стилизация</h1>
        <p id="intro">Позволяет вам определять стили сразу для всей страницы.</p>
        <p class="colorful">Этот абзац оформлен при помощи класса.</p>
    </body>
</html>

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

Посмотреть демо

Использование классов и идентификаторов для назначения стилей

Подключение CSS файла к HTML или импорт стилей

Также можно использовать CSS-правило @import, чтобы импортировать внешние таблицы стилей. Для этого воспользуйтесь тегом <style>. Здесь будет уместен любой из следующих синтаксисов:

<style>
    @import "imported_style_sheet.css";
    @import url("imported_style_sheet.css");
</style>

Здесь используются те же стили, что и в предыдущих примерах, но импортированные с помощью @import:

<!DOCTYPE html>
<html>
    <head>
        <title>Пример</title>
        <style>
            @import "/css/tutorial/example.css";
        </style>
    </head>
    <body>
        <h1>Встроенная стилизация</h1>
        <p id="intro">Позволяет вам определять стили сразу для всей страницы.</p>
        <p class="colorful">Этот абзац оформлен при помощи класса.</p>
    </body>
</html>

Посмотреть демо

Учтите, что данный метод подключения шрифтов CSS может негативно сказываться на производительности сайта, поэтому рекомендуется использовать <link>.

Однако правило @import можно использовать внутри самого внешнего файла таблиц стилей для встраивания одного кода CSS в другой, не влияя на производительность.

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