Что такое CSS и как добавить стили на страницу?
CSS (Cascading Style Sheets, каскадные таблицы стилей) – это язык для описания внешнего вида HTML-документа. Кроме HTML, CSS может использоваться для оформления и других документов, написанных на языке разметки. Например, таких как: XML, SVG и так далее.
CSS имеет простой синтаксис и состоит из списка правил , в которых прописываются то, как будет выглядеть тот или иной элемент на странице. С помощью CSS мы можем:
- стилизовать текст, списки, ссылки, элементы форм и так далее;
- применять пользовательские шрифты к странице;
- задавать стили для блоков, внутри которых находится контент;
- устанавливать положение элементов относительно друг друга на странице;
- создавать анимации, переходы и многое другое.
CSS был разработан Консорциумом World Wide Web (W3C) в 1996 году для того, чтобы оформление веб-страницы можно было создавать без изменения структуры и содержимого документа.
Но, изначально это осуществлялось посредством тегов HTML: , и так далее. Но поскольку сайты становились всё более сложными, то их использование приводило к загромождению кода и он становился менее читаемым. Чтобы уйти от этого было принято решение: вывести представление из стандарта HTML и передать его CSS .
В результате, сейчас, для создания веб-страниц используется два языка: HTML и CSS (а точнее три, ещё JavaScript, но его лучше изучать после CSS). При этом, эти языки предназначены для разных целей. HTML отвечает за структуру и содержание документа, а CSS – за его оформление .
Хорошо, представим, что у нас есть веб-страница, написанная на HTML и CSS. Теперь мы хотим увидеть как она будет выглядеть на экране. Чтобы это сделать нам нужен соотвествующий инструмент, в данном случае это браузер. Теперь подумайте, что нужно сделать браузеру, чтобы нарисовать её нам на экране. Да, так сразу и не скажешь, так как это довольно сложная задача. Чтобы её решить, браузер разбивает эту задачу на отдельные процессы и выполняет их последовательно друг за другом. Одним из них является объединение HTML и CSS, и формирование на их основе так называемого дерева рендеринга. После его создания, браузер уже на основании этого дерева начинает расставлять элементы на странице и отрисовывать их.
Как добавить CSS на страницу?
CSS можно добавить в HTML-документ разными способами. В большинстве случаев CSS-код пишут в отдельных файлах , которые затем подключают к необходимым страницам с помощью тега :
Таким образом, мы можем подключить один CSS-файл ко всем страницам. Теперь, чтобы изменить стили на этих страницах, нам достаточно будет их просто прописать в этом файле. Этот способ подключения CSS называют внешним , а сам файл с раширением .css – внешним файлом стилей .
Такие сайты, где стили располагаются в отдельных файлах, намного проще создавать и поддерживать. Так как всё оформление находится в одном месте.
Подключать таким образом файлы стилей можно не только со своего хоста, но и с удалённых серверов. Пример подключения стилей Bootstrap с CDN jsDelivr:
Подключение файла стилей обычно осуществляют в разделе . Это нужно для того, чтобы браузер выводил контент на страницу, отрендеренный уже с учётом стилей. Если же сделать это наоборот, то есть расположить стили после содержимого страницы, то вы сначала увидите её содержимое без стилей, а затем их применение. Этот процесс будет виден пользователю и сопровождаться мельканиями на экране. Поэтому стили так обычно не подключают.
Если вы хотите максимально ускорить загрузку страницы , то можете поступить следующим образом:
- в оставить стили, необходимые только для оформления первого экрана сайта;
- все остальные стили подключить в конце страницы, перед закрывающим тегом .
Что это даст? Это позволит пользователю максимально быстро увидеть запрашиваему страницу и начать с ней знакомиться. Остальные стили в этом случае будут применены только после парсинга браузером всего содержимого страницы. Но, разделить таким способом стили для веб-разработчика не такая уж простая задача и тем более затем всё это поддерживать. Обычно такое разделение используют, если это действительно нужно и даёт какой-то ощутимый прирост в скорости загрузки сайта.
Другой способ добавить CSS, это вставить его непосредственно в документ. Выполняется это с помощью тега :
Такие стили называют внутренними, потому что они действуют только в пределах этой страницы.
Кроме этого, добавить стили можно непосредственно к элементу. Осуществляется это с помощью атрибута style :
В этом примере мы установили стили только для этого конкретного элемента. В данном случае: красный цвет шрифта и выравнивание текста по центру.
Такие стили называют инлайновыми (inline) или встроенными.
Вообще, встраивать стили непосредственно в HTML-документ не является хорошей практикой. Рекомендуется весь код, необходимый для оформления страницы, содержать в одном или нескольких CSS-файлах. А в HTML иметь только для подключения CSS.
@import
Кроме описанных выше способов, вставлять CSS-код можно ещё с помощью директивы @import . Она доступна для использования в тегах и CSS-файлах:
С помощью @import мы можем импортировать стили из других CSS-файлов. При этом распологать @import следует в самом начале, до остального CSS-кода. В другом месте эти директивы будут просто проигнорированы:
@import "reboot.css"; @import "forms.css"; /* остальной CSS-код */URL-адрес CSS-файла можно указывать как в виде строки, так и с помощью функции url() :
@import "reboot.css"; @import url("forms.css");В @import можно указать различные условия, при выполнении которых стили из импортируемых файлов должны применяться:
@import url("mobile.css") (max-width: 1199.98px); @import url("desktop.css") (min-width: 1200px);В этом примере стили из mobile.css будут применяться только для устройств с небольшим экраном (ширина области просмотра которых меньше или равно 1998.98px ). В остальных случаях, будут браться стили из файла desktop.css .
Директивы @import работает очень просто. Браузер при их выполнении просто переходит по указанным URL и загружает стили, содержащиеся в них. Далее проверяет условия и смотрит нужно ли эти стили добавлять. После этого читает остальные правила в этом CSS-файле, и затем уже на основании всех этих стилей отрисовывает страницу.
В примере приведённом выше не смотря на наличие условий браузер всё равно загрузит два этих файла. Так как проверку на заданные условия он выполняет в конце, после их чтения. При этом каждый @import – это всегда дополнительный запрос на сервер. Вообще использовать @import в CSS не рекомендуется, так как это может замедлить загрузку страницы.
Но как же тогда разрабатывать стили? Не удобно же все стили создавать в одном CSS-файле. Да, это конечно так. Поэтому веб-разработчики прибегают к различным инструментам, а точнее к сборщикам веб-проектов. Наиболее популярными решениями сейчас являются Webpack, Parcel JS, Gulp и другие. Эти инструменты позволяют не только собрать все стили в один файл, но также выполняют очень много других задач, необходимых при веб-разработке. Поэтому сейчас практически нет веб-проектов, которые не собирались бы с помощью сборщиков.
Динамическое добавление стилей
Иногда бывают ситуации, когда необходимо динамически подключить CSS-файл CSS к веб-странице. Осуществляется это с помощью JavaScript:
const linkElem = document.createElement('link'); linkElem.href= 'app.css'; linkElem.rel = 'stylesheet'; document.head.append(linkElem);Если нужно их вставить непосредственно в документ:
const styleElem = document.createElement('style'); styleElem.textContent= 'body { background-color: green; }'; document.head.append(styleElem);Стили по умолчанию
Стили по умолчанию (default styles) – это набор правил, которые хранятся внутри браузера и используются для базового оформления элементов.
Например, если мы создадим HTML-страницу без CSS и откроем её в браузере, то она уже будет каким-то определённым образом оформлена.
В данном случае, её оформление будет определяться только стилями, прописанными в самом браузере.
На этом скриншоте показаны стили, которые браузер Chrome имеет по умолчанию (user agent stylesheet) для оформления элемента . Надпись «user agent stylesheet» дословно переводится как «таблица стилей пользовательского агента». При этом пользовательским агентом в данном случае является браузер Chrome. Выше таблицы стилей браузера расположены стили h1 { color: green; } , которые мы добавили на страницу с помощью CSS.
При этом каждый браузер имеет свои собственные стили по умолчанию. Таким образом, в разных браузерах внешний вид одной и той же HTML-странице может немного отличаться. Чтобы этого не было, веб-разработчики перед тем как перейти к написанию собственных стилей, их сначала сбрасывают или нормализуют.
Сброс применяется когда нужно обнулить все стили. Для этого используют reset.css. Нормализация сейчас более популярна и она затрагивает только те стили, которые отличаются друг от друга в разных браузерах. Нормализация заключается к приведении отличающихся стилей к одному виду. Скачать CSS-файл для нормализации стилей можно на сайте normalize.css.
Как переопределить стили по умолчанию? Для этого нужно просто написать собственные стили. Например, ссылки по умолчанию имеют синий цвет и выделяются подчёркиванием. Чтобы это изменить, нам нужно для задать новые значения для свойств color и text-decoration .