Как подключить css файл к html
Подключить файл стилей css к html можно добавив одинарный тег <link> внутри тега <head>
<link href="styles/style.css" rel="stylesheet">
Атрибут href указывает путь к файлу стилей. Путь может быть относительный или абсолютный.
Атрибут rel указывает браузеру, что подключаем именно файл стилей.
Относительный путь
Это путь к файлу относительно текущего каталога (папки/директории).
Он разделяется на два варианта
- Хождение по файловой структуре сервера/хостнига
- Хождение по url домена
Пример хождение по файловой структуре сервера.
P.S. "styles/" в конце слеш указывает что это каталог (папка/директория), а не файл
Пример использования 1:
структура проекта:
- index.html - styles/ - -- main.css
Для подключения в файле index.html введем путь href="styles/main.css"
Пример использования 2:
структура проекта:
- index.html - main.css
для подключения в файле index.html введем путь href="main.css"
Пример использования 3:
структура проекта:
- public_html/ - styles/ - -- main.css - web/ - -- index.html
для подключения в файле index.html введем путь href="../styles/main.css"
Объяснение: ../ это мы выходим на 1 уровень наверх. то есть из папки web в папку public_html
Пример хождение по url домена
Данный вариант работает только на сервере/хостнге!
для общей картины представим что у нас на сервере/хостинге структура папок такая:
- www/
- -- public_html/
- -- asset/
- -- css/
- -- main.css
- -- js/
- index.html
Корень домена привязан к папке www/public_html/, значит устанавливаем обязательно в начале первый слеш /, чтобы браузер понимал, что мы указываем на корень домена и от туда идем по папкам.
Для подключения в файле index.html введем путь href="/asset/css/main.css"
Объяснение: если мы не укажем наш первый слеш /, то браузер будет думать что мы от вызываемого файла указываем путь, от папки где index.html
Такой путь подключения самый рекомендуемый. мы не привязываемся к домену, не привязываемся к корневым папкам сервера и не привязываемся к папке где находится вызываемый html.
Это поможет вот в таком примере:
- www/ - -- public_html/ - -- asset/ - -- css/ - -- main.css - -- js/ - -- category/ - -- index.html - -- php.html - -- css.html - -- post/ - -- simple-page-php.html - -- link-css.html - index.html
Во всех файлах можно указать один единый путь! href="/asset/css/main.css", потому что мы идем от корня домена, а не от папки где вызвали наш html файл.
P.S. для файлов php аналогично все работает!
Абсолютный путь
Он так же разделяется на два варианта
- Хождение по файловой структуре сервера/хостнига
- Хождение по url домена
Для указания абсолютного файлового пути к файлу стилей мы укажем полный путь от корня сервера! узнать его путь можно у тех.поддержки сервера.
P.S. крайне не рекомендуемый способ, потому что вы покажете всем посетителям путь вашего сервера. А хитрые умельцы смогут воспользоваться в своих интересах!
Пример:
href="/var/www/html/my-super-site.ru/www/public_html/asset/css/main.css"
Для указания абсолютного пути по url домена, мы просто точно указываем адрес сайта с доменом.
Пример:
href="http://my-super-site.ru/asset/css/main.css"
P.S. почему так не делают или делают на автоматизированных скриптах? Ответ прост, а вдруг домен изменили? или http заменили на https ? и у нас возникают сложности.
