Как подключить стайл css
Перейти к содержимому

Как подключить стайл css

  • автор:

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

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

Внешняя таблица стилей

Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.

Пример 1. Подключение внешних стилей

    Стили  

Заголовок

Текст

Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

Содержимое файла style.css показано в примере 2.

Пример 2. Содержимое файла style.css

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

Внутренняя таблица стилей

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

Пример 3. Использование

Стили h1

Заголовок

Текст

В данном примере задан стиль элемента , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со .

Вид заголовка, оформленного с помощью стилей

Рис. 1. Вид заголовка, оформленного с помощью стилей

Встроенный стиль

Встроенный стиль является по существу расширением для одиночного элемента, используемого на текущей веб-странице. Для определения стиля элемента к нему добавляется атрибут style , а значением атрибута выступает набор стилевых правил (пример 4).

Пример 4. Использование атрибута style

В данном примере стиль элемента

меняется с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 2).

Использование встроенного стиля для изменения вида текста

Рис. 2. Использование встроенного стиля для изменения вида текста

Встроенные стили не рекомендуется применять на сайте, поскольку это усложняет редактирование стилей и нарушает принцип разделения кода и оформления.

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

Пример 5. Сочетание разных методов

Подключение стиля h1

Заголовок 1

Заголовок 2

В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка — зелёный цвет через элемент (рис. 3).

Результат применения стилей

Рис. 3. Результат применения стилей

Импорт CSS

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

@import url("имя файла"); @import "имя файла";

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.

Пример 6. Импорт CSS

Импорт @import url(‘https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic’); h1

Заголовок 1

Заголовок 2

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент (пример 7).

Пример 7. Импорт в файле style.css

@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic'); h1

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

wp_enqueue_style() │ WP 2.6.0

Правильно добавляет файл CSS стилей. Регистрирует файл стилей, если он еще не был зарегистрирован. Если файл стилей был предварительно зарегистрирован через wp_register_style(), то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle . Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь. Добавленный в очередь файл стилей выводится в части документа. С версии 3.3 можно вызывать в середине документа. В этом случае файл будет выведен в подвале, перед тегом (где вызывается wp_footer() ).

  • wp_enqueue_scripts — для внешней части сайта.
  • admin_enqueue_scripts — для админ-панели.
  • login_enqueue_scripts — для страницы входа (wp-login.php).
  • Используйте wp_style_add_data(), чтобы добавить условия подключения стилей.
  • Используйте wp_add_inline_style(), чтобы вставить в документ сами CSS стили, а не файл стилей.

Ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет стили.

Работает на основе: WP_Dependencies::add() , WP_Dependencies::enqueue()
Основа для: wp_enqueue_code_editor()

Возвращает

null . Ничего не возвращает.

Использование

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle(строка) (обязательный) Название файла стилей (идентификатор). Строка в нижнем регистре. Если строка содержит знак вопроса (?): styleaculous?v=1.2 , то предшествующая часть будет названием стиля, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого стиля. $src(строка) УРЛ к файлу стилей. Например, http://example.com/css/style.css . Не нужно указывать путь жестко, используйте функции: plugins_url() (для плагинов) и get_template_directory_uri() (для тем). Внешние домены можно указывать с неявным протоколом //example.com/css/style.css .
По умолчанию: » $deps(массив) Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array() $ver(строка/логический) Строка определяющая версию стилей. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1 . Если не указать (установлено false), будет использована версия WordPress. Если установить null, то никакая версия не будет установлена.
По умолчанию: false $media(строка/логический) Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть: all , screen , handheld , print или all (max-width:480px) . Полный список смотрите здесь.
По умолчанию: ‘all’

Примеры

#1 Подключение через событие

В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие ‘ wp_enqueue_scripts ‘.

// правильный способ подключить стили и скрипты add_action( 'wp_enqueue_scripts', 'theme_name_scripts' ); // add_action('wp_print_styles', 'theme_name_scripts'); // можно использовать этот хук он более поздний function theme_name_scripts() < wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); >

Вставляем этот код в файл темы functions.php или в плагин. В любое место, но до функции wp_head() которая вызывается в header.php

#2 Загрузка стилей на странице настроек плагина
add_action( 'admin_menu', 'my_plugin_admin_menu' ); function my_plugin_admin_menu() < // регистрируем страницу плагина $page = add_submenu_page( 'edit.php', __( 'My Plugin', 'myPlugin' ), __( 'My Plugin', 'myPlugin' ), 'administrator', __FILE__, 'my_plugin_manage_menu' ); // используя идентификатор страницы плагина подключаемся к нужному событию add_action( 'load-'. $page, 'my_plugin_admin_styles' ); >// Эта функция будет вызвана только на странице настроек плагина, function my_plugin_admin_styles() < wp_enqueue_style( 'myPluginStylesheet', plugins_url( 'stylesheet.css', __FILE__ ) ); >// Страница настроек function my_plugin_manage_menu() < // код страницы настроек >

Добавить свой пример

Заметки

Использует глобальную переменную $wp_styles , которая содержит экземпляр класса WP_Styles. Использует методы WP_Styles::add(), WP_Styles::enqueue() .

Заметки

  • Смотрите: WP_Dependencies::add()
  • Смотрите: WP_Dependencies::enqueue()

Список изменений

С версии 2.6.0 Введена.

Код wp_enqueue_style() wp enqueue style WP 6.4.3

function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) < _wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle ); $wp_styles = wp_styles(); if ( $src ) < $_handle = explode( '?', $handle ); $wp_styles->add( $_handle[0], $src, $deps, $ver, $media ); > $wp_styles->enqueue( $handle ); >

Cвязанные функции

styles (стили include files)
  • wp_add_inline_style()
  • wp_dequeue_style()
  • wp_deregister_style()
  • wp_get_custom_css()
  • wp_register_style()
  • wp_style_add_data()
  • wp_style_is()
Регистрация script и style
  • add_editor_style()
  • wp_add_inline_script()
  • wp_dequeue_script()
  • wp_deregister_script()
  • wp_enqueue_code_editor()
  • wp_enqueue_editor()
  • wp_enqueue_media()
  • wp_enqueue_script()
  • wp_localize_jquery_ui_datepicker()
  • wp_localize_script()
  • wp_register_script()
  • wp_resource_hints()
  • wp_script_add_data()
  • wp_script_is()
Основные
  • bloginfo()
  • calendar_week_mod()
  • get_archives_link()
  • get_bloginfo()
  • get_calendar()
  • get_current_blog_id()
  • get_footer()
  • get_header()
  • get_search_form()
  • get_sidebar()
  • get_template_part()
  • is_404()
  • is_active_sidebar()
  • is_admin()
  • is_archive()
  • is_attachment()
  • is_author()
  • is_category()
  • is_comment_feed()
  • is_date()
  • is_day()
  • is_dynamic_sidebar()
  • is_embed()
  • is_feed()
  • is_front_page()
  • is_home()
  • is_month()
  • is_page_template()
  • is_paged()
  • is_post_type_archive()
  • is_preview()
  • is_search()
  • is_single()
  • is_singular()
  • is_ssl()
  • is_sticky()
  • is_tag()
  • is_tax()
  • is_year()
  • language_attributes()
  • post_type_archive_title()
  • register_sidebar()
  • setup_postdata()
  • the_archive_description()
  • the_archive_title()
  • wp_footer()
  • wp_get_archives()
  • wp_get_document_title()
  • wp_head()
  • wp_login_form()
  • wp_login_url()
  • wp_loginout()
  • wp_logout_url()
  • wp_lostpassword_url()
  • wp_register()
  • wp_title()

26 комментариев
Полезные 3 Все
Нужно подключить css-файл, не находящийся в папке темы. Пробовал и условный путь и абсолютный:

wp_enqueue_style ('advent', get_stylesheet_directory_uri (). '//сайт.ru/Adventure/css/advent.css');

Но в итоге все равно идет обращение к папке тем:

https://сайт.ru/wp-content/themes/baddim-blank//сайт.ru/Adventure/css/advent.css?ver=6.3.1

Как подключить файл стилей style.css?

у тебя страница находится уже в папке assets, а путь к style.css задан с указанием assets как вложенной папки относительно текущей. нужно переместить html-страницу на уровень выше или изменить путь к файлу style.css

3 years ago

Один ответ

JavaScript — полный курс с нуля до результата!

Полный курс Python для начинающих – с нуля до специалиста

Photoshop для начинающих Веб-дизайнеров

Adobe Illustrator с нуля – основы дизайна для начинающих

Программирование на Java с нуля

React JS для начинающих + Redux

Django 3 — Full Stack разработка веб сайтов на Python

WordPress – с нуля до Профи!

Основы HTML/CSS — верстка сайтов с нуля

WordPress – Быстрый старт!

Шаблонизатор Pug/jade — современный ускоритель для HTML

ВЕБ-разработчик — с нуля до результата!

Посадка верстки и создание тем на CMS WordPress

Настройка рекламы Яндекс Директ — продвижение сайтов

Настройка рекламы Google — продвижение сайтов

Настройка таргетированной рекламы и продвижение ВКонтакте

Настройка рекламы и продвижение Facebook+Instagram

МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram

Полный курс Android + Java для начинающих

Kotlin — Быстрый старт!

Программирование на C# – от новичка до специалиста

Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript

SQL и PostgreSQL для начинающих

Создание административной панели на React JS + PHP

Практический JavaScript — продвинутый уровень

GIT. Управление версиями для разработчиков

Программирование на Java с нуля — Уровень 2 + 10 собеседований

Полный курс Python – продвинутый уровень + SQL

Figma для Веб дизайнера — с нуля до профессионала

React с нуля для начинающих + 3 проекта в портфолио!

Веб Дизайн в Figma. Основы Ui Ux дизайна на практике

Алгоритмы и структуры данных от А до Я

Adobe Illustrator с нуля – Уровень 2 – продвинутая практика

Android разработчик – профессиональный уровень (Kotlin)

Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit

Шаблоны проектирования на Python

Как подключить JavaScript и стили CSS к HTML документу

При работе с HTML, стилями или JavaScript, особенно, если речь идёт о большом проекте, настоятельно рекомендую держать файлы со стилями (.css и другие) и твой код (.js и другие) в разных папках. JavaScript отдельно, каскадные стили отдельно. Отдельную папку рекомендую создать и для HTML-файла.

Чтобы присоединить стили к HTML, пропиши следующую строку внутри тэга :

Если ты всё-таки решил ходить по лезвию ножа и держишь.css- и.js-файлы в одной папке со HTML, то код будет следующим:

Если работаешь с шаблонами или темами Bootstrap, то просто размещаем ссылку на тему:

Для присоединения js-файла к HTML нужно просто указать путь к файлу.

Если же js-файл лежит в одной папке с HTML-файлом, код будет такой:

При работе с jQuery, внутри тега указываем ссылку на нужную нам библиотеку:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *