• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Как используют псевдоклассы в CSS (Что такое классы псевдо языков CSS и для чего они используют)
Как используют псевдоклассы в CSS
Kosten
Дата: Пятница, 16.02.2018, 22:02 | Сообщение 1
Администраторы
Сообщений:18095
Награды: 55


Псевдоклассы 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)
Форум » Территория вебмастера » Начинающему вебмастеру » Как используют псевдоклассы в CSS (Что такое классы псевдо языков CSS и для чего они используют)
  • Страница 1 из 1
  • 1
Поиск: