В Сети можно легко найти множество уроков с применением псевдокласса:target. Однако, не будем следовать чужому коду, а попробуем разобраться в нем и понять, как это работает? Конечно, не обойдется и без примеров
Что такое:target?
В CSS:target это псевдокласс, позволяющий выбрать некоторый целый «кусок» вашего HTML-документа, над которым будет производится некоторое действие. Это может быть абзац текста или заголовок, к примеру.
Не нужно путать псевдоклассы с псевдоэлементами, которые умеют выбирать только некоторую часть элемента, вроде первой буквы или первой строки абзаца.
Псевдоклассы
:
- a:link{color:#111}
- a:hover{color:#222}
- div:first-child{color:#333}
Псевдоэлементы:
- p::first-letter{color:#444}
- p::first-line{color:#555}
Думаю, из синтаксиса ясно, что делает тот или иной псевдокласс или псевдоэлемент. Самый популярный псевдокласс — :hover , с ним сталкиваются все вебмастера, он описывает стили элемента при наведении курсора. target работает аналогично и описывает стили элемента при наступлении определенной ситуации.
Идентификаторы фрагментов
Если кратко — это такая штука, к которой подвязывается наш псевдокласс. Это хэштег со словом или фразой, которая ставится в конце адреса. Выглядит вот таким образом:
Этот прием может использоваться для переходов внутри статьи. Например, в начале статьи вы создаете небольшой оглавление, при нажатии на элемент которого человек попадает на тот раздел, куда ведет ссылка, разделу, при этом, нужно добавить идентификатор.
Это работает на чистом HTML, никаких ухищрений не требуется. Небольшой идентификаторов.
Обработка клика с помощью:target
Теперь попробуем сделать так, чтобы при клике на нужный раздел из нашего импровизированного меню — менялся стиль заголовка, показывая, какой из абзацев сейчас активен.
H1 { font: 30px Arial sans-serif; } h1:target { font-size: 50px; text-decoration: underline; color: #37aee4; }
Код очень простой — при клике заголовок меняет свой размер, цвет и подчеркивается. Можно добавить жизни (Руслан, привет ) и сделать анимацию смены цвета заголовка:
H1 { font: 30px Arial sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; }
Подсвечивать активный заголовок дело хорошее, но как быть, если нужно изменить оформление текста, идущего за ним? CSS дает нам такую возможность. Выглядит это следующим образом:
H1:target + p { background: #eaeaea; padding: 10px; }
В данном случае, плюс означает, что стиль должен быть применен для следующего за заголовком абзаца. Таким образом, при изменении активного заголовка — мы меняем и оформление раздела с текстом, который ему «принадлежит».
Поддержка браузерами
Псевдокласс target относится к третьей редакции CSS и отлично поддерживается всеми браузерами, кроме IE, старше 9 версии Поэтому не стоит его внедрять, если ваша аудитория использует этот браузер. Хотя, выход из положения есть — это Selectvizr, JS библиотека, с помощью которой можно заставить IE работать с CSS3. Просто добавляем скрипт и все, оно работает.
Единственное, если вы не используете у себя JQuery или MooTools — нужно подключить, для работы этого скрипта. На официальном сайте есть таблица, какие библиотеки чего поддерживают. Если будет интересно — почитайте. Это .
Заключение
Использование псевдоклассов может показаться сложным занятием, но как только вы поймете, как они работают — вы сможете делать удивительные вещи, используя только CSS и больше ничего. Псевдокласс:target — отличное тому подтверждение. С его помощью можно кардинально изменить взаимодействие страницы с посетителем. Пример выше — самый простой, но и он добавляет немного интерактивности на страницу. А ведь это всего лишь пара строк кода.
Не переусердствуйте с красотой и поддержкой браузерами и все будет отлично.
Удачного вам дня
target=»_blank используется, чтобы тег открыл ссылку в новом окне. Но что такое target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.
Атрибут target
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Единственная ситуация, в которой это может произойти, если в HTML
использован тег
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов