Главная » Современный учебник CSS » Азы CSS » Часть 6. Урок: тренируемся применять селекторы

Часть 6. Урок: тренируемся применять селекторы

Из предыдущих пяти подглав этого учебника вы узнали о различных видах селекторов. Пришло время потренироваться применять на практике наиболее популярные из них. В этом уроке мы создадим стиль для простой HTML-страницы вымышленной веб-студии. Поехали! 😉

Обратите внимание: некоторые свойства из данного урока могут не поддерживаться старыми версиями браузеров. Если у вас не работает одно из свойств CSS, рекомендуем проверить, поддерживает ли его ваш браузер. Удобный сайт для проверки: caniuse.com.

Загрузка файлов

Для начала загрузите архив с файлами.
В архиве находится документ HTML под названием selektory-praktika.html. В нём нет CSS-стилей – поэтому вы будете самостоятельно их добавлять (на этот раз в виде внутренней таблицы стилей, размещенной прямо в HTML-документе).

Загрузить архив RAR

Подключаем внутреннюю таблицу стилей

Откройте файл selektory-praktika.html в удобном для вас текстовом редакторе. Отыщите закрывающий тег </head> и напишите над ним открывающий и закрывающий теги для подключения внутренней таблицы стилей. Должно получиться так:

<!-- ...HTML код... -->
<style>
</style>
</head>
<!-- ...HTML код... -->

Создаем стиль для абзацев

Сохраните изменения и откройте файл в браузере. Сейчас страница выглядит совсем непрезентабельно. Попробуем придать ей приглядный вид и начнем с текста. Между тегами <style></style> добавьте следующий код CSS:

p {
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	color: #474747;
	text-align: center;
	padding: 20px 0;
}

Вы создали селектор для тега <p>, указав его имя перед открывающей фигурной скобкой {. Данный блок объявлений устанавливает внешний вид для всех элементов p на странице:

шрифт Lato;
размер шрифта 1em;
цвет шрифта #474747;
выравнивание текста по центру;
размеры полей отступа для текста сверху и снизу в 20 пикселей.

Рекомендация: не забывайте ставить точку с запятой после каждого значения свойства, а также записывать каждое свойство с новой строки и делать отступы с помощью клавиши пробела или табуляции (для более легкого восприятия).

Общий стиль для заголовков с помощью селектора групп

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

h1, h2 {
	font-family: 'Bitter', serif;
	color: #464646;
	text-align: center;
	text-transform: uppercase;
	padding: 40px 0 30px;
}

Селектор h1, h2 является групповым – мы просто перечислили через запятую те элементы страницы, которым желаем придать одинаковый стиль. Селекторы групп очень удобны, ведь благодаря им нам не придется записывать один и тот же стиль для каждого элемента по отдельности (что, кстати, сделало бы код CSS более громоздким).

Сохраните изменения и обновите страницу. Вы увидите, что заголовки <h1> и <h2>изменили свой вид:

шрифт изменился на Bitter;
цвет изменился на #464646;
текст расположился по центру страницы;
все буквы стали прописными за счет значения uppercase для свойства text-transform;
появились отступы: 40 пикселей сверху и 30 пикселей снизу.

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

h1 {
	font-size: 2.6em;
	border-bottom: 1px solid #eae9e9;
}

h2 {
	font-size: 2em;
}

С помощью этого кода CSS мы изменили размер шрифта для заголовка <h2>, увеличив его в два раза по сравнению с размером шрифта, заданным в браузере по умолчанию, а также увеличили шрифт для <h1> до 2.6em и добавили под текстом сплошную полосу шириной 1px с цветом #eae9e9, которая немного оживляет страницу.

Используем селектор ID для <div>

Наша страница начинает потихоньку преображаться. Следующее, что мы будем делать – это создавать селектор ID (идентификатор). Необходимо немного сузить область контента, который расположен после логотипа. Назовем ID area и запишем стиль:

#area {
	width: 55%;
	padding-bottom: 40px;
	margin: 0 auto;
}

В первой части главы мы упоминали о том, что в CSS перед селектором ID ставится символ решетки #. Итак, этот стиль должен ограничить область содержимого до 55% от всей ширины экрана, а также разместить его по центру страницы (margin: 0 auto). Кроме этого, внизу появится отступ в размере 40 пикселей.

После того как вы сохраните изменения в файле и обновите страницу в браузере, вы не увидите изменений. Всё потому, что вы еще не присвоили идентификатор к элементу HTML-документа. Нам необходимо присвоить этот ID определенному элементу <div> (в нашем случае он единственный). Это должно выглядеть таким образом:

<div id="area" … >

Не забудьте о том, что в HMTL перед именем идентификатора ставить символ решетки не нужно (он записывается только в таблице CSS).

Оживляем логотип, используя класс CSS

Теперь можно посмотреть на результат. Почти половина пути уже пройдена, но нам еще есть над чем поработать. Взглянем на лого: пожалуй, его можно немного украсить, использовав для этого селектор класса под названием logo, а также псевдокласс :hover:

.logo {
	padding-top: 30px;
	cursor: pointer;
	transition: 0.6s ease;
}

.logo:hover {
	opacity: 0.6;
}

Перед селектором класса в CSS обязательно ставится точка. Также запишите класс в HTML-документе (уже без точки!), присвоив его тегу img:

<img class="logo" … />

Что делает этот стиль:

устанавливает отступ сверху от содержимого в размере 30 пикселей;
изменяет вид курсора на pointer при наведении на элемент;
устанавливает эффект и скорость перехода от одного состояния элемента к другому (нужно для следующего пункта);
псевдокласс :hover со свойством opacity обеспечивает изменение прозрачности элемента (до 0.6) при наведении на него. А благодаря предыдущему пункту переход происходит более плавно.

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

a img {
	border: none;
}

Украшаем все абзацы под заголовком: родственные селекторы

Пришла пора вспомнить о родственных (сестринских) селекторах. В данном уроке нам понадобится такой селектор, чтобы стилизовать все абзацы <p> и сделать их похожими на кнопки, которые следуют после заголовка <h2> (в пределах блока <div>). Запишите такой стиль:

h2 ~ p {
	font-family: 'Lato', sans-serif;
	font-size: 1.2em;
	text-transform: uppercase;
	color: #425c63;
	background: #dbeaee;
	border-radius: 100px;
	padding: 25px 0;
	transition: 0.5s ease;
}

h2 ~ p:hover {
	font-weight: 900;
	color: #FFF;
	background: #559fb4;
	cursor: pointer;
}

@media all and (min-width: 500px) {

h2 ~ p:hover {
	letter-spacing: 3px;
}
}

Разберем по порядку, что означает каждая строка. Применив этот стиль, мы:

изменили внешний вид шрифта для тегов <p>, следующих за <h2> (шрифт Lato, размер шрифта 1.2em, преобразование текстовых символов в верхний регистрtext-transform: uppercase, цвет #425c63);
установили цвет фона #dbeaee для элементов;
установили радиус скругления углов фона 100px;
установили ширину полей отступа сверху и снизу содержимого в размере 25px;
задали эффект и скорость переходаtransition: 0.5s ease от одного состояния элемента к другому.

При наведении указателя мыши на элемент он меняет свой вид следующим образом:

шрифт становится сверхжирным (900);
цвет шрифта – белый;
цвет фона – #559fb4;
курсор – pointer (если сделать кнопки рабочими, то этот вид курсора будет очень уместен).

Также вы наверняка заметили строку @media all and (min-width: 500px) – это медиа-запрос (мы обязательно будем изучать их позже). На данном этапе достаточно упомянуть, что такой медиа-запрос указывает, при каких условиях будет отображаться наш стиль h2 ~ p:hover {letter-spacing: 3px;}. Так, расстояние между символамиletter-spacing будет увеличено на 3 пикселя при условии, что веб-страница открыта на любом устройстве с шириной экрана не менее 500 пикселей.

Подсказка: сохраните все изменения в файле, обновите страницу и попробуйте изменить размеры окна браузера. Понаблюдайте за тем, как ведут себя элементы веб-страницы при разной ширине окна.

Финал: преображаем футер

Нам осталось совсем немного – добавить стиль для футера. Запишите этот код CSS в файл:

footer {
	width: 100%;
	background: #464646;
	padding: 30px 0;
}

footer p {
	color: #ccc;
}

Для создания футера мы использовали HTML5-тег <footer>, соответственно, в селекторе указано имя этого тега. Добавив этот код CSS в рабочий файл, вы установили ширину для футера 100%, цвет #464646 и отступы в размере 30px. Также, используя селектор потомков footer p, вы изменили цвет текста для абзацев в футере на #ccc.

Сохраните и обновите страницу. Вероятно, вас смутили небольшие отступы между краями футера и границами окна. Это происходит, потому что у окна имеются отступы по умолчанию. Чтобы убрать их, запишите для тега <body> эти несколько строк CSS кода:

body {
	margin: 0;
}

Завершение

На этом всё. Вы можете взглянуть на демо: в итоге у вас должна получиться такая страничка.

Смотреть демо

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

В четвертой главе учебника мы будем разбираться с такой интересной темой как наследование CSS.