HTML - Понимание href, ссылки и базовых тегов

Question

Меня часто путают с атрибутом href, тегом ссылки и базовым тегом.Я не уверен, как правильно связать файл CSS, чтобы файл можно было переместить в подпапку и по-прежнему работать (пример позже), поэтому я пошел дальше и выяснил, как работает href при указании местоположения.

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

localhost/index.php (which redirects to localhost/home/index.php)
localhost/home/
localhost/zune/
localhost/school/
localhost/aeac/

И, как правило, макет папки будет выглядеть примерно так:

localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/

Продолжаем, скажем, у меня есть файл localhost/aeac/test/index.html и у меня есть 4 ссылки для тестирования.Я обнаружил, что

<a href="/"> will link to "localhost/"
<a href="./"> will link to "localhost/aeac/test/" (the directory the file is in.)
<a href="../"> will link to "localhost/aeac/" (the directory above the file.)
<a href="about.html">will link to "localhost/aeac/test/about.html" (the directory the file is in.)

Теперь, когда я понимаю href, мне нужно понять, как правильно связать CSS.

Представьте, что каталог сайта выглядит так:

localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/

и прямо в папке /aeac/ у меня есть index.html.Файл имеет тег ссылки, который выглядит следующим образом:

<link rel="stylesheet" href="stylesheets/main.css" />

Так что это хорошо работает, main - это в основном структура / тема сайта и включается в каждый файл.Проблема возникает, когда я должен сделать подпапку.Теперь у нас есть localhost/aeac/users/*username*/index.html.Сайт по-прежнему использует main.css, но ссылка больше не работает, потому что там нет папки stylesheets.

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

Answer 1

с тем, что вы узнали о href, просто объедините эти знания о навигации с вашим окончательным подходом:

Итак, если у вас есть это:
localhost / aeac /
localhost / aeac / images /
localhost / aeac / stylesheets /
localhost / aeac / scripts /
localhost / aeac / users /

и вы находитесь в localhost / aeac / users / index.html вы просто идете одинвверх (../, чтобы войти в aeac), а затем перейдите на:

.. / stylesheets / style.css

Надеюсь, это поможет

Answer 2

Вы можете использовать: /stylesheet/main.css

или ../../stylesheet/main.css

Независимо от того, как называется папка "user", ../ .. всегда будет возвращаться на 2 папки назад:

/ aeac / пользователей / user1 / index.html /aeac/users/user2/index.html

.. / .. / таблица стилей всегда попадет в / aeac / stylesheet

Answer 3

Я полагаю, вы хотите это:

<link rel="stylesheet" href="/aeac/stylesheets/main.css" />

Это начинается с /, поэтому он всегда будет перемещаться вверх от корня, независимо от того, где находится ваша страница (то есть на /aeac/index.html или на /aeac/users/foo/index.html). Теперь, если у вас есть контроль над тегом в каждой копии index.html (что вы, вероятно, делаете), вы также можете перемещаться вверх с .. до ../../stylesheets/main.css, но навигация от корня, вероятно, проще.

Answer 4

Вы можете иметь абсолютный путь к таблице стилей, используя / в качестве основы

<link rel="stylesheet" href="/aeac/stylesheets/main.css" />