Подключение CSS к HTML
Есть 5 способов подключения CSS к HTML и 500 ошибок, которые возникнут, если неправильно подключить CSS – не рассчитать приоритеты или «задушить» нормальное распределение приоритетов инструкцией !important. Ниже мы расскажем про все варианты оформления сайта через подключение CSS, вкратце коснемся темы подключения шрифтов и расскажем, как избежать путаницы, если ваши таблицы стилей переопределяют друг друга.
Способы подключения CSS к HTML
Сначала вкратце рассмотрим подключение и способы доступа к элементам всеми способами, ниже дадим более детальную информацию с примерами:
- Внутри HTML, атрибутом style. В этом случае стиль применяется конкретно к элементу, которому вы это задали.
- Внутри HTML, с помощью тегов style. Если прописываете стиль, например, для <p>, то всему HTML документу (всем тегам p в нем) будет присвоен этот стиль.
- Отдельным файлом, селектор тега. В общем-то, отличий от предыдущего варианта здесь не так и много – вы просто прописываете файлу index CSS-файл, из которого можно брать стили. Так можно быстро подключить шрифты для всей страницы через Google Fonts, подключить шрифты от Гугла через теги style будет намного сложнее.
- Отдельным файлом, селекторы классов и идентификаторов. Более полезный инструмент, позволяет иметь несколько вариантов оформления на различные случаи жизни. Если еще подключить JavaScript, то можно менять варианты подключения и оформления на лету.
- Подключение внешних файлов. Если где-то лежит внешняя таблица, никто не мешает вам подключить ее на свою страницу. Подключать внешние таблицы – не самый безопасный вариант, но ниже мы расскажем, как это поправить.
Внутренние таблицы стилей
Итак, способы подключения, относящиеся ко внутренним таблицам, разбиты на 2 части: внутри HTML и в отдельном CSS. Если хотите обойтись без внешних файлов вовсе – этого можно достичь с помощью использования атрибутов style. Style можно прописать как отдельному элементу, так и всему html-документу. Первый случай:
<p style="font-size: 140%; color: #aa66dd">Пример текста</p>Здесь вы объявляете style внутри тега, после чего прописываете все необходимые параметры.
Для второго варианта нужно воспользоваться тегом head и прописать style внутри него:
<style> H1 { font-size: 140%; font-family: Arial, Helvetica, sans-serif; color: red; } </style>В этом случае описанный стиль будет применяться по всем H1 на странице (если у вас их по каким-то причинам больше 1).
Из всех методов подключения эти два – самые плохие. Дело в том, что у них очень высокий приоритет, и они будут перекрывать все другие стили, если у последних не прописан !important. Если у вас простой одностраничник – это может не сильно сказаться на верстке, но для более-менее крупного сайта отлавливание багов верстки при наличии внутренних стилей – настоящий ад, поэтому за прописывание style внутри HTML-страницы бьют по рукам на любой работе.
Внешние таблицы стилей
Общепринятый способ хранения (и подключения) верстки – в отдельных файлах с форматом .css. В этом случае в начале файла вам нужно подключить внешнюю таблицу тегом link:
<link rel="stylesheet" href="mysite.css">В href нужно указывать путь к файлу. Если таблица лежит в той же папке, что и html-файл, можете просто указать имя таблицы (файла). Если же стиль лежит в подпапке, вам нужно указать относительный путь, например:
href="css/style.css"Теперь – о разных способах доступа к элементу в вынесенных каскадных таблицах. Есть 2 варианта. Первый – это задание стиля всем экземплярам определенного тега, например:
p { padding-right: 30px; }Инструкция будет действовать на все теги p. Второй вариант – это доступ через классы и идентификаторы. В HTML-странице мы указываем какому-либо экземпляру класс и/или id, например:
<p class="colored">…</p>
<p id="intro">…</p>После чего меняем в css-файле отображение класса или идентификатора:
.colored { color: blue; }или
#intro { font-size: 1.2em; }По возможности пользуйтесь именно этими способами – они доставляют меньше всего проблем. При этом лучше пользоваться классами, чем id – код JavaScript часто работает с id, и может получиться так, что JS-скрипт изменит id элемента, к которому вы применяете стиль, и верстка поедет.
Импорт чужого CSS
Наконец, последний вариант – это импорт чужих таблиц стилей. Делается он так же, как и импорт ваших собственных таблиц, но вместо адреса у себя на хостинге вы должны указать полный URL-адрес, например:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">Код выше подключает css-файл фреймворка Bootstrap. Таким же образом можно подключать стили Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">Опасность заключается в том, что автор может изменить свой css-файл, и тогда у вас тоже отразятся эти изменения. Если вы берете стиль у какой-то крупной компании или стиль фреймворка, то они не изменятся никогда, можете не переживать. Если же вы «подрезаете» стиль у другого сайта – лучше скопировать себе .css-файл этого сайта и подключить его уже со своего хостинга, этим вы застрахуете себя от незапланированных изменений.
Приоритеты стилей
Итак, а теперь нужно рассказать про конфликты приоритетов. Предположим ситуацию, что у вас одновременно для тега p прописаны: стили в файле с другого сайта; стили в файле на вашем сайте; стили в <style> в head документа; стили в style самого p в документе. Что будет выбрано? Последний вариант. Система приоритетов основана на весе каждого объявления. Веса:
- Стиль прописан внутри тега (inline-метод): 1000 условных единиц.
- Стиль прописан в <style> или в другом файле, обращение по id: 100 условных единиц.
- Стиль прописан в <style> или в другом файле, обращение по class: 10 условных единиц.
- Стиль прописан в <style> или в другом файле, обращение по названию тэга (p, h1 и так далее): 1 условная единица.
Если селектор содержит в себе несколько указаний (определенный класс + определенный тэг, например), то веса складываются, класс + тэг = 10 + 1 = 11. Если браузеру нужно выбрать между несколькими стилями, он выбирает тот, у которого больше вес. Если 2 и больше стиля имеют одинаковый вес – выбирает тот, который был описан последним, то есть если у вас подключены 2 таблицы:
<link href="ссылка на другой сайт" rel="stylesheet>
<link href="ссылка на таблицу на вашем сайте" rel="stylesheet>и в обеих есть определение нужного браузеру стиля – он выберет таблицу на вашем сайте. Если же в одной таблице стилей есть 2 конфликтующих описания – будет выбрано то, что ниже.
Перекроить приоритеты может только !important. Можете считать его как +10 000 к весу. Проблема !important заключается в том, что если у вас есть несколько стилей с !important, то у них будет вес, например, 10 001 и 10 010, то есть они будут создавать новую систему весов над уже имеющейся. Поэтому: 1) если вам нужен один !important, чтобы исправить баг – дважды подумайте перед тем, как его использовать; 2) если вам нужно больше одного !important, чтобы исправить баги – вы точно что-то делаете не так.
Что почитать по теме
Подведем итоги
Тезисно:
- Подключить CSS к HTML можно внутри html, отдельным файлом у себя на хостинге, и отдельным файлом где-то в интернете.
- Не стоит прописывать стили CSS прямо внутри HTML – очень плохая практика, которая способна сломать верстку.
- Если вы берете css с какого-то другого сайта и боитесь, что владелец сайта может изменить свою таблицу стилей – лучше сделайте копию.
- У стилей есть веса, при конфликте стилей с одинаковыми весами используется тот, который прописан ниже по коду (потоку исполнения). Учитывайте это, когда подключаете несколько таблиц стилей.