Том II. CSS

Общие положения

CSS, как HTML – это аббревиатура и расшифровывается эта аббревиатура как Cascading Style Sheets (от англ. Каскадные Таблицы Стилей).

Итак, если говоря об HTML мы уже знаем, что это HyperText Markup Language (от англ. Язык Гипертекстовой Разметки), который, как мы знаем, занимается тем, ЧТО находится у вас на странице (создает каркас или скелет), то CSS занимается тем, КАК выглядит это ваше ЧТО, размещенное на странице. Проще говоря, CSS занимается стилизацией или оформлением контента, который вы разместили на странице с помощью HTML.

Самое главное в CSS, то, что вам следует сразу строго запомнить – это формула СЕЛЕКТОР > СВОЙСТВО > ЗНАЧЕНИЕ! Синтаксис таков: вводится селектор, затем открываются фигурные скобки, где внутри указывается CSS свойство, после которого ставится двоеточие и указывается значение. Пойдем по порядку, сейчас объясню.

Селекторы CSS

Помните, когда мы разговаривали об HTML, я говорил что самое главное там – это теги? Они занимаются определением типа контента, который находится на странице. Так вот в случае с CSS, грубо говоря, примерное та же схема. Здесь тоже есть главный "определитель" (как тег в HTML) – это и есть селектор. Существует три базовых (основных) вида селекторов и два сторонних.

Так сказать "классические" или базовые селекторы это:

• Селектор по типу элемента, где этот самый "тип" и есть выбираемый HTML элемент. То есть, если вы хотите работать с одним или многими заголовками из HTML, то в CSS вы просто выбираете тип этого заголовка, к примеру, h1, как селектор.
• Селектор по классу. Вот тут уже интереснее. Помните, на странице об HTML я рассказывал про то, что у тегов могут быть различные атрибуты? Так вот class – это примерно то же самое. То есть, вы создаете HTML-элемент, к примеру <h1>, и задаете ему как атрибут слово class. У атрибутов, как вы помните, есть значения, но в данном случае, значение атрибута class вы можете придумывать сами. Выглядеть это может так: <h1 class="head">Какой-то заголовок!</h1>. Возвращаясь к CSS, вы просто берете это придуманное вами значение атрибута class и переносите его как селектор. ВАЖНО! При указании в CSS селектора по классу перед названием классаВСЕГДА ставится точка!
• Селектор по ID. Любой ID (Identificator от англ. идентификатор), как мы знаем из обычной жизни, используется как некая уникальная характеристика ("ярлык"). Мир веб-разработки тоже не стал исключением и здесь ID тоже используется как уникальный идентификатор для элемента. Поскольку он уникален, то, соответственно, если вы придумали некий ID, то, в отличие от классов, вы можете использовать его только один раз только для одного HTML-элемента.

Теперь перечислим продвинутые селекторы:

• Псевдоклассы – это, грубо говоря, те же самые классы, действующие в той же последовательности селекторов, но вот только отвечают они за элементы, которые не размещены в дереве элементов. То есть, как бы, косвенно на что-то ссылающиеся. "Что-то" – это какое-то свойство уже существующее в дереве элементов объекта, но не прописанное напрямую. Это хорошо можно понять на примере псевдоклассов :active, :visited или :hover. Первый, к примеру, может делать ссылку той веб страницы, где вы сейчас находитесь, выделенной по различным параметрам, говоря вам, что "Вы здесь!". Второй может делать ваши ссылки, на которые вы уже нажимали, другого цвета. Третий же, как можно догадаться по его названию, отвечает за какие-то действия, происходящие при наведении мыши на объект. Синтаксически псевдоклассы оформляются как: селектор:псевдокласс, то есть, через двоеточие.
  Псевдоклассов бывает множество, подробнее обо всех вы можете прочесть на сайте W3Schools
  

  Не знаете английский, чтобы читать статьи на W3Schools – используйте встроенный в браузер переводчик. Но вам должно быть стыдно!

• А вот псевдоэлементы совсем не стоит путать с псевдоклассами, как бы вам не хотелось... Проще всего понять концепцию псевдоэлементов можно по аналогии с чем-то виртуальным. Впрочем, да, они именно этим и занимаются: создают виртуальный элемент. Чаще всего в роли псевдоэлементов используют ::before и ::after. С помощью первого можно, к примеру, создать объект, находящийся ДО основного объекта, к которому этот виртуальный псевдоэлемент применен. Ну а с помощью второго, по аналогии, ПОСЛЕ. Синтаксически, как можно заметить, псевдоэлементы оформляются как селектор::псевдоэлемент, то есть, через два двоеточия. У этой функции довольно обширная область применения и псевдоэлементов тоже существует большое множество,
  Подробнее о псевдоэлементах можно прочесть здесь, на сайте W3Schools.

Итак, с базовыми принципами обращения к элементам из HTML для их стилизации мы разобрались.

Подведем итог: для того, чтобы стилизовать что-то из HTML можно:

• Обратиться к элементу по его имени (h1, p, img);
• Обратиться к элементу по имени придуманного вами класса (<h1 class="heading"Заголовок!>);
• Обратиться к элементу по уникальному ID (<h1 id="heading"Заголовок!>)

А дальше дело техники и вашего творческого видения. Ну и, разумеется, на селекторах всё далеко не заканчивается...

Свойства и значения

Теперь, когда мы научились обращаться к элементам из HTML, перед нами встает вопрос: что дальше? Посредствам чего осуществляется сама стилизация элементов? Ответ на эти вопросы есть и этот ответ кроется в простом слове – свойства. Помните ту формулу кода CSS, о которой я говорил вначале? Ну, та, что синтаксис?

Но пока мы не ушли дальше, я сразу сделаю очень(!) большую ремарку: весь язык CSS состоит из свойств, соответственно, рассказывать о них можно много дней подряд. Нам это не нужно, поэтому здесь я расскажу только об основных свойствах. Ну, то есть, знаете, тех, чтобы сделать так, чтоб было красиво, как на школьной презентации в PowerPoint. Поэтому, если вам будет нужно, подробнее о массе свойств CSS вы можете прочесть по этой ссылке.

Итак, мы выбираем нужный нам элемент, пусть, к примеру, это снова будет <h1>. Давайте сразу определимся, что мы хотим с ним сделать, напишем список:

• Указать семейство шрифтов;
• Увеличить размер текста;
• Изменить цвет текста;
• Расположить заголовок посередине страницы;

За изменение семейства шрифтов отвечает свойство font-family с теми значениями, которые вы задумали. Здесь нет ничего сложного, здесь как в программе Word: прописываете после двоеточия названия шрифта в одинарных кавычках, а затем можете указать его аналог, с засечками или без (serif или sans-serif).

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

Для изменения цвета текста используется свойство color с цветовыми значениями по названию цветов или с помощью кодов системы HEX или RGB.

Для расположения текста посередине страницы используется свойство text-align со значением center.

Здесь представлены полезные CSS свойства:

• clip-path: circle(70px at center); – вырезает из background-картинки круг диаметром в 70px и размещает его в центре
• mix-blend-mode: overlay; – позволяет разместить текст поверх картинки (нужно указывать в блоке текста)

---

Ну а сейчас мы закончим этот краткий экскурс в мир CSS и можем идти дальше. Далее мы начнём разбираться в очень объемном, сложном, но невероятно полезном и интересном мире JavaScript!