Но, хотя контент и является основой, очень важно и то, как пользователи воспринимают этот контент. И когда дело доходит до реального веб-сайта, одной структуры недостаточно, вы должны оформить свой контент таким образом, чтобы он был приятным и полезным для пользователя.

И использование цвета, позиционирования, размера и прочего является частью этого оформления.

Каскадные таблицы стилей, или CSS, – это технология, обеспечивающая возможность стилизации и оформления контента в Интернете.

В качестве примера можно посмотреть сайт csszengarden.com, где один и тот же HTML файл с помощью CSS выглядит фантастически по-разному.

CSS или каскадные таблицы стилей работают следующим образом, они связывают определенные правила с элементами HTML.

Эти правила управляют тем, как должно отображаться содержимое указанных элементов.

И хотя стилизация всей веб-страницы может быть довольно сложным процессом, определить простое правило CSS довольно просто.

Правило CSS состоит из селектора, в данном случае это p, тэг абзаца, и это говорит о том, что это правило должно применяться к содержимому каждого тэга абзаца на всей HTML-странице.

За селектором следуют открывающие и закрывающие фигурные скобки. И внутри этих фигурных скобок у нас есть объявление CSS, которое состоит из двух частей, свойства и значения.

Имя свойства предопределено спецификацией CSS, и для каждого свойства существует определенное количество предопределенных значений.

Каждое свойство отделяется от значения двоеточием и заканчивается точкой с запятой.

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

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

Теперь, набор этих правил CSS называется таблицей стилей.

В этом HTML-документе у нас есть заголовок h1, пара заголовков h2 и пара абзацев между ними, обозначенные тегом абзаца p. И что мы хотим сделать, так это придать этим элементам индивидуальный стиль. И мы разместим таблицу стилей прямо в разделе заголовка нашего HTML-документа.

И в этой таблице мы видим тег абзаца. И мы изменим его цвет на синий, размер шрифта на 20 пикселей и ширину на 200 пикселей, что означает, что он будет занимать область экрана шириной 200 пикселей.

Далее для тега h1, мы определяем зеленый цвет и увеличиваем его размер шрифта, и мы также выравниваем его по середине экрана.

Так эта страница выглядит в браузере.

И если вы посмотрите на подзаголовок 1, а затем на подзаголовок 2, вы увидите, что они выделены жирным шрифтом и немного больше, чем обычный текст.

Откуда взялся этот стиль? Ведь мы не определяли стиль для тега h2.

И этот стиль исходит от самого браузера. Каждый браузер поставляется с определенными стилями по умолчанию, которые применяются к различным элементам HTML.

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

Как мы уже говорили, правило CSS состоит из селектора, за которым следуют открывающие и закрывающие фигурные скобки с объявлениями CSS, состоящими из двух частей, свойства и значения.

И селекторы CSS используются для определения того, к какому элементу HTML или набору элементов следует применить объявления CSS. Браузер использует свой API-интерфейс для обхода документа и выбора элементов, соответствующих данному селектору.

И существует три разных типов селекторов: элемент, класс и идентификатор.

Первый тип селектора – элемент – это просто указание имени элемента. Например, в этом случае селектор p говорит о том, что текст каждого абзаца в нашем HTML-документе должен быть синего цвета.

И это объявление никак не влияет на другие элементы, содержащие текст. Например, у нас может быть элемент div, содержащий текст, но на этот текст не повлияет наше правило CSS для абзаца.

Далее идет селектор класса, который указывается точкой и именем класса. В этом случае мы создаем класс blue CSS, который будет окрашивать синим цветом.

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

В этом случае у нас есть p, тег абзаца и тег div, и оба имеют атрибут class="blue" и, следовательно, их текстовое содержимое будет окрашено в синий цвет.

Обратите внимание, что это совершенно не влияет на другой абзац, не помеченный атрибутом class="blue".

И обратите внимание на разницу между тем, как вы определяете класс, и тем, как вы используете класс. Вы всегда определяете класс с точкой перед именем. И между точкой и именем класса не должно быть пробела. Однако, когда вы используете класс, вы не используете точку в его имени, вы просто используете его имя.

И последний тип селектора – это селектор id.

Вы указываете селектор идентификатора с помощью значения идентификатора элемента в вашем HTML-документе, которому предшествует знак решетки.

Так, например, если у вас есть элемент div с id="name", а затем вы указываете правило CSS с помощью селектора #name, объявления CSS будут применяться к содержимому элемента div с его значением id name.

Селектор идентификатора определяется знаком решетки, за которым следует значение идентификатора в вашем HTML-документе. И опять же, у вас не может быть никакого промежутка между ними.

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

Здесь у нас есть два селектора, сгруппированные вместе, div и также селектор класса blue, так как они оба используют одно и то же объявление CSS.

Помимо группировки селекторов существует объединение или комбинирование селекторов. И объединение селекторов – это очень мощная техника, позволяющая более точно выделять элементы документа.

Первый способ комбинирования селекторов – это селектор элемента с селектором класса.