Изучите HTML и CSS: статья руководства для абсолютного новичка

Поскольку объявление, указывающее, что h2 должен быть белым, приходит позже, оно переопределило предыдущее. Неважно, если вы определили h2 чтобы быть 100 раз синим в вашей таблице стилей; если в последнем определении говорится, что он должен быть белым, то белым будет!

Подводя итоги нашего прогресса

Время для другого передышки. Что мы узнали? Что ж, мы изучили еще несколько стилей, которые вы можете применять в CSS, мы увидели, как вы можете стилизовать определенные элементы в зависимости от их контекста, и недавно мы обсудили, как вы можете группировать элементы, которые нужно стилизовать в так же. Есть одна вещь, к которой мы обратились лишь кратко, но она требует большего внимания, потому что это очень важно для функционирования Интернета. Эта тема ссылки.

Ссылки по стайлингу

Ссылки везде в Интернете: они действительно являются основой всего, что вы видите в Интернете. В настоящее время мы привыкли видеть очень декоративные веб-страницы, украшенные множеством различных изображений и функций. Сделайте шаг назад во времени, и вы обнаружите, что Всемирная паутина была всего лишь набором связанных документов. Вернитесь к самым ранним браузерам, и вы увидите, что эти ссылки были подчеркнуты, что и сегодня так. По умолчанию браузер использует следующую цветовую схему для ссылок:

• синий : не посещенная ссылка
• фиолетовый : ссылка на веб-страницу, которую вы ранее посещали
• красный : активная ссылка (по которой вы щелкаете; возможно, вы заметили, что ссылки мгновенно мигают красным, когда вы нажимаете на них)

Эта цветовая схема не всем по вкусу, но это то, что мы застряли на данный момент. По крайней мере, это то, с чем мы бы застряли, если бы не могли использовать CSS для переопределения этих цветов.

В основном CSS-стиль для ссылок может выглядеть так:

{
вес шрифта: жирный;
черный цвет;
}

Теперь, вместо того, чтобы быть синим и иметь нормальный вес шрифта, ваши ссылки отображаются жирным, черным шрифтом. Попробуйте добавить это в свой файл style1.css , затем сохраните его и посмотрите, как это повлияет на ваши веб-страницы — это иллюстрирует рисунок 3.13, «Стилизация всех ссылок в нашей навигации на жирный и черный».

Состояния связи

Как я упоминал ранее, на веб-странице вы можете встретить ссылки различных типов (не посещенные, посещенные, активные). Есть еще одно состояние, которое я не упомянул, но это, с которым вы, вероятно, знакомы: состояние при наведении (возникает, когда вы наводите курсор на ссылку). В CSS вы можете изменить стиль всех этих состояний ссылок, используя псевдоклассы , что звучит сложно, но на самом деле довольно просто. Вы можете думать о псевдоклассе как о внутреннем классе, который браузер автоматически применяет к ссылке, когда она находится в определенном состоянии. Вот некоторый CSS, который показывает схему цвета / стиля для различных состояний ссылки:

{
вес шрифта: жирный;
}

a: link {
черный цвет;
}

a: посетил {
цвет: серый;
}

a: hover {
текстовое оформление: нет;
цвет белый;
цвет фона: темно-синий;
}

a: active {
цвет: аква;
цвет фона: темно-синий;
}

Различные состояния рассматриваются в CSS с помощью селектора элемента a и путем добавления двоеточия (:) и link псевдоклассов, visited , hover и active . Добавление псевдоклассов в таблицу стилей означает, что браузер применяет правило, когда элемент находится в состоянии, указанном псевдоклассом.

Совет: приведение в порядок состояний ссылок

Браузеры обычно не заботятся о порядке, в котором вы указываете правила в своем CSS-файле, но ссылки всегда должны указываться в указанном выше порядке: link , visited , hover и active . Постарайтесь запомнить буквы LVHA. Более циничным пользователям может быть легче запомнить эту мнемонику с фразой «Любовь? Ха! »Мы можем поблагодарить Джеффри Зельдмана за этот маленький драгоценный камень. (Проектирование с использованием веб-стандартов, Джеффри Зельдман, New Riders.)

Давайте изменим стили для разных состояний ссылок на нашем сайте проекта:

• Откройте файл CSS сайта проекта ( style1.css ) и добавьте указанный выше CSS внизу файла.
• Сохраните файл CSS.
• Откройте любую из трех веб-страниц в своем браузере (или нажмите «Перезагрузить»), чтобы увидеть, как отображаются стилизованные ссылки.

На приведенном ниже рисунке показаны три разных состояния ссылки: домашняя ссылка не посещается, ссылка на страницу «О нас» показывает, что она была посещена ранее (показана серым цветом), а ссылка на страницу «Контакты» находится под контролем курсор пользователя.

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

Совет: очистка вашей истории

Ваш браузер автоматически сохраняет определенное количество истории посещенных страниц и использует эту информацию, чтобы решить, была ли ссылка посещена или нет (и, следовательно, как должна отображаться ссылка). Если вы создаете сайт и тестируете ссылки, вы можете проверить, как выглядит не посещенная ссылка, но из-за вашей истории посещений они могут отображаться как посещенные. Это почти наверняка имеет место с нашим трехстраничным сайтом проекта — ссылки в вашем списке навигации, вероятно, все серые. Чтобы сбросить это, вы можете очистить историю вашего браузера. В IE выберите Сервис> Свойства обозревателя. В разделе «История просмотров» вы увидите кнопку «Удалить». Нажмите на нее, и появится диалоговое окно «Удалить историю просмотров» с дополнительными параметрами, как показано на рис. 3.15: «Очистка истории в IE снова отображает не посещенные стили ссылок»; убедитесь, что флажок «История» отмечен, затем нажмите кнопку «Удалить» в этом диалоговом окне. После этого перезагрузите веб-страницу. Любые ссылки, которые вы возможно посетили, теперь будут отображаться как не посещенные. (Процесс очистки истории в более старых версиях немного проще — просто найдите кнопку в диалоговом окне «Свойства обозревателя», которая говорит «Очистить историю»).

Другие браузеры имеют аналогичные параметры, которые можно найти в таких местах, как Инструменты> Параметры или Предпочтения> Конфиденциальность. Я не буду перечислять здесь все различные способы удаления вашей истории из разных браузеров, но если вы покопаетесь, то сможете найти их без особых затруднений.