Что такое CSS и как добавить стили на страницу?

Что такое CSS и как добавить стили на страницу?
Содержание:
  1. Что такое CSS?
  2. Как добавить CSS на страницу?
  3. @import
  4. Динамическое добавление стилей
  5. Стили по умолчанию
  6. Комментарии

В этой статье мы познакомимся с CSS, рассмотрим зачем он нужен, как его подключить к веб-странице, что такое @import, и где находятся стили по умолчанию.

Что такое CSS?

CSS (Cascading Style Sheets, каскадные таблицы стилей) – это язык для описания внешнего вида HTML-документа. Кроме HTML, CSS может использоваться для оформления и других документов, написанных на языке разметки. Например, таких как: XML, SVG и так далее.

CSS имеет простой синтаксис и состоит из списка правил, в которых прописываются то, как будет выглядеть тот или иной элемент на странице. С помощью CSS мы можем:

  • стилизовать текст, списки, ссылки, элементы форм и так далее;
  • применять пользовательские шрифты к странице;
  • задавать стили для блоков, внутри которых находится контент;
  • устанавливать положение элементов относительно друг друга на странице;
  • создавать анимации, переходы и многое другое.

CSS был разработан Консорциумом World Wide Web (W3C) в 1996 году для того, чтобы оформление веб-страницы можно было создавать без изменения структуры и содержимого документа.

Но, изначально это осуществлялось посредством тегов HTML: <font>, <center> и так далее. Но поскольку сайты становились всё более сложными, то их использование приводило к загромождению кода и он становился менее читаемым. Чтобы уйти от этого было принято решение: вывести представление из стандарта HTML и передать его CSS.

В результате, сейчас, для создания веб-страниц используется два языка: HTML и CSS (а точнее три, ещё JavaScript, но его лучше изучать после CSS). При этом, эти языки предназначены для разных целей. HTML отвечает за структуру и содержание документа, а CSS – за его оформление.

Хорошо, представим, что у нас есть веб-страница, написанная на HTML и CSS. Теперь мы хотим увидеть как она будет выглядеть на экране. Чтобы это сделать нам нужен соотвествующий инструмент, в данном случае это браузер. Теперь подумайте, что нужно сделать браузеру, чтобы нарисовать её нам на экране. Да, так сразу и не скажешь, так как это довольно сложная задача. Чтобы её решить, браузер разбивает эту задачу на отдельные процессы и выполняет их последовательно друг за другом. Одним из них является объединение HTML и CSS, и формирование на их основе так называемого дерева рендеринга. После его создания, браузер уже на основании этого дерева начинает расставлять элементы на странице и отрисовывать их.

Critical Rendering Path или как создается веб-страница в браузере

CSS можно добавить в HTML-документ разными способами. В большинстве случаев CSS-код пишут в отдельных файлах, которые затем подключают к необходимым страницам с помощью тега <link>:

HTML
<!-- /assets/css/main.css – это путь к CSS-файлу -->
<link rel="stylesheet" href="/assets/css/main.css">

Таким образом, мы можем подключить один CSS-файл ко всем страницам. Теперь, чтобы изменить стили на этих страницах, нам достаточно будет их просто прописать в этом файле. Этот способ подключения CSS называют внешним, а сам файл с раширением .cssвнешним файлом стилей.

Такие сайты, где стили располагаются в отдельных файлах, намного проще создавать и поддерживать. Так как всё оформление находится в одном месте.

Подключать таким образом файлы стилей можно не только со своего хоста, но и с удалённых серверов. Пример подключения стилей Bootstrap с CDN jsDelivr:

HTML
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Подключение файла стилей обычно осуществляют в разделе <head>. Это нужно для того, чтобы браузер выводил контент на страницу, отрендеренный уже с учётом стилей. Если же сделать это наоборот, то есть расположить стили после содержимого страницы, то вы сначала увидите её содержимое без стилей, а затем их применение. Этот процесс будет виден пользователю и сопровождаться мельканиями на экране. Поэтому стили так обычно не подключают.

Если вы хотите максимально ускорить загрузку страницы, то можете поступить следующим образом:

  • в <head> оставить стили, необходимые только для оформления первого экрана сайта;
  • все остальные стили подключить в конце страницы, перед закрывающим тегом <body>.

Что это даст? Это позволит пользователю максимально быстро увидеть запрашиваему страницу и начать с ней знакомиться. Остальные стили в этом случае будут применены только после парсинга браузером всего содержимого страницы. Но, разделить таким способом стили для веб-разработчика не такая уж простая задача и тем более затем всё это поддерживать. Обычно такое разделение используют, если это действительно нужно и даёт какой-то ощутимый прирост в скорости загрузки сайта.

Другой способ добавить CSS, это вставить его непосредственно в документ. Выполняется это с помощью тега <style>:

HTML
<style>
h1 {
  color: green;
}
</style>

Такие стили называют внутренними, потому что они действуют только в пределах этой страницы.

Кроме этого, добавить стили можно непосредственно к элементу. Осуществляется это с помощью атрибута style:

HTML
<p style="color: red; text-align: center;">...</p>

В этом примере мы установили стили только для этого конкретного элемента. В данном случае: красный цвет шрифта и выравнивание текста по центру.

Такие стили называют инлайновыми (inline) или встроенными.

Вообще, встраивать стили непосредственно в HTML-документ не является хорошей практикой. Рекомендуется весь код, необходимый для оформления страницы, содержать в одном или нескольких CSS-файлах. А в HTML иметь только <link> для подключения CSS.

@import

Кроме описанных выше способов, вставлять CSS-код можно ещё с помощью директивы @import. Она доступна для использования в тегах <style> и CSS-файлах:

CSS
<style>
  @import "reboot.css";
  @import "forms.css";

  /* остальной CSS-код */
</style>

С помощью @import мы можем импортировать стили из других CSS-файлов. При этом распологать @import следует в самом начале, до остального CSS-кода. В другом месте эти директивы будут просто проигнорированы:

CSS
@import "reboot.css";
@import "forms.css";

/* остальной CSS-код */

URL-адрес CSS-файла можно указывать как в виде строки, так и с помощью функции url():

HTML
@import "reboot.css";
@import url("forms.css");

В @import можно указать различные условия, при выполнении которых стили из импортируемых файлов должны применяться:

CSS
@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:

JavaScript
const linkElem = document.createElement('link');
linkElem.href= 'app.css';
linkElem.rel = 'stylesheet';
document.head.append(linkElem);

Если нужно их вставить непосредственно в документ:

JavaScript
const styleElem = document.createElement('style');
styleElem.textContent= 'body { background-color: green; }';
document.head.append(styleElem);

Стили по умолчанию

Стили по умолчанию (default styles) – это набор правил, которые хранятся внутри браузера и используются для базового оформления элементов.

Например, если мы создадим HTML-страницу без CSS и откроем её в браузере, то она уже будет каким-то определённым образом оформлена.

В данном случае, её оформление будет определяться только стилями, прописанными в самом браузере.

На этом скриншоте показаны стили, которые браузер Chrome имеет по умолчанию (user agent stylesheet) для оформления элемента <h1>. Надпись «user agent stylesheet» дословно переводится как «таблица стилей пользовательского агента». При этом пользовательским агентом в данном случае является браузер Chrome. Выше таблицы стилей браузера расположены стили h1 { color: green; }, которые мы добавили на страницу с помощью CSS.

При этом каждый браузер имеет свои собственные стили по умолчанию. Таким образом, в разных браузерах внешний вид одной и той же HTML-странице может немного отличаться. Чтобы этого не было, веб-разработчики перед тем как перейти к написанию собственных стилей, их сначала сбрасывают или нормализуют.

Сброс применяется когда нужно обнулить все стили. Для этого используют reset.css. Нормализация сейчас более популярна и она затрагивает только те стили, которые отличаются друг от друга в разных браузерах. Нормализация заключается к приведении отличающихся стилей к одному виду. Скачать CSS-файл для нормализации стилей можно на сайте normalize.css.

Как переопределить стили по умолчанию? Для этого нужно просто написать собственные стили. Например, ссылки по умолчанию имеют синий цвет и выделяются подчёркиванием. Чтобы это изменить, нам нужно для <a> задать новые значения для свойств color и text-decoration.

Комментарии: 0