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.

К началу


 

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

52937. Подорож по країні Excel. Введення та редагування даних різного типу. Автозаповнення. Копіювання, переміщення, вилучення, форматування таблиці 205.5 KB
  Домашнє завдання на наступний урок та інструктаж щодо його виконання: Достатній рівень: надр.процесорі таблицю Календар на 2011 рік Високий рівень: робота над проектом Розробка системи електронних таблиць що буде забезпечувати роботу певного магазину і складу при ньому 1 таблиця Прайслист товарів послуг в різній валюті. Д Зберегти виконане завдання до своєї папки з ім'ям Розрахунки Домашнє завдання: Достатній рівень: надр.процесорі таблицю Календар на 2011 рік Високий рівень: робота над проектом Розробка...
52938. Екскурсія до військово – історичного музею Повітряних Сил Збройних Сил України 8.52 MB
  Вінниця 2012 Тема: Екскурсія до військово історичного музею Повітряних Сил Збройних Сил України. Хід екскурсії Сьогодні експозиція музею Повітряних Сил Збройних Сил України нараховує 41 експонат військової техніки а у фонді налічується більше 2000 предметів. Колективом музею створено декілька тематичних експозицій: âВінничани Герої Радянського Союзуâ â43тя Ракетна армія та Ракетні війська стратегічного призначенняâ âІсторія створення ВійськовоПовітряних Силâ âІсторія військ Протиповітряної оборониâ âАвіаційна...
52939. ЕКСКУРСІЯ ПО МІСТАМ УКРАЇНИ 147.5 KB
  T. The last time we spoke about Zaporizhyan Sich and Zaporizhya, the city closely connected with Zaporizhyan Sich. But in the history of our Motherland there were very many other historical events. Today we’ll start our talk about Ukrainian towns and cities.
52940. Эйдетические формы обучения русскому языку 179.5 KB
  Владимир Троицкий А когда уроки для нас становятся светлыми и радостными праздниками Когда они проходят интересно плодотворно на одном дыхании Наверное когда у вас всё получается когда всё понимаете и запоминаете и эти знания вы можете применить на практике. Уже 17 лет на каждом уроке русского языка я провожу такой эксперемент используя различные формы и методы развития образной памяти и всякий раз убеждаюсь что применение эйдетической...
52941. Перетворюємо навчання у захоплюючу творчу гру 764 KB
  Синий слон Оранжевый арбуз Голубой газета Желтый жук Красный карандаш Зеленый замок Фиолетовый фрукты Белый бант Чёрный часы Учитель называет слова один раз ученики повторяют в такой же последовательности а потом в разброс. Начинают игру словами: Бабушка укладывает в свой чемодан. Заучування вірша за піктограмами і словами вчителя. Етап проектування і покладання мети Давайте пригадаємо: що таке ейдетика Які прийоми ейдетики ми використовуємо щоб краще запамятати слова Цифри Сьогодні використовуючи різні...
52942. Задачі Ейлера 2.09 MB
  Захоплення математикою здебільшого починається з міркування над якоюсь цікавою задачею. Вона може зустрітися на уроці, на заняті математичного гуртка, в математичній літературі. Завдання сучасної школи виховати творчу особистість. Знання, навички уміння здобувають в результаті власної активної діяльності.
52943. Використання ігрового методу навчання іноземної мови на прикладі казок. Тестові завдання 49 KB
  A beautiful princess lives in a palace with her father the King and her seven sisters. She has got a golden ball. Every day she plays with her ball in the garden of the palace. There is a deep, dark pond in the garden. When the weather is hot, the princess likes to play near the pond. One day she drops her ball into the pond.
52944. 10 самых интересных фактов об автомате Калашникова 23 KB
  Его официальное название 762мм автомат Калашникова образца 1947 года АК47. В США автомат Калашникова можно приобрести за 70350 долларов. Автомат Калашникова входит в Книгу рекордов Гиннесса как самое распространенное оружие в мире.