Как указать путь к файлу style.css?
Kinomonster (Папка 1 уровня) [ assets (Папка 2 уровня) [ css
7 ответов
Пробовал через ctrl и u открывать исходный код в браузере и нажимать на css файл? Если файл таким образом открывается, значит хорошо и файл подключён, просто через ctrl и f5 нужно обновить страницу в браузере или открыть в приватном режиме браузера.
Заархивируй папку с проектом киномонстр и выложи куда-нибудь, я у себя посмотрю, есть ли ошибка или исходный код скачай и запусти, там 100% все работает. Исходный код можно скачать, где видео уроки, справа сверху есть вкладка Файлы, разорхивировать только не забудь все файлы из архива исходного кода.
index.html должен находится в корне папки kinomonster, поэтому стили у тебя не работают. index.html или index.php всегда должен быть в корне, потому что по умолчанию всегда открывается этот файл, он индексный. Если хочешь, чтобы с твоей структурой папок и файлов работали стили, нужно так подключать:
Относительные и абсолютные пути в HTML и PHP
Относительные и абсолютные пути в HTML (веб-адреса)
Абсолютные пути
В данном случае всё очень просто, мы указываем прямой путь к файлу, лежащему на другом домене. Возможно указание сокращенного пути через использование двух слешей в начале без явного указания http или https и сервер сам подставит нужный протокол (расширение) согласно настройке сервера. Важно заметить, что данный вид является необходимым для перехода между сайтами:
http://google.comОтносительно корня сайта
В данном случае браузер берёт домен сайта и к нему подставляет указанную ссылку. В данном случае получится http://school-php.com/css/style.css. В случае с http, https не надо париться, так как будет браться в том виде, в котором сейчас открыта страница, то есть при http будет http. Так же очень удобно для переноса некого функционала между разными сайтами или же перенос сайта с одного домена на другой не трогая код. Приоритетный способ указания путей к страницам и файлам.
Относительно данной страницы
Менее востребованный способ, так как он берёт нынешнюю страницу и к её пути дописывает новый адрес. То есть находясь на странице http://school-php.com/trick ссылка на файл будет иметь вид: http://school-php.com/trick/css/style.css . Практически невозможен в использовании в случаях, когда мы используем ЧПУ.
Использование тега base
В данном случае вместо стандартной подставки домена к относительному пути будет подставлен путь из base. То есть мы получим файл, располагающийся:
http://school-php.com/tricks/css/style.cssОтносительные и абсолютные пути в PHP
Всё очень просто, работая в файловой системе мы будем придерживаться правил работы с путями в PHP. Если же мы передаём команду в браузер клиента, то тут используются пути HTML. То есть в следующем примере у нас из PHP передаётся путь браузеру с страницей, на которую ему надо перейти. То, что переход между страницами браузер осуществил можно увидеть в адресной строке:
header("Location: /page2.php");Итого, открываем страницу page1.php, а в адресной строке записано page2.php, а всё дело в том, что браузер СНАЧАЛА загрузил страницу page1.php, а потом получил информацию с переадресацией и ЗАГРУЗИЛ страницу вторую page2.php. В данном случае переадресация была на стороне клиента (браузера), а значит используем правила относящиеся к HTML (веб-адрес).
Абсолютный путь в PHP
Абсолютный путь в PHP воспринимается как абсолютный путь от директории, в которой установлен веб-сервер. Данный путь можно получить из:
$_SERVER['DOCUMENT_ROOT']Если взять в пример этот сервер, то его путь: /home/school/public_html/schoolphp , значит для того, чтобы указать полный путь к фотографии ‘/photo/img1.jpg’, необходимо указать такой путь:
getimagesize('/home/school/public_html/schoolphp/photo/img1.jpg'); getimagesize($_SERVER['DOCUMENT_ROOT'].'/photo/img1.jpg');Хочу заметить, что сайт может располагаться в поддиректории, то есть для:
http://school-php.com/forum/может быть крайне затруднительно использование DOCUMENT_ROOT, ведь форум (как внешний скрипт) ещё не знает где будет размещаться на сайте. Справиться с данной проблемой можно несколькими способами, давайте парочку перечислим:
1) Создать в виде поддомена страницу.
2) Прописать абсолютный путь в конфиге в config.php , то есть:
Core::$ROOT = $_SERVER['DOCUMENT_ROOT']; getimagesize(Core::$ROOT.'/photo/img1.jpg'); // используем абсолютный путь, который можно модифицироватьТеперь можно без угрызения совести привязать весь сайт на Core::$ROOT, и если случайным образом необходимо поменять путь до подключаемого файла, то можно переопределить значение Core::$ROOT;
Относительно стартового файла (базового)
Во многих системах index.php есть единая точка входа, то есть открывается index.php, а уже из него подключаются другие файлы.
include './modules/allpages.php';В данном случае будет подключен allpages.php по пути: /home/school/public_html/schoolphp/modules/allpages.php . Данный способ удобен тем, что если прописать include в файле allpages.php: include ‘./modules/module/page.php’;, то искать его будет всё равно относительно точки входа, а именно index.php:
/home/school/public_html/schoolphp/modules/module/page.phpДостаточно удобная реализация учесть, что мы чётко знаем структуру нашего приложения относительно корневого index.php. Даже если мы вызываем любой другой файл, а не index.php, то работать пути будут абсолютно точно так же. Вызвали мы dir.php , значит относительно файла dir.php и будут браться пути!
Что ещё надо знать
Я не мог не напомнить тем, кто забыл или же подсказать тем, кто не знает, что можно вернуться не только вглубь директорий, но и вверх (на папки назад), и синтаксис их достаточно прост:
include '../file.php';В данном случае будет браться директория данного файла или корневого index.php, и возвращаться на 1 папку назад, там же будет искаться файл ‘file.php’.
DOCUMENT_ROOT не единственный вариант получить корневой путь сайта. Давайте взглянем в мануал: «Директория корня документов, в которой выполняется текущий скрипт, в точности та, которая указана в конфигурационном файле сервера.» . Это значит, что в случаях, если в конфигурационном файле будет некорректно написан путь, то весь сайт не будет работать. Что делать? Можно писать админам и владельцам хостинга, на котором размещается сервер с надеждой, что они исправят свои недочёты. Или искать стабильную альтернативу, которой является __DIR__ , это абсолютный путь к данному файлу, где запущен код файлу. Допустим файл конфигурации у нас лежит в папке config, и чтобы используя __DIR__ не возвращаться каждый раз на 1 папку наверх записью __DIR__’/../’ мы смело можем __DIR__ записать в свою переменную, примером ниже я записал в свойство класса (урок №24, кто не дошел используйте обычную переменную):
Core::$ROOT = __DIR__; // Или же для старых PHP - dirname(__FILE__);Так же хотелось напомнить кое-что интересное и важное. Согласно безопасности веб-сервер запрещает перемещение по директориям выше корня сайта. То есть сайт находится по следующему пути: /home/school/public_html/schoolphp , но прочитать содержание папок /home, или /home/school будет недоступно.
Может ли PHP пользоваться путями HTML ? Да, в специальных функциях, для примера:
file_get_contets('http://school-php.com');Практика
В своих старых проектах я использовал DOCUMENT_ROOT, сейчас перешел на относительные index.php пути ‘./папка/файл’.
Zend2, продукт от разработчиков PHP, один из самых сложных FrameWork на данный момент использует так же относительные пути с отличным синтаксисом от моего, то есть ‘папка/файл’.
Форум IPB.3 использует dirname(__FILE__).
Выводы:
1) В HTML используем пути относительно корня сайта, а именно ‘/file.php’ (Строка начинается со слэша).
2) в PHP используем относительно корневого файла ‘./file.php’ (Строка начинается с точки и слэша), альтернативой может быть использование свойства, инициализированного в корне: __DIR__;
3) Переадресация header использует пути из HTML. PHP работая с файловой системой (подключение файлов, сохранение и редактирование изображений) — с PHP путями.
Школа программирования © 2012-2023
imbalance_hero | inpost@list.ru , admin@school-php.com
account on phpforum | youtube channel
HTML Путь к файлу
Путь к файлу описывает расположение файла в структуре папок веб сайта.
Примеры пути к файлам
| Путь | Описание |
|---|---|
| picture.jpg находится в той же папке, что и текущая страница | |
| picture.jpg находится в папке images в текущей папке | |
 |
picture.jpg находится в папке images в корне текущего веб-сайта |
 |
picture.jpg находится в папке на один уровень выше текущей папки |
Пути к HTML файлам
Путь к файлу описывает расположение файла в структуре папок вебсайта.
Пути к файлам используются при связывании с внешними файлами, например:
- Веб-страницы
- Изображения
- Таблицы стилей
- JavaScripts
Абсолютные пути к файлам
Абсолютный путь к файлу — это полный URL адрес файла:
Пример
Теги и атрибуты src и alt описаны в главе HTML Изображения.
Относительные пути к файлам
Относительный путь к файлу указывает на файл относительно текущей страницы.
В этом примере путь к файлу указывает на файл в папке images, расположенной в корне текущего веб-сайт:
Пример
В этом примере путь к файлу указывает на файл в папке images находятся в текущей папке:
Пример
В этом примере путь к файлу указывает на файл в папке images находятся в папке на один уровень выше текущей папки:
Пример
Практика HTML лучше всего
Рекомендуется использовать относительные пути к файлам (если возможно).
При использовании относительных путей к файлам, веб-страницы не будут привязаны к вашему текущему базовому URL-адрес. Все ссылки будут работать на вашем собственном компьютере (localhost), а также на вашем текущем общественном домене и вашем будущем публичном домене.
Мы только что запустили
SchoolsW3 видео
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
Schoolsw3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Импорт стилей
Если вы хоть раз подключали таблицы стилей через директиву @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; > Мысли и советы
Несколько советов, которые позволят сделать ваш код лучше на этом этапе:
- Не указывайте расширение файлов без явной на то нужды, это делает структуру более приятной для чтения.
- Создайте один файл, в котором будут объявлены все директивы импорта файлов в проекте.