Главная » Создание сайта, раскрутка сайта

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

как встроить css стили в Html код

Встраивание небольших CSS-стилей

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

Как встроить небольшой CSS-файл в код страницы?

Обычно CSS стили в HTML коде вызываются следующим образом:

<link rel='stylesheet' id='идентификатор' href="путь" type='text/css' media='all' />

И это правильный способ вызова CSS-стилей. Однако, если стиль CSS имеет небольшой размер, то можно встроить его код непосредственно в HTML код страницы. Это убьет необходимость запрашивать файл, содержимое которого весьма уютно может расположиться в HTML-коде страницы. Естественно, тут нужно понимать, что излишне увеличивать код страницы путем загона в него больших по объему файлов стилей, не есть очень хорошо. А чтобы код страницы не сильно увеличивался, можно дополнительно сжать HTML-код страницы. А для <встраивания CSS-стилей в код, Вам необходимо вставить код CSS файла между тэгами:

<style>…</style>

Вот и вся наука. Кстати, небольшие файлы CSS можно получить сжатием CSS-стилей.

Как встроить CSS-файлы в CMS WordPress?

Некоторые сложности могут возникнуть при попытке встроить CSS-стили на сайте под руководством CMS WordPress. В основном Вам придется встраивать CSS файлы каких-либо плагинов. Для этого, первым делом Вам необходимо выяснить где вызываются данные стили(в head, body, footer или в другом месте). Для этого просто покопайтесь в HTML коде сайта(Ctrl+U в помощь). Когда выясните это, необходимо найти место, где данный стиль добавляется в данный участок. Для этого, обычно, используется команда add_action:

add_action ('wp_', 'CustomFunction');

В зависимости от участка кода, первый аргумент может принимать значение либо wp_head, либо wp_footer, либо что-то другое. Поиск необходимо производить в php-файлах плагина, а так же в файле functions.php, который расположен в корне Вашей темы. Когда найдете место вызова, действуйте по ситуации. Самый легкий способ — отменить вызов данного CSS-файла и встроить его содержимое в один из файлов темы(header.php, footer.php, archive.php и другие).

Встраивание CSS-стилей, расположенных на других ресурсах

Если на Вашем сайте вызываются CSS стили с других ресурсов, например, стили шрифтов от Google, то лучше будет, если Вы перенесёте их в свой каталог. Вызывать файл из своей директории много проще, чем ждать ответа от другого ресурса. Для этого просто откройте код вызываемого стиля, скопируйте его и создайте аналогичный файл css. После этого Вам необходимо загрузить данный файл в директорию сайта и поменять URL-адрес вызываемого стиля.

Удачи!

Добавить комментарий

Ваш комментарий появится после модерации.