HTML — Понимание href и тегов link и base

Я часто путаюсь с атрибутом href, тегом ссылки и тегом base. Я не уверен, как правильно связать файл 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.

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


person NessDan    schedule 12.10.2010    source источник


Ответы (4)


Я верю, что вы хотите этого:

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

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

person bcherry    schedule 12.10.2010

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

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

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

../таблицы стилей/style.css

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

person Semyazas    schedule 12.10.2010

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

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

person Chris B    schedule 12.10.2010

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

или ../../таблица стилей/main.css

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

/aeac/users/user1/index.html /aeac/users/user2/index.html

../../stylesheet всегда попадет в /aeac/stylesheet

person Retired_User    schedule 12.10.2010