Исчезает блок при target css. Гиперссылка — что это такое, как сделать ссылку и вставить в HTML код (href, target blank и другие атрибуты тега a). Как убрать подчеркивание и изменить цвет ссылки
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . В XHTML применение этого атрибута запрещено.
Синтаксис
...Обязательный атрибут
Значения
В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
Blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .
HTML5 IE Cr Op Sa Fx
Открыть в новом окне
В Сети можно легко найти множество уроков с применением псевдокласса: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 — отличное тому подтверждение. С его помощью можно кардинально изменить взаимодействие страницы с посетителем. Пример выше — самый простой, но и он добавляет немного интерактивности на страницу. А ведь это всего лишь пара строк кода.
Не переусердствуйте с красотой и поддержкой браузерами и все будет отлично.
Удачного вам дня
Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target . Но что если его нельзя использовать? Есть другой метод.
Посмотрите демонстрацию. Она полностью выполнена на CSS, ни строчки кода JavaScript. В основе лежит оригинальное использование селекторов:active и:hover.
Описание
Сначала нужно создать контейнер, который будет содержать кнопку и блоки, выводимые по нажатию мыши. Структура разметки будет примерно такой:
Нужно сделать.content невидимым до тех пор, пока не нажата кнопка мыши на.wrapper . Для решения задачи установим для.content свойство display: none . Затем при нажатии кнопки мыши на.wrapper , будем включать для.content свойство display: block . Для чего установим для.wrapper:active .content свойство display: block . В таком состоянии.content будет видим только когда кнопка мыши нажата. Если ее отпустить, .content снова исчезнет. Для фиксации сделаем так, чтобы при нахождении курсора мыши над.content , элементу присваивалось свойство display: block . То есть устанавливаем для.content:hover свойство display: block . Код CSS будет иметь вид:
Content { display: none; } .wrapper:active .content { display: block; } .content:hover { display: block; }
Остается только "причесать" внешний вид и придать ему наглядности:
Wrapper { position: relative; } .button { background: yellow; height: 20px; width: 150px; } .content { position: absolute; padding-top: 20px; } .content li { background: red; }
Текст кнопки в выше приведенном коде будет иметь желтый фон, а выводимая по нажатию кнопки мыши информация - красный фон.
target=»_blank используется, чтобы тег открыл ссылку в новом окне. Но что такое target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.
Атрибут target
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Единственная ситуация, в которой это может произойти, если в HTML
использован тег
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов