| Kosten | Пятница, 16 Февраля 2018, 22:02 | Сообщение 1 |
| Псевдоклассы CSS основной применяют для прописывания или добавления спец эффектов к разным элементам. Для использования этих эффектов не нужно применять или использовать JavaScript, также разные скрипты. Здесь основной синтаксис псевдоклассов заключается в следующем. Класс CSS псевдо позволяет назначить определенное состояние к элементу. Например, пользователь наводит курсор на изображение на странице и переходит к другому изображению. Ссылки меняют цвета, как только они посещаются и их можно отличить от невидимых ссылок. Поле ввода в форме отключено и не принимает значения.
Эти действия и многое другое становятся возможными благодаря псевдоклассам. Обычные классы CSS также могут использоваться с псевдоклассами. CSS3 добавил несколько псевдо классов, чем было ранее доступно в CSS2. Псевдо-класс привязан к селектору. Ему предшествует двоеточие и обычно сопровождается свойством со значением в скобках. Синтаксис псевдо-класса выглядит следующим образом.
Код selector: pseudo-class { property:value;}
В следующем примере показано, как использовать класс: link для установки цвета ссылки. Возможные значения могут быть любым именем цвета в любом допустимом формате.
Код <html> <head> <style type="text/css"> a:link {color:#000000} </style> </head> <body> <a href="http://zornet.ru">ZORNET.RU</a> </body> </html>
Он произведет следующую черную ссылку
Демонстрация:
Посещаемый псевдокласс
Ниже приведен пример, демонстрирующий, как использовать класс: visited для установки цвета посещенных ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.
Код <html> <head> <style type="text/css"> a:visited {color: #006600} </style> </head> <body> <a href="http://zornet.ru">ZORNET.RU</a> </body> </html>
Это приведет к следующей ссылке. Как только вы нажмете эту ссылку, она изменит свой цвет на зеленый.
Демонстрация:
Псевдоклас: hover
В следующем примере показано, как использовать класс : hover для изменения цвета ссылок, когда мы наводим указатель мыши на эту ссылку. Возможные значения могут быть любым именем цвета в любом допустимом формате.
Код <html> <head> <style type="text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href="http://zornet.ru">ZORNET.RU</a> </body> </html>
Он выдает следующую ссылку. Теперь вы наводите указатель мыши на эту ссылку и вы увидите, что она меняет цвет на желтый.
Демонстрация:
Основные псевдо-классы
Существует много разных псевдоклассов, пример кода ниже демонстрирует некоторые из самых простых. Они классифицируются как динамические псевдо-классы, которые изменяются в результате действий пользователя. В примере кода: псевдоним класса link используется для установки цвета ссылки на разные оттенки. После того, как пользователь посетил ссылку, псевдо-класс: visited используется для изменения цвета ссылки на maroon.
Также продемонстрировано: наведение, которое используется для изменения пурпурного круга с белым текстом на розовый квадрат с желтым текстом, когда пользователь наводил на изображение. Фокус псевдо - класс изменяет поле ввода даты к серому, когда пользователь щелкает или «фокусируется» на нем.
Наиболее часто используемые псевдоклассы заключаются в следующем:
:link Используйте этот класс, чтобы добавить специальный стиль к невидимой ссылке.
:visited Используйте этот класс, чтобы добавить особый стиль к посещенной ссылке.
:hover Используйте этот класс, чтобы добавить специальный стиль к элементу, когда вы наводите его на него.
:active Используйте этот класс для добавления специального стиля к активному элементу.
:focus Используйте этот класс, чтобы добавить особый стиль к элементу, в то время как элемент имеет фокус.
:first-child Используйте этот класс, чтобы добавить особый стиль к элементу, который является первым потомком какого-либо другого элемента.
:lang Используйте этот класс, чтобы указать язык для использования в указанном элементе.
Еще несколько псевдокласс
Ниже перечислены несколько более часто используемых псевдоклассов. Полный список всех псевдо-классов можно найти здесь.
:first-child - Этот класс позволяет добавить определенный стиль к элементам, которые являются первым дочерним элементом их родительского элемента.
:root - Этот псевдокласс используется для соответствия корневому элементу документа.
:lang - Различные языки имеют разные правила и условные обозначения. Иногда вам нужно создавать страницы, которые используются несколькими языками. Псевдо класс: lang полезен для этой ситуации. Он рассматриваетатрибут lang = "" HTML и элемент и соответствующим образом сопоставляет элементы.
:disabled - Это позволяет указывать отключенные элементы ввода, такие как текстовые поля и кнопки.
:fullscreen - Элементы, находящиеся в полноэкранном режиме, используются этим псевдо-классом.
Псевдоэлементы
Псевдоэлементы имеют сходную функциональность, и поскольку они могут быть созданы CSS и добавлены пользовательскими агентами. Однако они отличаются от псевдо классов, потому что они позволяют работать с элементами, которые не существуют в DOM. Идентификатор синтаксиса для псевдоэлементов обычно представляет собой двойные двоеточия.
Общие псевдоэлементы :before ::after и ::first-line. Важно отметить, что некоторые кодеры используют один двоеточие: для псевдоэлементов, которые были конвенцией в CSS.
Вывод:
Псевдо классы позволяют применять специальные состояния к элементам. Они позволяют разработчикам создавать интересные эффекты без использования языка сценариев такого как JavaScript.
Существует много разных типов псевдо-классов, которые позволяют сделать вашу страницу более интерактивной и интересной, сохраняя при этом код простым.
| | Страна: (RU) |
| |
