Добавление стилей CSS на веб-страницу

Вернуться назад

Добавление стилей CSS на веб-страницу

Подраздел: #CSS

5мин

2 августа 2022

119

Добавление стилей непосредственно к элементу HTML

Добавить стиль к элементу HTML можно с помощью атрибута style. В этом случае стиль будет влиять только на этот элемент. Данный способ при верстке сайта лучше не использовать.

<p style="color: blue; font-size: 20px;">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
<p>Lorem ipsum dolor sit amet. <span style="background: yellow;">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Добавление стилей в HTML документ

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

<script>
    $(document).ready(function(){
  $("head").append($("<style type='text/css'>.blue-20 {color: blue; font-size: 20px; } .bg-yellow { background: yellow; }"));
    });
</script>

<head>
    ...
    <!-- Добавление стилей в HTML документ с помощью тега style -->
    <style type="text/css">
    <!-- Код CSS -->
    .blue-20 {
    color: blue;
    font-size: 20px;
    }
    .bg-yellow { 
    background: yellow; 
    }
    </style>
    ...
    </head>
    <body>
    ...
    <p class="blue-20">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
    <p>Lorem ipsum dolor sit amet. <span class="bg-yellow">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Добавление стилей с помощью внешних файлов CSS

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

<head>
    ...
    <!-- Подключение внешнего файла CSS -->
    <!-- Атрибут rel сообщает, что файл следует использовать по отношению к текущему документу как каскадную таблицу стилей. -->
    <!-- Атрибут type сообщает, что подключаемый файл содержит CSS -->
    <!-- Атрибут href хранит имя файла и путь к нему -->
    <link rel="stylesheet" type="text/css" href="samples.css">
    ...
    </head>
    <body>
    ...
    <p class="blue-20">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
    <p>Lorem ipsum dolor sit amet. <span class="bg-yellow">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

Данный способ подключения файлов стилей является предпочтительным, т.к. он обеспечивает загрузку файлов в том порядке, в каком они указаны в HTML-документе (в отличие от @import). Также данный способ увеличивает скорость загрузки веб-страницы, т.к. файлы CSS загружаются одновременно. Реализация сайта с помощью внешних файлов CSS облегчает редактирование стилей и изменения дизайна сайта. В завершение, можно прокомментировать пожелание компании Google, которая рекомендует размещать все стили в одном внешнем файле, что приведёт к ещё более быстрой загрузки сайта.

Добавление стилей с помощью @import

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

<head>
    ...
    <!-- Подключение файлов CSS с помощью @import -->
    <style>
    @import url("путь к файлу в виде url");
    @import "путь к файлу";
    </style>
    ...
    </head>
    <body>
    ...
    <p class="blue-20">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
    <p>Lorem ipsum dolor sit amet. <span class="bg-yellow">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

Динамическое подключение файлов CSS

Иногда бывают ситуации, когда необходимо динамически подключить файл CSS к веб-странице. Данный способ можно реализовать с помощью метода append библиотеки jQuery.

<!-- Атрибут media означает, что браузер будет использовать этот стиль только при отображении сайта на экране -->
    <script>
      $(document).ready(function(){
        $("head").append($("<link rel='stylesheet' href='samples.css' type='text/css' media='screen' />"));
        });
    </script>

Примечание: при использовании данного способа не забудьте подключить библиотеку jQuery к вашей веб-странице:

<script src=".../js/jquery.min.js"></script>

Динамическое добавление стилей в HTML документ

<script>
        $(document).ready(function(){
      $("head").append($("<style type='text/css'>.blue-20 {color: blue; font-size: 20px; } .bg-yellow { background: yellow; }</style>"));
        });
    </script>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавление стилей CSS на веб-страницу

Добавление стилей непосредственно к элементу HTML

Добавление стилей в HTML документ

Добавление стилей с помощью внешних файлов CSS

Добавление стилей с помощью @import

Динамическое подключение файлов CSS

Динамическое добавление стилей в HTML документ

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: