Вы можете создавать страницы по-разному: встраивать стили непосредственно в HTML, создавать с помощью JavaScript или объединяться из одного файла. Разработчики рекомендуют использовать второй метод, то есть записывать стили в отдельный файл, а затем включать их с помощью тега ссылки.
Встроить стили глобально:
<head> <style> .block {...} ... </style></head>
Встроить с помощью style:
<body> <div style="font-size: 20px; color: white; background-color: black;"></div></body>
Импортировать стили из внешних файлов:
@import "style/header.css"@import "style/footer.css"
Подключить внешние таблицы стилей:
<head> <link href="css/style.css" rel="stylesheet"></head>
Почему разработчики выбирают внешние стили
Чаще всего в веб-разработке можно натолкнуться на проекты с буклетами внешних стилей. Дело в том, что подобный стиль дизайна подходит не только лишь для создания сайтов или веб-приложений с нуля, но и для их дальнейшей поддержки. Он упрощает руководство правилами CSS, полученный каскадный мониторинг и общую чистоту паролей.
Инлайн стили далеко не гибки, как внешний CSS. Их сложнее эксплуатировать, и их фактически нереально обойти. Внутренние стили делают HTML раздутым и тяжелым. Работоспособность CSS не такая просторная, как при работе с внешними стилями. Для того чтобы осознать всю глубину задачи, давайте сапоставим два стиля стилизации.
Поддержка кода.
Когда вы включаете внешний файл стиля, CSS разделен от разметки, следовательно, его проще поддерживать. Включение внешних стилей тоже дает возможность вам применять разработчиков для ускорения процесса разработки и облегчения чтения кода. А в случае если вы работаете над проектом с другими людьми, данный метод позволяет каждому быстро определиться в стиле.
При употреблении внешнего CSS вы видите структуру собственного дизайна. Вы осознаете, в каком месте и какие свойства присваиваются элементу вы легко сможете их поменять. Вы понимаете логику? Какие свойства игнорируются и почему? Поймите каскад «управление наследием».
В случае со стилями интерьера дело обстоит несколько иначе. В случае если вы пишете стили внутри атрибута стиля, HTML становится тяжело читать. Пропадает логическая конструкция и стили размываются по всему коду. Следование стилям становится трудным, а поиск раздела, в котором необходимо изменить правило CSS, занимает немало времени. И чем масштабнее проект, тем труднее управлять стайлингом.
Если весь CSS заключен в тег <style>, логическая структура сохраняется и HTML остается легко читаемым. Однако и этот способ не всегда удобен. Представьте на секунду, что вы попали в кармический мир Эрла. Если вы работаете с одним файлом стилей, вам нужно изменить стили только в одном месте. Но при использовании встроенных стилей вам нужно изменить размер заголовков каждого HTML-файла.
Дополнительная функциональность
Внешние стили позволяют гибко пользовать ложные классы и ложные элементы.
Внешний CSS также позволяет получить доступ к настраиваемым свойствам. Этот стиль позволяет создавать переменные и использовать их в гибких стилях управления. Например, быстро менять цвета.
Переменные имеет все цвета, которые используются на сайте. Если заказчик хочет использовать другой оттенок зеленого, разработчику не нужно искать и изменять каждое правило стиля на этот цвет. Он просто поменяет цвет в одной переменной.
Вы также можете добавлять ложные классы при помощи глобальных стилей, но это не всегда удобно. Например, у вас есть две ссылки на странице, которые должны установить определенные интерактивные состояния: hover и :activ. Остальные ссылки должны быть отформатированы иначе. В этом случае неудобно писать псевдоклассы в теге <style>, так как все ссылки будут иметь одинаковое интерактивное состояние. И вы не сможете отменить его с помощью атрибута style, потому что псевдоклассы классы и псевдоэлементы не работают в CSS.
Есть еще одна проблема. Правила стиля атрибута стиля отменяют правила из метки <style>. Например, вы хотите, чтобы ссылки становились красными при наведении курсора? Определите глобальные стили a:hover. Наведите указатель мыши на {color : red}.
Переопределение стилей
Стили внешних файлов CSS легко игнорировать, поскольку каждый селектор имеет собственное уникальное значение. Класс предпочитает селектор меток, а идентификатор предпочитает класс.
Внутренние стили имеют высокий приоритет и не могут игнорироваться внешними селекторами идентификаторов CSS, классов или тегов. Один способ сделать это – добавить !impotrant.
Скорость загрузки и трафик
Внешние стили отображаются с задержкой при загрузке первой страницы. Браузеру требуется время, чтобы загрузить файл стиля. Такое поведение особенно заметно в случае медленного интернет-соединения. Чтобы стили отобразились на страницах, потребуется несколько сотен миллисекунд или даже секунд.
Однако браузер сохраняет файлы CSS, поэтому вам не нужно загружать стили второй раз, чтобы перезагрузить его. Это сэкономит трафик: увеличит скорость отрисовки страницы.
Внутренний стиль присутствует непосредственно в HTML-коде, поэтому с каждым правилом размер файла будет увеличиваться. При этом увеличивается объем потребляемого трафика и снижается скорость загрузки страницы. Эта проблема может быть не такой уж серьезной на небольших сайтах. Но в наиболее крупных интернет-магазинах или порталах, к примеру, при медленном интернет-соединении, разница будет очевидна: это грозит потерей посетителей.
Ускорение отрисовки страниц
Мы уже упоминали, как работает браузер. При подключении к внешнему CSS он должен отправить дополнительный запрос на сервер для загрузки файла стиля. Но со встроенными стилями в этом нет необходимости. Они уже доступны, поскольку находятся непосредственно в файле HTML, поэтому стили будут отображаться быстрее при первой загрузке.
Эта утилита работает с небольшими нестилизованными страницами, но ее также можно использовать на больших ресурсах для повышения производительности CSS. С помощью встроенных стилей вы можете ускорить доставку той части вашего сайта, которую пользователи должны увидеть в первую очередь
Почтовые рассылки
Еще один способ стилизации интерьера – создание email рассылок по электронной почте. По соображениям безопасности почтовые службы блокируют загрузку внешних ресурсов, включая файлы стилей. Например, этим принципам следуют и другие почтовые клиенты Яндекс.Почта, Yahoo, Gmail. Поэтому разработчикам ничего не остается, кроме как использовать встроенный CSS.
Тестирование и работа со сторонними программами
Стили интерьера также могут быть полезны, если стиль определяется с помощью стороннего программного обеспечения или CMS. Многие разработчики пользуются внутренним стилем для поиска и исправления некоторых ошибок. Из-за каскада правила внутри атрибута style переопределяют другие стили, поэтому вы сможете временно писать правила CSS в разметке и просматривать отображение элементов. Но этот метод лучше использовать с осторожностью и по возможности вносить изменения во внешний файл стиля как можно скорее.
