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.

К началу


 

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

78636. Менеджмент: сущность, виды и методы 36.5 KB
  Менеджмент – область управленческой и хозяйственной деятельности обеспечивающей рациональное управление экономическими процессами организации систем управления и его совершенствования в соответствии задачам социальноэкономического развития. Менеджер – это специалист которого нанимают для организации и управления какимто участком для осуществления управленческой деятельности. Методы управления – способы формы воздействия руководителя на подчиненных: 1. Интеграционный Интеграционный подход к менеджменту нацелен на исследование и усиление...
78637. Планирование и прогнозирование в условиях рыночной экономики 34.5 KB
  Ее обеспечивает государственное регулирование подразумевающее систему взаимодействия государства со всей совокупностью хозяйствующих субъектов с целью координации усилий направленных на решение общенациональных задач социальноэкономического развития. Индикативный план развития национальной экономики определяет и содержит обоснование целей задач направлений и методов реализации государственной социальноэкономической политики. Именно индикативный план выступает той связующей вертикалью которая обеспечивает координацию деятельности...
78638. Ценовая политика предприятия 35.5 KB
  Предлагается учитывать следующие факторы формирующие рыночные цены: Факторы спроса определяющие цену спроса на товар которую предлагает покупатель: Платежеспособный спрос который может выделить покупатель на данный товар; Уровень сбережений которые покупатель делает чтобы не покупать товар; Объем спроса – количество товара которое покупатель способен приобрести при некотором уровне цены; Потребительские свойства товара его качественные характеристики; Полезность товара – способность его удовлетворить потребности потребителя или...
78639. Проблемы развития предпринимательства в России 29 KB
  Одним из ключевых нововведений установленных в Федеральном законе является принципиально новый подход к критериям выделения субъектов малого и среднего предпринимательства. Согласно нормам Федерального закона к субъектам малого предпринимательства относятся внесенные в единый государственный реестр...
78640. Жизненный цикл товара, его экономический смысл 24.5 KB
  Иcxoдными днными для пpинятия peшeний пpи pзpбoткe или кoppeктиpoвкe пpoдyктoвoй пoлитики являeтcя нлиз жизнeннoгo цикл тoвp н pынкe кoтopый пpeдcтвляeт coбoй мoдeль pынoчнoй peкции oтpжeннoй в пpмeтpx вpeмeни и cтoимocтныx пoкзтeляx. Зня зкoнoмepнocти pзвития жизнeннoгo цикл oтдeльныx гpyпп видoв тoвpoв и пpoгнoзы длитeльнocти oтдeльныx eгo фз пpeдпpиятиe мoжeт oпpeдeлить мoмeнт нчл НИОКР зпycк в пpoизвoдcтвo и внeдpeния н pынoк нoвыx издeлий и мoдepнизции cyщecтвyющиx вpeмя yxoд c дннoгo pынк ycтpeвшиx нe пoльзyющиxcя cпpocoм...
78642. Предпринимательские риски, их оценка и пути снижения 32.5 KB
  Внешние факторы влияющие на уровень предпринимательского риска подразделяются на две группы: факторы прямого воздействия и факторы косвенного воздействия. Факторы прямого воздействия непосредственно влияют на результаты предпринимательской деятельности и уровень риска. Факторы косвенного воздействия не могут оказывать прямого влияния на предпринимательскую деятельность и уровень риска но способствуют его изменению. Каждая предпринимательская фирма имеет собственные предпочтения деятельности направленно связанные с риском и на основе...
78643. Конкурентоспособность в предпринимательстве и пути ее повышения 30.5 KB
  Все факторы конкурентоспособности предприятия М. Вопервых факторы конкурентоспособности предприятия делятся на: основные; развитые. Основные факторы – это природные ресурсы климатические условия географическое положение страны неквалифицированная и полуквалифицированная рабочая сила. Развитые факторы – современная инфраструктура обмена информацией высококвалифицированные кадры использование высокотехнологичных производств.
78644. Структура и сегментирование рынков в маркетинге 30.5 KB
  Углубленное исследование рынка предполагает необходимость ее рассмотрения как дефиринцированной структуры в зависимости от групп потребителей и потребительских свойств товара что в широком смысле определяет понятие рыночной сегментации. Рыночная сегментация представляет собой с одной стороны метод для нахождения частей рынка и определения объектов на которые направлена маркетинговая деятельность предприятия. Под сегментацией понимается разделение рынка на сегменты различающиеся своими параметрами или реакцией на те или иные виды...