Индивидуальный стиль каждой кнопке навигации при помощи псевдокласса

/ 👁 3767

Сегодня я покажу Вам, как можно придать индивидуальный стиль для каждой кнопки навигации при этом не присваивая каждой кнопке отдельный класс. Сделать это становится возможным при помощи псевдокласса, появившегося в CSS3 – nth-child(). При этом Ваш html-код останется не загроможденным большим количеством классов, а реализация самой задачи становится до смешного простой.

дополнительные материалы к урокам

демо версия урока

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

Давайте начнем.

Индивидуальный стиль каждой кнопки с псевдоклассом nth-child()

1.Первым делом мы создадим html5-файл. Код его будет достаточно простым, потому что файл будет содержать только заголовок и саму навигацию.

Также мы сразу подключим таблицу стилей, которую создадим в следующем шаге.

Вот этот простой код нашего html-файла:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Разноцветная навигация</title>
</head>
<body>
<h1>WebSite</h1>
<nav>
<a href="#">HOME</a>
<a href="#">NEWS</a>
<a href="#">PRODUCTS</a>
<a href="#">CONTACT</a>
</nav>
</body>
</html>

 

Думаю, в этом коде Вам все понятно. В теге «h1» мы помещаем заголовок, а в теге «nav» находятся четыре пункта нашей навигации.

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

2. Следующий этап – это создание файла таблицы стилей. Создайте файл таблицы стилей и дайте ей имя «style.css».

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

3. Теперь давайте зададим основные стили для нашей страницы. Мы зададим ширину и выравнивание для тега «body», стили для нашего заголовка и основные стили для навигации: тип шрифта, его размер, отступы, верхнюю и нижнюю рамку.

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

На данном этапе вставьте вот такой код в Ваш css-файл:

body{width:1024px; margin:0 auto; text-align:center;}
h1{font-family:Verdana, Geneva, sans-serif; font-size:48px; 
color:#636; text-shadow:2px 2px 2px #666;}
nav{font-size:24px; padding:10px; font-family:Verdana, Geneva, sans-serif;
border-bottom:1px solid #ccc; border-top:1px solid #ccc;}
nav a{margin:0px 20px 0px 0px; text-decoration:none; color:#999; padding:10px;}

 

Если мы сейчас посмотрим нашу страницу в браузере, то увидим следующее.

стилизация страницы с навигацией

4. Я буду придавать различные стили для кнопок в момент наведения на них указателя мыши (но, если Вы хотите просто стилизовать таким образом неактивные кнопки, то ничего не мешает Вам это сделать по такому же принципу).

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

Сделаем мы это при помощи следующего кода:

nav a:hover{color:#fff;}

 

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

меняем стиль кнопки при наведении указателя мыши

5. Теперь пришло время задать для каждой кнопки, на которую наведен курсор свой фоновый цвет. И здесь помимо псевдокласса «:hover», которым мы уже пользовались, мы также будем использовать псевдокласс «nth-child()».

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

В нашем случае все будет очень просто. Нам только нужно будет передать номер стилизуемой кнопки.

Выглядеть это будет вот так:

nav a:hover:nth-child(1){background:#ffc60a;}
nav a:hover:nth-child(2){background:#d5b692;}
nav a:hover:nth-child(3){background:#394a97;}
nav a:hover:nth-child(4){background:#6f7072;}

 

Теперь каждая кнопка имеет свой фоновый цвет при наведении на нее указателя мыши.

индивидуальный стиль каждой кнопке
псевдокласс nth-child()
результат работы псевдокласса nth-child()
придание стилей при помощи псевдоклассов

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

Это лишь один из способов использования псевдокласса nth-child(). Один из самых простых способов. На самом же деле с его помощью можно придавать различные стили любому сочетанию чередующихся элементов. Можно, например, делать разный фоновый цвет для четных и нечетных строк таблицы при помощи лишь пары строк кода, а также еще много всего интересного. Но об этом в следующий уроках.

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

Если данный урок Вам понравился поделитесь им с друзьями при помощи кнопок социальных сетей ниже или оставьте свой комментарий.

Я на этом с Вами прощаюсь, успехов Вам и до новых встреч.

С Вами как всегда была Анна Котельникова.

До скорого.

Tags: ,

Leave a Reply