Что такое CSS или каскадные таблицы стилей?

CSS расшифровывается как «Cascading Style Sheets», что в переводе означает «Каскадные таблицы стилей». Используется для оформления веб-страниц. Если в HTML-коде находится содержимое (то, что покажет браузер), то CSS определяет его оформление (то, как браузер это покажет). Прелесть CSS в том, что с помощью одного стиля можно оформить сразу все однотипные элементы страницы или целого сайта (сразу все ссылки, абзацы, списки). CSS-стилем вы один раз определяете, как должен выглядеть тот или иной элемент, например, картинки, и они меняют свое оформление сразу во всех документах. Чтобы изменить форматирование текста по всему сайту, вам достаточно изменить CSS-код всего один раз.

Основные элементы CSS

Как HTML состоит из тегов, атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.

• Селектор. Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
• Блок объявления стилей. Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
• Свойство. Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
• Значение. Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.

Свойств и значений в блоке объявления стилей может быть несколько, в таком случае они перечисляются через точку с запятой.

Типы селекторов

В зависимости от того, свойства каких элементов страницы они определяют, селекторы бывают разных типов.

• Универсальный. Задаёт правила всем элементам страницы, для которых не установлены другие правила.
  Код * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов.
• Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p, h1, ul.
  Например, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов <h2></h2>.
• Атрибута. С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.
• Класса. Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.

Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.

CSS-код будет таким:

step {margin-left: 15px;}

HTML-код, который привяжет элемент к правилу, будет следующим:

<p class=”step”>Текст с отступом</p>

• Идентификатора. Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:

#exclusive {color:orange;}

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

p i {fint-family: Century;}

Остальные группы селекторов основаны на совмещении перечисленных типов, а также на принципе наследования, когда дочерний элемент берёт свойства родительского.

Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):

a.step {margin-left: 15px;}

Как подключить CSS к HTML-странице?

Заставить инструменты создания сайтов взаимодействовать друг с другом можно несколькими способами. По методу добавления стили делятся на следующие категории.

Встроенные стили

Задаются в документе прямо внутри HTML-тега с помощью атрибута style. Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна — оформление тега в нём и задано.

Следующий код задаёт размер и цвет шрифта тексту внутри тега <p>:

<p style="font-size: 130%; color: #fc0">Текст, оформленный с помощью внутреннего стиля.</p>

Глобальные стили

Задаются тегом <style>, расположенным в контейнере <head>, и определяют оформление всех указанных элементов документа, а не оного, как в случае с внутренним стилем.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  a {
   font-size: 120%;
   font-family: Verdana, sans-serif, Helvetica;
   color: #632;
  }
</style>
</head>
…
</html>

Связанные стили

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

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

Чтобы связать правила из CSS-файла с HTML-страницей, используется тег <link>, добавленный в контейнер <head>, и его атрибуты.

Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:

<link rel="stylesheet" href="mysyle.css">

rel="stylesheet" определяет, что тег ссылается на файл таблицы стилей, href="mysyle.css" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.

Импортированные стили

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

Код ниже импортирует в документ таблицу файла any.css, которая находится в папке с редактируемым HTML-документом:

@import url(any.css);

Команда прописывается строкой ниже открывающего тега <style>, до первой строки глобального стиля:

<style type="text/css">
@import url(mobile.css);
  a {
   font-size: 120%;
  }
</style>

Дата размещения/обновления информации: 29.04.2021 г.

Сообщить об ошибке