1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то свое визуальное оформление: параграфы имеют отступы, ссылки выделяются подчеркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.</p>
1
<p>В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то свое визуальное оформление: параграфы имеют отступы, ссылки выделяются подчеркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.</p>
2
<p>Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как<em>каскадные таблицы стилей (Cascading Style Sheets)</em>. Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.</p>
2
<p>Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как<em>каскадные таблицы стилей (Cascading Style Sheets)</em>. Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.</p>
3
<p>В этом уроке мы разберем ту часть аббревиатуры, которая относится к<em>таблицам стилей</em>. Что такое каскадность и как это работает, вы сможете прочитать в следующем уроке.</p>
3
<p>В этом уроке мы разберем ту часть аббревиатуры, которая относится к<em>таблицам стилей</em>. Что такое каскадность и как это работает, вы сможете прочитать в следующем уроке.</p>
4
<h2>Стили CSS</h2>
4
<h2>Стили CSS</h2>
5
<p>Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название свойства: значение;.</p>
5
<p>Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название свойства: значение;.</p>
6
<p>Чтобы добавить стиль к элементу, необходимо использовать<em>селектор</em>. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмем следующую HTML-разметку:</p>
6
<p>Чтобы добавить стиль к элементу, необходимо использовать<em>селектор</em>. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмем следующую HTML-разметку:</p>
7
<p>Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:</p>
7
<p>Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:</p>
8
<p>Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:</p>
8
<p>Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:</p>
9
<ol><li>p - это<em>селектор</em>. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.</li>
9
<ol><li>p - это<em>селектор</em>. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.</li>
10
<li>Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.</li>
10
<li>Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.</li>
11
<li>Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.</li>
11
<li>Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.</li>
12
</ol><p>Разберем некоторые свойства, которые помогут вам оформлять текст:</p>
12
</ol><p>Разберем некоторые свойства, которые помогут вам оформлять текст:</p>
13
<ul><li>font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.</li>
13
<ul><li>font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.</li>
14
<li>color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать<em>словами</em>. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно<a>здесь</a>.</li>
14
<li>color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать<em>словами</em>. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно<a>здесь</a>.</li>
15
<li>text-align. Свойство, устанавливающее выравнивание текста. Оно может принимать одно из следующих значений: left, right, center, justify.</li>
15
<li>text-align. Свойство, устанавливающее выравнивание текста. Оно может принимать одно из следующих значений: left, right, center, justify.</li>
16
</ul><h2>Подключение CSS</h2>
16
</ul><h2>Подключение CSS</h2>
17
<p>Использовать CSS на странице можно с помощью нескольких способов:</p>
17
<p>Использовать CSS на странице можно с помощью нескольких способов:</p>
18
<ul><li>использование специального файла</li>
18
<ul><li>использование специального файла</li>
19
<li>использование тега <style> внутри HTML-разметки</li>
19
<li>использование тега <style> внутри HTML-разметки</li>
20
-
<li>записыва�� стили непосредственно у нужного тега. Этот способ называется инлайн (<em>inline</em>) записью.</li>
20
+
<li>записывая стили непосредственно у нужного тега. Этот способ называется инлайн (<em>inline</em>) записью.</li>
21
</ul><p>Разберемся с каждым способом отдельно.</p>
21
</ul><p>Разберемся с каждым способом отдельно.</p>
22
<h3>Использование отдельного CSS-файла</h3>
22
<h3>Использование отдельного CSS-файла</h3>
23
<p>Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нем становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение<em>.css</em>, имя же может быть произвольным.</p>
23
<p>Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нем становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение<em>.css</em>, имя же может быть произвольным.</p>
24
<p>Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:</p>
24
<p>Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:</p>
25
<p>site/ ├── css/ │ ├── main.css ├── html/ │ ├── index.html</p>
25
<p>site/ ├── css/ │ ├── main.css ├── html/ │ ├── index.html</p>
26
<p>Добавим основную информацию в файл<em>index.html</em>:</p>
26
<p>Добавим основную информацию в файл<em>index.html</em>:</p>
27
<p>Теперь необходимо подключить файл<em>main.css</em>в наш файл<em>index.html</em>. Для этого используется специальный тег <link>. У данного тега необходимо указать атрибут href, значением которого будет путь до файла<em>main.css</em>. Тег <link> указывается в секции <head>.</p>
27
<p>Теперь необходимо подключить файл<em>main.css</em>в наш файл<em>index.html</em>. Для этого используется специальный тег <link>. У данного тега необходимо указать атрибут href, значением которого будет путь до файла<em>main.css</em>. Тег <link> указывается в секции <head>.</p>
28
<p>Дополнительно разберем эту запись: ../css/main.css. Ее можно условно разбить на три составляющие:</p>
28
<p>Дополнительно разберем эту запись: ../css/main.css. Ее можно условно разбить на три составляющие:</p>
29
<ol><li><em>../</em>- переход в директорию выше. Изначально файл<em>index.html</em>находится в директории<em>html/</em>, поэтому мы "выходим" из нее в директорию<em>site/</em>.</li>
29
<ol><li><em>../</em>- переход в директорию выше. Изначально файл<em>index.html</em>находится в директории<em>html/</em>, поэтому мы "выходим" из нее в директорию<em>site/</em>.</li>
30
<li><em>css/</em>- переход в директорию<em>css/</em>.</li>
30
<li><em>css/</em>- переход в директорию<em>css/</em>.</li>
31
<li><em>main.css</em>- указание имени и расширения файла, который мы хотим подключить.</li>
31
<li><em>main.css</em>- указание имени и расширения файла, который мы хотим подключить.</li>
32
</ol><p>Если бы наши файлы<em>index.html</em>и<em>main.css</em>находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".</p>
32
</ol><p>Если бы наши файлы<em>index.html</em>и<em>main.css</em>находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".</p>
33
<p>После подключения файла мы можем записывать все нужные стили именно в файле<em>main.css</em>. Они автоматически подключатся на наш сайт.</p>
33
<p>После подключения файла мы можем записывать все нужные стили именно в файле<em>main.css</em>. Они автоматически подключатся на наш сайт.</p>
34
<h3>Использование тега style</h3>
34
<h3>Использование тега style</h3>
35
<p>Вторым способом использования CSS является использование стилей в специальном теге <style>. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег <style> обычно указывается внутри секции <head>. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.</p>
35
<p>Вторым способом использования CSS является использование стилей в специальном теге <style>. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег <style> обычно указывается внутри секции <head>. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.</p>
36
<p>Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили еще до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.</p>
36
<p>Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили еще до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.</p>
37
<h3>Inline-стили</h3>
37
<h3>Inline-стили</h3>
38
<p>Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придется для каждого указывать отдельно. Это приведет к постоянному копированию стилей.</p>
38
<p>Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придется для каждого указывать отдельно. Это приведет к постоянному копированию стилей.</p>
39
<p>Возьмем прошлый пример и добавим<em>inline</em>стили:</p>
39
<p>Возьмем прошлый пример и добавим<em>inline</em>стили:</p>
40
<h2>Классы и идентификаторы</h2>
40
<h2>Классы и идентификаторы</h2>
41
<p>При создании разметки разработчикам удобно отделять одинаковые теги друг от друга с помощью имён. Например, на странице есть два заголовка:</p>
41
<p>При создании разметки разработчикам удобно отделять одинаковые теги друг от друга с помощью имён. Например, на странице есть два заголовка:</p>
42
<p>Оба заголовка второго уровня, но в дизайне они могут иметь разные CSS стили. Вы уже познакомились с селектором по тегу и он не поможет дать каждому из заголовков уникальные стили.</p>
42
<p>Оба заголовка второго уровня, но в дизайне они могут иметь разные CSS стили. Вы уже познакомились с селектором по тегу и он не поможет дать каждому из заголовков уникальные стили.</p>
43
<p>Дать имена тегам позволяют атрибуты class и id. Эти атрибуты принимают произвольные имена, с помощью которых можно обратиться к элементу в CSS.</p>
43
<p>Дать имена тегам позволяют атрибуты class и id. Эти атрибуты принимают произвольные имена, с помощью которых можно обратиться к элементу в CSS.</p>
44
<p>Различие класса и идентификатора в количестве использований:</p>
44
<p>Различие класса и идентификатора в количестве использований:</p>
45
<ul><li>class - значение атрибута может устанавливаться сколько угодно раз в рамках одной страницы</li>
45
<ul><li>class - значение атрибута может устанавливаться сколько угодно раз в рамках одной страницы</li>
46
<li>id - значение атрибута устанавливается у одного элемента на странице. Не может быть двух одинаковых идентификаторов на странице</li>
46
<li>id - значение атрибута устанавливается у одного элемента на странице. Не может быть двух одинаковых идентификаторов на странице</li>
47
</ul><p>Если значений у атрибута несколько, то они указываются через пробел, например:</p>
47
</ul><p>Если значений у атрибута несколько, то они указываются через пробел, например:</p>
48
<p>Чтобы обратиться к элементам по их классу или идентификатору, используются специальные селекторы, которые мы сейчас и рассмотрим.</p>
48
<p>Чтобы обратиться к элементам по их классу или идентификатору, используются специальные селекторы, которые мы сейчас и рассмотрим.</p>
49
<h2>Селекторы</h2>
49
<h2>Селекторы</h2>
50
<p>Селекторы - краеугольный камень всего CSS.</p>
50
<p>Селекторы - краеугольный камень всего CSS.</p>
51
<p><em>"Не так важны стили, как то, к чему они применяются" © Народная мудрость</em></p>
51
<p><em>"Не так важны стили, как то, к чему они применяются" © Народная мудрость</em></p>
52
<p>Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только четные или нечетные элементы и так далее.</p>
52
<p>Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только четные или нечетные элементы и так далее.</p>
53
<p>Разбор каждого селектора - это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать<em>базовыми</em>:</p>
53
<p>Разбор каждого селектора - это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать<em>базовыми</em>:</p>
54
<ol><li>Селектор по<em>тегу</em>. Такой селектор мы применяли на протяжении всего урока. Цель простая - просто указать тег, для которого будут применяться стили.</li>
54
<ol><li>Селектор по<em>тегу</em>. Такой селектор мы применяли на протяжении всего урока. Цель простая - просто указать тег, для которого будут применяться стили.</li>
55
<li>Селектор по<em>классу</em>. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.</li>
55
<li>Селектор по<em>классу</em>. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.</li>
56
<li>Селектор по<em>идентификатору</em>. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML - идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.</li>
56
<li>Селектор по<em>идентификатору</em>. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML - идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.</li>
57
</ol><p>Рассмотрим все три селектора на реальном примере:</p>
57
</ol><p>Рассмотрим все три селектора на реальном примере:</p>
58
<p>После применения этих стилей получится следующая картина:</p>
58
<p>После применения этих стилей получится следующая картина:</p>
59
<ul><li>Черный фон секции <main>. Для этого использовали класс content и селектор .content;</li>
59
<ul><li>Черный фон секции <main>. Для этого использовали класс content и селектор .content;</li>
60
<li>Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;</li>
60
<li>Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;</li>
61
<li>Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.</li>
61
<li>Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.</li>
62
</ul><h3>Вложенность селекторов</h3>
62
</ul><h3>Вложенность селекторов</h3>
63
<p>В реальной разработке не всегда удается пользоваться только этими тремя видами селекторов в том виде, в котором вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберем на примере:</p>
63
<p>В реальной разработке не всегда удается пользоваться только этими тремя видами селекторов в том виде, в котором вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберем на примере:</p>
64
<p>Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.</p>
64
<p>Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.</p>
65
<p>Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:</p>
65
<p>Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:</p>
66
<p>Этот селектор комбинирует два уже известных типа:</p>
66
<p>Этот селектор комбинирует два уже известных типа:</p>
67
<ol><li>Селектор по классу .news</li>
67
<ol><li>Селектор по классу .news</li>
68
<li>Селекторы по тегу article и h2</li>
68
<li>Селекторы по тегу article и h2</li>
69
</ol><p>Разделив их пробелом, мы сказали браузеру: "Возьми все заголовки <h2> из <article>, который лежит внутри элемента с классом news". В примере это элемент <section class="news">.</p>
69
</ol><p>Разделив их пробелом, мы сказали браузеру: "Возьми все заголовки <h2> из <article>, который лежит внутри элемента с классом news". В примере это элемент <section class="news">.</p>
70
<p>Читать селекторы стоит именно таким образом - справа налево. Такой подход называется<em>вложенностью селекторов</em>. Можно комбинировать что угодно и с какой угодно глубиной.</p>
70
<p>Читать селекторы стоит именно таким образом - справа налево. Такой подход называется<em>вложенностью селекторов</em>. Можно комбинировать что угодно и с какой угодно глубиной.</p>
71
<p><strong>Важно:</strong>для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов</p>
71
<p><strong>Важно:</strong>для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов</p>
72
<p>Важно понимать, что такая запись .news article h2 выберет<strong>все</strong>заголовки второго уровня во<strong>всех</strong><article>, которые лежат внутри блока с классом news. Давайте немного видоизменим верстку, чтобы это проверить.</p>
72
<p>Важно понимать, что такая запись .news article h2 выберет<strong>все</strong>заголовки второго уровня во<strong>всех</strong><article>, которые лежат внутри блока с классом news. Давайте немного видоизменим верстку, чтобы это проверить.</p>
73
<p>Ко второй новости мы добавили блок "Похожие новости". Самое интересное, что наше правило font-size: 32px; применится и к заголовку "Похожие новости", и к заголовку "Похожая новость 1". Так как оба заголовка так или иначе лежат внутри <article>, которые находятся в блоке с классом .news.</p>
73
<p>Ко второй новости мы добавили блок "Похожие новости". Самое интересное, что наше правило font-size: 32px; применится и к заголовку "Похожие новости", и к заголовку "Похожая новость 1". Так как оба заголовка так или иначе лежат внутри <article>, которые находятся в блоке с классом .news.</p>
74
<p>Такой тип селекторов называется<em>контекстным</em>или<em>селектор потомков</em>. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.</p>
74
<p>Такой тип селекторов называется<em>контекстным</em>или<em>селектор потомков</em>. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.</p>
75
<p>Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет<em>дочерний селектор</em>. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те <article>, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих <article>. Это делается следующим образом:</p>
75
<p>Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет<em>дочерний селектор</em>. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те <article>, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих <article>. Это делается следующим образом:</p>
76
<p>Теперь размер шрифта для заголовков "Похожие новости" и "Похожая новость 1" не будет увеличен, так как мы указали более конкретный селектор для заголовков.</p>
76
<p>Теперь размер шрифта для заголовков "Похожие новости" и "Похожая новость 1" не будет увеличен, так как мы указали более конкретный селектор для заголовков.</p>
77
<h3>Комментарии</h3>
77
<h3>Комментарии</h3>
78
<p>Для добавления комментария в код CSS используют /* */:</p>
78
<p>Для добавления комментария в код CSS используют /* */:</p>
79
79