alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Псевдоселекторы или псевдоклассы CSS.

Категория: Уроки CSS Просмотров: 4563 Коментариев: 0 Дата: 2017-08-31 Добавил: admin

 Псевдоселекторы или псевдоклассы CSS

Мы продолжаем изучать виды селекторов и после изучения селекторов потомков и потомков мы в этом уроке рассмотрим еще один вид селекторов - это псевдоселекторы или как их еще чаще называют псевдоклассы.

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

То есть первое состояние, когда ссылка находится в спокойном (нетронутом) состоянии, второе состояние - когда наводится мышь на ссылку, третье - щелчок мыши и последнее это уже посещенная ссылка которая принимает уже заданный цвет. Для каждого такого состояния можно задать свои стили и изменить их.

Делается это следующим образом: для ссылки тега <a> через двоеточие, указывается состояние ссылки. При этом всем важна последовательность использования псевдоэелементов, псевдоклассов.

Начальное состояние ссылки: Псевдокласс - :link

1. Первичное (начальное) состояние ссылки должно отмечается как :link и уже в фигурных скобках указываем цвет, возьмём красный. Для выбора цвета можно воспользоваться программой.

CSS
a:link{
color: #FF0000;
}

Теперь ссылка в обычном состоянии будет красного цвета.

Примечание: псевдокласс :link для ссылок указывать не обязательно, так как он присвоен для ссылки по умолчанию и структура записи a:link{ color: #FF0000;} равносильна записи a { color: #FF0000;}

Посещенная ссылка: Псевдокласс - :visited

2. Следующее состояние, которое нужно указать это, когда ссылку уже посетили. Для посещенного состояния применяется псевдокласс :visited с английского переводится как посещенной. И для посещенной ссылки зададим желтый цвет.

CSS
a:visited {
color: #FFDD00;
}


Состояние ссылки при наведении мыши: Псевдокласс - :hover

3. Третье состояние ссылки это :hover. В это состояние ссылка попадает когда на нее наводят курсор мыши. Покрасим ссылку в зеленый цвет при наведении на нее курсора.

CSS
a:hover {
color: #008000;
}

Активная ссылка: Псевдокласс - :active

4. И последнее состояние - это момент щелчка на ссылку :active и для него давайте зададим синий цвет.

CSS
a:active{
    color: #0000FF;
} 

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

HTML
Самая обычная ссылка
CSS
a:link {
    color: #FF0000;
}
a:visited {
    color: #FFDD00;
}
a:hover {
    color: #008000;
}    
a:active {
    color: #0000FF;
}  

Возможно возник вопрос: а что если не нужно изменять цвет ссылки и она должна оставаться всегда одно цвета? В таких случаях задается цвет напрямую для ссылки, только для тега <a>, не используя при этом, ни каких псевдоклассов или псевдоселекторов.

CSS
a {
    color: #000000;
} 

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

Если для ссылки совсем не указывать ни каких правил, то браузер будет использовать свои собственные стили и правила, которые ему уже заранее вложены. Но как мы уже узнали все эти правила, мы можем переопределить с помощью CSS на те, которые нам нужны.

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


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов