Почему файл css не подключается к html
Перейти к содержимому

Почему файл css не подключается к html

  • автор:

Тег link

Тег link подключает CSS файлы на HTML страницу. Кроме того, link подключает некоторые другие файлы, например, фавикон. (Фавикон — это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).

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

Как подключить CSS в HTML5: . В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.

Тег link не требует закрывающего тега.

Атрибуты

Атрибут Описание
href Путь к подключаемому файлу.
media Тип устройства, для которого следует подключить файл.
Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen ) или только для маленьких экранов: для мобильников или планшетов (значение handheld ).
Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже.
rel Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение stylesheet указывает на то, что подключается CSS файл, значение alternate используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
charset Кодировка подключаемого файла. В настоящее время стандартом является utf-8 .
type Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon.

Значения атрибута media

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение Описание
all Все устройства.
screen Экран монитора.
handheld Телефоны, смартфоны, устройства с маленьким экраном.
braille Устройства, основанные на системе Брайля, предназначены для слепых людей.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
print Принтеры.
projection Проекторы.
tty Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения.
tty Телевизоры, которые умеют открывать web страницы (бывает и такое).

Значение по умолчанию: all .

Пример

Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:

Это заголовок тайтл Это основное содержимое страницы.

Смотрите также

  • тег style ,
    который добавляет CSS прямо на странице
  • атрибут style , который задает стили конкретному тегу

Как подключить CSS файл к WordPress

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

Для начала приведу основные способы подключения СSS к HTML файлу. То-есть сначала рассмотрим обычное, стандартное подключение стилей к сайту, это пригодится в дальнейшем.

Чтобы подключить CSS файл к обычной HTML странице нужно:

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

прописать следующий код:

Тут все довольно просто, css — это папка, куда помещен файл стилей, reset.css — сам подключаемый файл.

Или так, с указанием полного адреса URL нахождения стилевого файла:

Данным кодом можно подключить любой css файл, даже если он размещен на стороннем ресурсе.

Второй способ подключения CSS к HTML странице

Можно подключить CSS файл через @import . В данном случае подключаемый файл импортируется в основной файл CSS, дополняя его.

Для этого нужно в самом начале style.css (см. название своего файла) прописать следующий код:

@import "css/reset.css";

Или для стороннего файла стилей, с указанием полного адреса:

@import url("/css/reset.css");

Как видно из примера, в код подключения просто вставляется ссылка на сторонний ресурс.

Из личного опыта

Данный способ подключения не очень хорош, т.к пока не подгрузится сторонний CSS файл, ваши стили сайта будут подгружаться дольше обычного или подгрузятя частично.

В этой статье я не буду затрагивать такие моменты как «точечное подключение» или компановка стилей в HTML файле. А лучше перейду к главному.

Как подключить CSS файл к WordPress

Подключать файлы CSS к WordPress можно и вышепреведенными способами, но правильнее будет последовать следующим примерам.

Первый способ подключить CSS файл к WordPress

Открываем файл header.php и сразу перед закрывающим тегом нужно прописать такой код:

/css/reset.css" />

Это то-же самое, что и в верхнем примере, только написано на языке PHP. Нужно только правильно прописать путь к папке и файлу /css/reset.css .

Но самым правильным способом считается подключение CSS файлов к сайту на WordPress является нижеприведенный пример.

Регистрация CSS файлов в WordPress

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

Добавляем в файл functions.php этот код:

function my_style_load() < $theme_uri = get_template_directory_uri(); wp_register_style('my_theme_style', $theme_uri.'/css/reset.css', false, '0.1'); wp_enqueue_style('my_theme_style'); >add_action('wp_enqueue_scripts', 'my_style_load');

Ну и рассмотрим, что нужно минимально знать и учитывать при подключении CSS файла к WordPress используя данную функцию.

function my_style_load() — my_style_load — название функции, можете придумать свое, пишется без пробелов в нижнем регистре букв и без знака — (тире). Обратите внимание, что встречается оно в коде два раза.

$theme_uri = get_template_directory_uri(); — get_template_directory_uri(); значит, что подключаемый файл должен обязательно находится внутри папки вашей темы, в директории шаблона.

wp_register_style(‘my_theme_style’, $theme_uri.’/css/reset.css’, false, ‘0.1’); — my_theme_style идентификатор стилей, может быть произвольным.

/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.

Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза.

Если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все способы указанные в статье. Выбирайте какой нравится!

Возможно вам будет интересно
  • Подключение скрипта к WordPress
  • Подключение и отключение скриптов и стилей на отдельной странице, записи WordPress
  • Системные шрифты, подключение шрифтов к сайту

— Как вам статья «Как на WordPress подключить CSS файл?» Если что, пишите.

Лучший способ отблагодарить автора

Похожие по Тегам статьи

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

Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо…

В данной статье мы разберемся, что такое дочерний шаблон WordPress, для чего он нужен…

Разделы сайта
  • HTML СSS в примерах
  • Безопасность WordPress
  • Внешний вид и Функционал WP
  • Выбираем домен и хостинг
  • Оптимизация и продвижение
  • Перенос сайта из HTML в WordPress
  • Плагины WordPress
  • Сборник интересных скриптов
  • Сервисы и программы
  • Шаблоны WordPress
  • Юзаем Bootstrap

Почему файл css не подключается к html

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Помог: 3 раз(а)

Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.

Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Цитата:

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

Импорт стилей

Если вы хоть раз подключали таблицы стилей через директиву @import в CSS, то эта часть главы полностью изменит ваше представление о ней, так как в Less все куда интереснее и гибче. Если же вы никогда ранее не делали импорт стилей в CSS, то добро пожаловать в этот удивительный мир, позволяющий разбивать таблицы стилей на несколько частей.

Импорт стилей в CSS

В CSS директива @import позволяет импортировать стили из других таблиц. Проще говоря, можно разбить одну большую таблицу стилей на несколько маленьких. Делается это следующим образом:

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

Самым важным минусом выступает тот факт, что такие подключения должны предшествовать другим стилям в таблице, где подключается дополнительный файл. То есть сделать так, как написано в коде ниже нельзя:

.class < background-color: #fff; > @import "имя файла"; 

Разрешено делать только так:

@import "имя файла"; .class < background-color: #fff; > 

Причём имя файла должно быть с расширением .css .

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

Импорт стилей в Less

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

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

Тем более, вы можете комбинировать ключевые слова для достижения определённых целей. Например, если нужно использовать css-файл как less-файл, но при этом не выводить его содержимого.

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

.one < background-color: #000; > @import "имя файла"; .two < background-color: #fff; > 

Во вторых, расширение файла может быть любым, главное — чтобы в нём содержался валидный CSS- или Less-синтаксис. Но здесь начинают действовать специфичные для Less правила:

Файлы с расширением .css :

Если при подключении файла с помощью директивы @import будет указано расширение .css , то такой файл подключается как обычный css-файл и не обрабатывается компилятором.

Файлы без расширения:

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

Файлы с другими расширениями:

Если при подключении файла с помощью директивы @import у него будет указано расширение, но оно не соответствует ни .css ни .less , то такой файл подключается как less-файл и будет обрабатываться компилятором.

Все это вкупе с доступными опциями для директивы @import , которые будут рассматриваться позднее, даёт вам возможность построения гибкой и хорошо поддерживаемой структуры проекта. Про структуру проекта я буду рассказывать намного позднее, так как без полного понимания доступных возможностей Less она вам не пригодится.

Пример 2.6.1

Рассмотрим пример, который отображает всю суть импорта стилей в Less. Для этого создадим в директории import/ следующие файлы: _duckduckgo.less , _mail.css , _yandex.less и _yahoo.less . В этих файлах объявим одноимённые с названиями файлов классы и укажем с помощью свойства color официальный цвет сервиса. Кроме них нам понадобится файл _styles.less , к которому будут подключаться эти файлы.

Для наглядности я предлагаю посмотреть на карту директории этого примера:

2.6.1/ ├── import/ │ ├── _duckduckgo.less │ ├── _mail.css │ ├── _yahoo.less │ └── _yandex.less └── _styles.less 

Теперь я предлагаю взглянуть на содержимое файла _styles.less и то, что получилось после его компиляции.

Содержимое файла _styles.less :

@import "import/_mail.css"; @import "import/_duckduckgo"; .canonium < color: #53599a; > @import "import/_yahoo"; @import "import/_yandex"; 

Как не сложно заметить, подключение таблиц стилей происходит до и после содержимого файла, что не допускается в CSS, но разрешено в Less.

Содержимое файла styles.css , полученное после компиляции:

@import "import/_mail.css"; .duckduckgo < color: #de5833; > .canonium < color: #53599a; > .yahoo < color: #400191; > .yandex < color: #ffcc00; > 

Во время компиляции происходит конкатенация содержимого файлов. А файлы с расширением .css подключаются стандартным для CSS способом.

Опции импорта

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

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

Опция (less)

С помощью этого ключевого слова можно попросить компилятор рассматривать подключаемый файл как less-файл, то есть производить его компиляцию, а также конкатенацию с тем файлом, где происходит его подключение.

Может пригодиться при использовании файлов, которые имеют не стандартное расширение, например, .variables или .mixin .

Пример 2.6.2

Необходимо подключить файл _mail.css :

.mail < color: #168de2; > .mail .orange < color: #ffa930; > 

Если подключить этот файл как раньше, с помощью импорта без ключевых слов ( @import «import/_mail.css»; ), то файл будет подключён как обычный CSS-файл в файле styles.css .

@import "import/_mail.css"; .canonium < color: #53599a; > 

Но нам необходимо провести конкатенацию этих двух файлов. Для этого требуется указать ключевое слово less . Тогда файл styles.css приобретает необходимый нам вид:

.canonium < color: #53599a; > .mail < color: #168de2; > .mail .orange < color: #ffa930; > 

Опция (css)

Полная противоположность опции (less) . На этот раз мы можем заставить любой файл подключаться стандартным для CSS способом.

Пример 2.6.3

На этот раз стоит задача подключения файла стандартным для CSS способом. Без лишних слов. Просто посмотрите на код:

@import (css) "import/_duckduckgo.less"; .canonium < color: #53599a; > 
@import "import/_duckduckgo.less"; .canonium < color: #53599a; > 

Опция (reference)

Замечательная опция, позволяющая использовать less-файлы, но не выводить их содержимое до тех пор, пока оно не будет явно вызвано. Пригодится в тех случаях, когда нужно использовать определённый селектор, а остальное содержимое файла не нужно. Такое поведение положительно сказывается на работе с библиотеками, которые имеют избыточный функционал в виде множества селекторов, а вам необходимы лишь некоторые из них.

Пример 2.6.4

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

Немного изменим файл _yandex.less , чтобы можно было продемонстрировать работу более наглядно:

.yandex < color: #ffcc00; > .yandex-topbar < background-color: #e4491b; > 

В файле _styles.less добавим ключевое слово (reference) :

.canonium < color: #53599a; > @import (reference) "import/_yandex"; 

Если сейчас скомпилировать этот файл, то кроме селектора canonium в нём ничего не будет. Необходимо добавить явный вызов селектора.

Добавим явный вызов в файл _styles.less , в виде псевдокласса :extend() . Делается это следующим образом:

.canonium < color: #53599a; > @import (reference) "import/_yandex"; .topbar < &:extend(.yandex-topbar); > 

Теперь, после компиляции в получившемся CSS-файле у класса .topbar появятся все свойства класса .yandex-topbar , объявленного в импортируемом файле. При этом класс .yandex в этот файл добавлен не будет.

.canonium < color: #53599a; > .topbar < background-color: #e4491b; > 

Опция (inline)

Задача этой опции сказать компилятору, что разработчик ожидает на выходе подключённый файл, но без обработки компилятором. Такая опция может пригодиться при подключении CSS-файла, в котором присутствуют конструкции, которые в Less необходимо преобразовывать. Например, используемое в IE свойство filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); , требующее экранирования в Less.

Пример 2.6.5

Представим, что перед нами стоит задача разработки проекта, использующего фильтры. Пусть к такому проекту подключается какая-нибудь библиотека, которая существует в виде CSS-файла. Тогда у нас могут возникнуть некоторые проблемы.

Добавим в файл _mail.css класс, содержащий свойство filter :

.mail < color: #168de2; filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); > 

Помимо этого, добавим ключевое слово (less) в файле _styles.less , чтобы CSS-файл склеивался с less-файлом:

@import (less) "import/_mail.css"; .canonium < color: #53599a; > 

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

Именно сейчас и пригодится рассматриваемая опция (inline) . Дописываем её в директиву @import через запятую:

@import (less, inline) "import/_mail.css"; 

Повторяем процесс компиляции, и на этот раз все будет хорошо. Компилятор после сложного трудового дня немного отдохнёт, а мы насладимся его работой:

.mail < color: #168de2; filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); > .canonium < color: #53599a; > 

Опция (once) и (multiple)

Я не зря объединил эти две опции. Они представляют собой абсолютную дуальную пару, то есть они полностью противоположны по значению.

Ключевое слово (once) запрещает многократное подключение файла с таким именем. Эта опция включена в Less изначально, и прописывать её в директиве @import не нужно.

Ключевое слово (multiple) разрешает многократное подключение файла с таким именем.

Пример 2.6.6

Попробуем провести эксперимент. Сначала объявим директиву @import без опций, потом запретим многократное подключение с помощью (once) , а затем разрешим, используя (multiple) . После этого обговорим полученные результаты. Приступаем.

Объявим директиву @import без опций:

@import "import/_yahoo"; .canonium < color: #53599a; > @import "import/_yahoo"; 

В полученном результате файл подключился ровно один раз, так как все директивы импорта файлов содержат опцию (once) по умолчанию.

.yahoo < color: #400191; > .canonium < color: #53599a; > 

Объявим директиву @import с опцией (once):

@import (once) "import/_yandex"; .canonium < color: #53599a; > @import (once) "import/_yandex"; 

И снова тот же результат. Очевидно, что опция (once) все таки установлена по умолчанию, а её повторное применение ничего не меняет.

.yandex < color: #ffcc00; > .canonium < color: #53599a; > 

Объявим директиву @import с опцией (multiple):

@import (multiple) "import/_duckduckgo"; .canonium < color: #53599a; > @import (multiple) "import/_duckduckgo"; 

На этот раз скомпилированный CSS-код содержит селектор .duckduckgo дважды, а это значит, что опция (multiple) сработала.

.duckduckgo < color: #de5833; > .canonium < color: #53599a; > .duckduckgo < color: #de5833; > 

Опция (optional)

Эта опция позволяет продолжать компиляцию, если подключаемый файл не найден. Если не использовать это ключевое слово, то при отсутствии файла компилятор будет бросаться в вас ошибкой FileError . Скорее всего, такой функционал пригодится тем, кто строит фреймворк, основанный на ограниченном количестве модулей и компонентов, которые можно подключать и отключать.

Пример 2.6.7

В этом примере есть обязательный для компиляции файл _duckduckgo.less , а также два необязательных: _yahoo.less и _yandex.less . Один из этих файлов будет удалён.

@import "import/_duckduckgo"; @import (optional) "import/_yahoo"; @import (optional) "import/_yandex"; .canonium < color: #53599a; > 

Пусть будет отсутствовать файл _yahoo.less . Тогда после компиляции получится следующий CSS-код:

.duckduckgo < color: #de5833; > .yandex < color: #ffcc00; > .canonium < color: #53599a; > 

Мысли и советы

Несколько советов, которые позволят сделать ваш код лучше на этом этапе:

  • Не указывайте расширение файлов без явной на то нужды, это делает структуру более приятной для чтения.
  • Создайте один файл, в котором будут объявлены все директивы импорта файлов в проекте.

results matching » «

No results matching » «

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

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