12785

Ссылки. Что такое псевдокласс

Практическая работа

Информатика, кибернетика и программирование

Ссылки Всё изученное в предыдущих уроках вы можете применять и для ссылок/links например изменять шрифт цвет подчёркивание и т. д. Новым будет то что в CSS эти свойства можно определять поразному в зависимости от того посетили уже ссылку активна ли она находится ли указ...

Русский

2013-05-03

15.12 KB

2 чел.

Ссылки

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.

Что такое псевдокласс?

Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.

Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.  В CSS мы также можем использовать a в качестве селектора:

a {

color: blue;

}

Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.

a:link {

color: blue;

}

a:visited {

color: red;

}

Используйте a:link и a:visited для посещённых и непосещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.

Теперь рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.

Псевдокласс: link

Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.

В примере кода непосещённые ссылки - синие.

a:link {

color: #6699CC;

}

  •  Показать пример 

Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.

a:visited {

color: #660099;

}

  •  Показать пример 

Псевдокласс: active

Псевдокласс :active используется для активных ссылок.

В примере активные ссылки имеют жёлтый фон.

a:active {

background-color: #FFFF00;

}

  •  Показать пример 

Псевдокласс: hover

Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.

Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:

a:hover {

color: orange;

font-style: italic;

}

  •  Показать пример 

Пример 1: Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.

Пример 1a: Расстояние между буквами

Как вы помните из 3 Лабораторной, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

}

  •  Показать пример 

Пример 1b: UPPERCASE и lowercase

В прошлой лабораторной мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue; 

background-color:yellow;

}

  •  Показать пример 

Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!

Пример 2: Удаление подчёркивания ссылок

Обычный вопрос - как удалить подчёркивание ссылок?

Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта.

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

a {

text-decoration:none;

}

Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.

a:link {

color: blue;

text-decoration:none;

}

a:visited {

color: purple;

text-decoration:none;

}

a:active {

background-color: yellow;

text-decoration:none;

}

a:hover {

color:red;

text-decoration:none;

}

Задание: сделайте рассмотренный выше пример самостоятельно

Резюме

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

К началу


 

А также другие работы, которые могут Вас заинтересовать

40515. Былички 21.5 KB
  Былички. Былички истории о покойниках леших домовых память о древнеславянской мифологии. Былички мифологические рассказы о духах природы и домашнего очага. По композиции былички: мемораты воспоминания о встрече; фабулаты есть сюжет повествование.
40516. ГЕНЕАЛОГИЧЕСКАЯ КЛАССИФИКАЦИЯ ЯЗЫКОВ 320 KB
  Шаповал ГЕНЕАЛОГИЧЕСКАЯ КЛАССИФИКАЦИЯ ЯЗЫКОВ Новосибирск 2002. ОСНОВНЫЕ ПОЛОЖЕНИЯ ГЕНЕАЛОГИЧЕСКОЙ КЛАССИФИКАЦИИ ЯЗЫКОВ Понятие генеалогической классификации Генеалогическая классификация основана на определении родственных отношений между языками. При этом доказывается общность происхождения родственных языков и демонстрируется их развитие из единого часто реконструируемого специальными способами языка который получает название праязык. При генеалогической классификации языков прежде всего выясняется степень их родственных отношений и...
40517. Классификация согласных по различным признакам 24 KB
  2 По способу образования по характеру преграды: смычные взрывные: чистые смычные например: [б] [г]. аффрикаты смычнощелевые например: [ц] [ч]. вибранты дрожащие например: [р] щелевые фрикативные однофокусные например: [j] [ф] [в] двухфокусные сложные щелевые шипящие щель образуется в двух местах. 3 По месту образования по активному органу: губные: губногубные билабиальные например : [п] губнозубные лабиодентальные например: [ф] язычные: переднеязычные: зубные например: [т]...
40518. Линейное членение звукового потока. Суперсегментные фонетические явления 30 KB
  Слоговые подходы к выделению и определению. Членение речевого потока на слоги происходит во всех языках мира. Слог минимальная произносительная единица речи состоит из одного или нескольких звуков. Методы выделения слога: Слог представляет звукосочетание за один выдох.
40520. Мёртвый язык 203.5 KB
  Обычно такое происходит когда один язык полностью заменяется другим языком как например коптский язык был заменён арабским а множество исконных американских языков были вытеснены английским французским испанским и португальским языками. Точная смерть языка также наступает в том случае когда язык претерпевает эволюцию и развивается в другой язык или даже в группу языков. Примером такого языка служит латинский язык мёртвый язык который является предком современных романских языков.
40521. Морфологическая классификация языков мира 22.5 KB
  Морфологическая классификация языков мира. выделял два типа языков: флективные корни изменяются нефлективные агглютинирующие механически связаны части слова.: предложил ввести третий тип языков: аморфные без грамматической структуры разделил флективные на синтетические и аналитические. фон Гумбольдт Учение о внутренней форме языка: ввел четвертый тип языков: инкорпорирующие полисинтетические уточнил понятие флективный язык: Шлегели менялась внутренняя флексия Гумбольдт включил фузионные аффиксальные языки ...
40522. Основные стадии развития письма 27.5 KB
  Письмо знаковая система фиксации речи передает информацию на расстоянии и времени. Первый этап развития начертательного письма письмо рисунками. Плюсы: в современных культурах пиктография вспомогательное средство общения : комиксы эмблемы на документах обучение детей помогает при международном общении при общении с неграмотными Идеография логография письмо понятиями отображение содержания с помощью символов. Древнеегипетское шумерское письмо.
40523. Принципы классификации звуков речи. Гласные и согласные 20.5 KB
  Гласные и согласные. акустический Гласные состоят из тона согласные либо из шума либо из шума тона. артикуляторный 1 при образовании гласных напрягается весь речевой аппарат при образовании согласных напряжение локализовано 2 по силе выдыхаемой воздушной струи при образовании гласных голосовая струя слабее 3 Функционально различаются по роли в слоге гласные слогообразующие согласные примыкают к ним 4 По сочетаемости.