Как таблицы стилей помогают создавать сайты
Объясняем, что такое CSS.
CSS (Cascading Style Sheets) — это язык, который описывает, как HTML-документы отображаются на экране пользователя. Первым коммерческим браузером, который читал и использовал CSS, стал Internet Explorer 3 в 1996 году. CSS применяют разработчики, чтобы настроить индивидуальный стиль страницы.
Рассказываем, что нужно знать, чтобы сделать сайт непохожим на другие.
Зачем нужен CSS
HTML помогает сформировать структуру веб-документов — текст, таблицы, гиперссылки. CSS — создает разметку, оформление и стиль.
Элементы форматирования веб-документа есть и в HTML. С его помощью, например, можно создать заголовки и абзацы к тексту. Но для выбора шрифтов, цвета текста, расположения блоков или междустрочных интервалов нужно прописывать много тегов, что усложняет код.
Разделение функций HTML и CSS упростило обслуживание сайтов и просмотр страниц и в десктопной, и в мобильной версиях. Язык CSS универсален, поэтому его теги не нужно настраивать под браузер. Также он кэшируется после первого запуска и запоминается браузером. Это позволяет быстрее загружать страницы.
Чтобы подключить CSS к HTML, используют три способа:
- CSS-код вносят в тег элемента с помощью атрибута style. Он применяется к любым тегам.
- Стили веб-документа прописывают внутри контейнера head. Он предназначен для хранения элементов страницы. Например, атрибутов base и title, которые отвечают за задание характеристик текста по умолчанию (цвет, шрифт) и заголовок документа. Интеграция CSS также происходит с помощью атрибута style. При таком подключении CSS будет выполнять изменения только на этой странице.
- CSS-код сохраняется в отдельном текстовом файле с расширением .css. Он подключается к HTML с помощью тега link и свойства href, чтобы установить расположение файла. Это самый распространенный способ. Если файл подключен к нескольким страницам сайта, то вносить в них правки можно одновременно.
Основные принципы работы CSS
CSS — это набор правил, которые задают визуальное отображение элемента в документе. Их обычно делят на две группы:
- Селекторы — метки, которые обозначают, какую часть HTML-кода изменяют.
- Блоки объявлений — свойства, которые определяют, как будет выглядеть элемент на экране.
К селекторам можно применять неограниченное число блоков объявлений. Например, абзац в CSS обозначается тегом p. Чтобы задать абзацу серый фон, используем свойство background и его значение #ccc (отвечает за этот цвет). Здесь тег абзаца будет селектором, а свойство и его значение — блоком объявлений.
Чтобы работать с CSS, нужно знать свойства языка. Например, чтобы изменить цвет текста, используют свойство color, а размер шрифта определяет свойство font-size.
Типы селекторов
В CSS — несколько десятков типов селекторов.
Селектор тега меняет все элементы указанного типа на каждой странице сайта. Его используют, например, для оформления заголовков.
Можно создать универсальный селектор, который совершает действие над всеми объектами сайта. Например, изменить начертание текста для всей страницы.
Селекторы класса могут обозначать произвольную часть сайта и используются, чтобы изменять ее стиль. Например, чтобы форматировать заданную браузером ширину текста, можно создать класс для нескольких абзацев со смещением вправо. Почти все селекторы в CSS — селекторы класса.
Селекторы-идентификаторы (ID) позволяют менять параметры одного указанного элемента. Идентификатор (ID) — это название элемента сайта, которое не должно повторяться на странице. Например, его можно присвоить тегу footer, который отвечает за «подвал» сайта.
Правила каскадирования и наследования
В CSS не нужно задавать параметры для всех элементов — есть правила наследования. Некоторые свойства элементы получают от элементов-предков. Свойства, определяющие внешний вид текста (color, font), наследуются. Свойства, которые форматируют блоки (border, background), — нет.
Единого правила наследования не существует. Его применяют, опираясь на логику построения сайта. Например, на сайте вряд ли нужно выделять все элементы рамками. За это отвечает свойство border, поэтому оно не наследуется.
Если нужно применить свойство, которое не наследуется автоматически, его можно прописать с помощью команды inherit для отдельного элемента. Посмотреть, какие свойства обычно наследуют, а какие — нет, можно на сайте Консорциума Всемирной паутины (W3).
Правило каскадирования в CSS срабатывает, если к одному элементу применили несколько CSS-команд. Приоритетным будет выполнение тех правил, к которым применена команда !important. Это объявление рекомендуют использовать, только если конфликт стилей нельзя разрешить другими способами, например, повышением специфичности селектора.
Важность селекторов ранжируется так:
- Встроенный стиль — CSS подключен с помощью элемента style;
- Селектор идентификаторов;
- Селектор классов;
- Селектор обычного элемента (селектор тега).
Кроме этого, язык разметки учитывает последовательность добавления команд CSS. Если два селектора имеют одинаковый вес, то преимущество получает стиль, который записан ниже. Например, если установить для текста сначала красный, а потом — желтый цвет, то текст будет желтым.
