Когда я начал изучать кодирование, первыми двумя языками, которые я выучил, были HTML и CSS. Как и большинство людей, я считал язык разметки гипертекста довольно простым. Названия элементов были интуитивно понятны, структура имела смысл, и было довольно легко запомнить отдельные детали. Cascading Style Sheets разительно отличался от него, особенно для новичка. Я часто оказывался в затруднительном положении, пытаясь понять, почему элементы ведут себя одним образом, а я ожидал, что они будут вести себя по-другому. Вот несколько советов, которые я нашел полезными при изучении CSS.
Совет 1: Селекторы
Первое, что вам предстоит узнать при изучении CSS, — это как на самом деле стилизовать свою веб-страницу? Для того чтобы придать стиль элементам HTML-документа, необходимо использовать селекторы. С помощью селекторов CSS вы можете придать стиль одному элементу, коллекции элементов, всему сразу или даже придать стиль определенным элементам по событию, которое происходит, когда пользователь взаимодействует с вашей веб-страницей (к последнему мы вернемся чуть позже). Вот ваша базовая веб-страница HTML:
1 <!DOCTYPE html>
2
3 <html lang="en">
4 <head>
5 <title>Hello World</title>
6 <link rel="stylesheet" href="./styles.css" />
7 <meta charset="UTF-8">
8 </head>
9 <body>
10 <h1>Hello World!</h1>
11 </body>
12 </html>
Допустим, мы хотим придать пикантности и изменить цвет нашего тега h1 на красный. Если вы заметили в строке 6, мы связали наш CSS-файл, названный styles.css, с нашим HTML-файлом. Это дает нашему CSS-файлу доступ к изменению наших HTML-элементов. Теперь мы можем использовать наши селекторы, чтобы нацелиться на элемент h1:
1 h1 {
2 color: red;
3 }
Но что если у нас есть несколько тегов h1, и мы хотим, чтобы они были разных цветов? Используем идентификаторы!
10 <h1 id="beans">Potatoes</h1>
11 <h1 id="greens">Potatoes</1>
Наш CSS будет иметь немного другой синтаксис, чтобы указать конкретные ID этих тегов h1:
1 #beans {
2 color: red;
3 }
4
5 #greens {
6 color: blue;
7 }
CSS использует хэштеги, чтобы сообщить движку, что он нацелен на элемент с ID, следующим за хэштегом. Очень удобно.
Выделение элементов может идти еще дальше с помощью классов. Допустим, вы хотите, чтобы первый тег h1 был красным, второй тег h1 — синим, но чтобы оба они имели рамку? Мы можем сохранить наши идентификаторы, но на этот раз мы добавим классы к нашим тегам h1:
10 <h1 id="beans" class="tomatoes">Potatoes</h1>
11 <h1 id="greens" class="tomatoes">Potatoes</1>
Чтобы нацелить наш класс «помидоры», наш CSS должен использовать точечную нотацию:
9 .tomatoes {
10 font-size: 100px; /* larger size for readability */
11 text-shadow: -1px 0 black, 0 1px black, 1px 0 black ,0 -1px black;
12 }
Теперь ваши заголовки должны иметь аккуратную рамку вокруг себя!
Уже все выглядит стильно.
Совет 2: Свойства
Если вы хотите стать профессионалом в CSS, знание свойств и их взаимодействия с вашей веб-страницей является ключевым моментом. Существует более 200 свойств, из которых имеют несколько значений, поэтому запомнить их все, их пары значений и то, что они делают, будет довольно сложной задачей. Чтобы начать, вот несколько свойств, которые могут мгновенно превратить веб-страницу в более организованную для пользователя:
Отображение
Display — это хорошее свойство, которое нужно понимать и применять, когда это необходимо. По умолчанию каждый элемент имеет отображение либо block, либо inline, хотя есть и другие значения, которые могут быть полезны, например inline-block или none. Отображение следующих элементов выглядит следующим образом:
Inline
<span><a><img>
Элементы уровня блока (например, наши теги h1) по умолчанию идут сверху вниз, делая новую строку, и занимают всю ширину веб-страницы, если не указано иное. Если вы заметили в наших заголовках Potatoes, они располагаются сверху. Но что произойдет, если мы заменим эти теги h1 на теги span?
Теперь они будут отображаться в строке! Знание различий между блочным и строчным отображением, а также того, какие элементы по умолчанию относятся к тому или другому, поможет вам избежать путаницы в дальнейшем.
Блок:
<div><p><form><header><footer><section>
На рисунке выше у нас есть 4 элемента div внутри родительского div. Каждый из них имеет определенный id для изменения цвета, и все они имеют имя класса, который изменяет их ширину, размер шрифта и отступы. Возможно, вы заметили еще одну вещь в этих блочных элементах, которая, кажется, противоречит тому, что я сказал ранее… можете ли вы определить, что это такое?
Блочные элементы по умолчанию отображаются сверху вниз, но эти элементы отображаются слева направо, или inline. Ключевое различие между блочными и инлайн-элементами заключается не только в направлении их отображения, но и в возможности стилизовать их. Высота/ширина инлайн-элемента не может быть изменена, только у элементов уровня блока. Поэтому, если мы хотим изменить высоту/ширину элементов уровня блока и сделать их инлайн, вы можете использовать display: inline-block; или float: left;. Оба эти варианта обеспечивают одно и то же, но обычно display: inline-block лучше. Это связано с тем, что при последующем сопровождении кода разработчиками, display: inline-block; будет гораздо более очевидным, чего вы пытаетесь достичь. Другой вариант — display: flex;. Это даст вам доступ к большему количеству вариантов оформления:
justify-content
Итак, мы разместили все наши встроенные div’ы слева от нашего котейнера. Что если у нас есть заголовок, а каждый из этих цветных div — это кнопка, нажав на которую мы можем перейти на новую страницу? То, что все они сдвинуты влево, может быть хорошо, но мы можем захотеть, чтобы все они были расположены по центру экрана. justify-content дает нам несколько способов изменить наш заголовок:
- justify-content: flex-end
Это сдвинет содержимое родительского div вправо или в конец:
- justify-content: space-between
Это разделит содержимое таким образом, чтобы пространство между ними было одинаковым:
- justify-content: space-evenly
Это создаст равное пространство между краями всех div, включая крайние дочерние div и родительский:
- justify-content: space-around
Аналогично «равномерному пространству», но пробелы с обоих краев имеют половинный размер:
Совет 3: Наведение
Селектор hover — это фантастический и простой инструмент селектора, который вы можете легко внедрить в свой CSS. Рассмотрим этот HTML:
9 <body>
10 <p>Hello World!</p>
11 </body>
…и этот CSS:
1 p {
2 font-size: 100px;
3 color: red;
4 }
Что если мы хотим изменить стиль нашего тега абзаца, когда пользователь наводит курсор мыши на элемент? Мы можем просто создать другой селектор, вызываемый для того же элемента, но с подключенным селектором :hover!
1 p {
2 font-size: 100px;
3 color: red;
4 }
5
6 p:hover {
7 color: blue;
8 }
Есть много способов реализовать это, тот, который мы сделали здесь, очень прост. Но вот упражнение, зайдите на любую веб-страницу. Когда вы наводите курсор на кнопку, меняется ли ее стиль? Есть ли граница при наведении на кнопку? Меняется ли цвет или появляется тень?
Бонусный совет
- Переход
Переход — одно из моих любимых свойств в CSS. Благодаря ему все выглядит очень плавно, когда пользователь взаимодействует с веб-страницей! Возьмем наш предыдущий пример, но добавим переход:
1 p {
2 font-size: 100px;
3 color: red;
4 }
5
6 p:hover {
7 color: blue;
9 transition: 1s;
8 }
Если вы попробовали навести курсор в нашем последнем примере, вы, вероятно, заметили, что он мгновенно меняет цвет. С помощью свойства transition изменение стиля будет происходить в течение 1 секунды, или сколько угодно секунд. Попробуйте! Но мы еще не закончили… Что если вы не хотите, чтобы стиль мгновенно возвращался к своему обычному состоянию? Очень просто:
10 p:not(:hover) {
11 transition: 1s;
12 }
Теперь мы сказали CSS, что хотим, чтобы он вернулся к нашему старому стилю в течение одной секунды, когда пользователь перестанет нависать над элементом.
Заключение
CSS имеет простой синтаксис, но может быть чрезвычайно сложным по функциональности. Существуют очень продвинутые реализации CSS, но это — отличная отправная точка для начинающих.
Для получения дополнительной информации о свойствах CSS посетите MDN.