Как подключить css файл к html
Атрибут 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 ? и у нас возникают сложности.
Сопутствующие статьи
Установка локального веб сервера на Windows — Open Server (OsPanel)
Хотите установить локальный веб сервер на Windows? Это статья поможет вам в этом!
Программа очень популярная и функциональная:
- Предоставляет Apache, Nginx
- Выбор любой версии php
- Консоль
- Разные модули
- PhpMyadmin и SQL manager
- php adminer
- и другие
Псевдоэлементы в CSS
Псведоэлементы в CSS это элемент своего родительского тега. Он не существует в HTML теле пока не укажем его в свойствах CSS!
С помощью псевдоэлемента можно вставить нужный объект в тело страницы, и его не будет в исходном коде, а только в отредеренном варианте браузера. Обычно используется для стилизации элементов