Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

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

Стилевые правила обычно связываются с элементами дерева документа сайта. Однако некоторые элементы не обязательно можно найти в разметке документа сайта, например посещенные ссылки или первая строка абзаца страниц сайта. Чтобы применить стиль к таким экземплярам элементов страниц в документе сайта, в CSS существуют псевдоселекторы. Вместо выбора конкретного элемента в документе псевдоселекторы интерпретируются браузерами по контексту и функции. Псевдоселекторы обозначаются символом двоеточия (:). Псевдоселекторы делятся на псевдоклассы и псевдоэлементы.

Псевдоклассы в CSS.

Как предполагает само название, функционирование псевдокласса характеризует ситуацию, когда к группе элементов( тегов) был применен атрибут class. Наиболее часто псевдоклассы применяются к элементу-анкеру а. Такие «фантомные» классы не отражаются в разметке, а основываются на состоянии элементов или самого документа сайта. Проще говоря, меняется оформление элемента страницы сайта при наведении.

Псевдоклассы анкеров в CSS.

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

                           a: link  {
                                    color: red;
                                    }
                            
                           a:visited {
                                    color: blue;
                                    }
                           
                           a:hover {
                                    color: fuchsia;
                                    } 
                           
                           a:active {
                                    color: maroon;
                                    }
                           

Как и аналогичный атрибут body в элементе body, псевдокласс :link применяется к гипертекстовым ссылкам, которые еще не посещались, :visited - к ссылкам, которые посещались, а псевдокласс :active - в процессе нажатия на ссылку. Разница в том, что при помощи CSS можете делать гораздо больше, чем просто изменять цвет. Ниже приводятся популярные правила для отключения подчеркивания текста ссылки.

                           a:link {
                                   color:red;	
                                   text-decoration: none;
                                   }
                                   
                           a:visited {
                                   color: blue; 
                                   text-decoration: none;
                                   }

Селектор : hover в CSS применяется для создания динамических эффектов, когда ссылка изменяет свой вид при наведении на нее курсора мыши. В примерах, приведенных выше, отключалось подчеркивание ссылок. В следующем примере селектор :hover используется для создания эффекта динамического появления подчеркивания при наведении курсора.

                           a:link {
                                   color: red; 
                                   text-decoration: none;
                                   }
                                    
                           a:hover {
                                   color: red;	
                                   text-decoration:	underline;
                                   }

Чтобы псевдоклассы анкеровв CSS функционировали правильно, они должны находиться в таблице стилей в определенном порядке. Аббревиатура LVHA (популярный способ произношения - Love, НА!) позволяет запомнить правильный порядок: :link, :visited, :hover, :active. Это относится и к порядку, и к специфичности. Если поместить :link или :visited в конец, они подменят собой состояния :hover и :active, и тогда эти стили отображаться не будут. Запомнить совсем не трудно, если взять на вооружение: LVHA, как говорится, Love, НА! ( люблю ха).


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: