Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Глава 8.13. Ссылки, подчёркивания
Здесь мы будем говорить об активных элементах. Не обязательно они должны верстаться именно тегом <a>, они вполне могут быть «кнопками», если таково их предназначение с точки зрения семантики. Основные атрибуты, которые характерны для ссылок: · href="#" — собственно ссылка (на внешнюю страницу или якорь); · target="_blank" — цель, в этом значении — открытие в новом окне; · download — скачивание файла, на который ведёт ссылка; · rel="nofollow" — ссылка ведёт на материал, с которым поисковые роботы не должны ассоциировать ваш сайт. Комментарий Google по этому поводу; · lang="fr" — по ссылке контент на французском языке. Коды языков: IANA Language Subtag Registry; · hreflang="de" — означает, что по ссылке — дубликат страницы на немецком. Комментарий Google по этому поводу; · type="text/html" — указывает на MIME-тип материала по ссылке. Список MIME-типов. Самое важное в работе со ссылками — не испортить дизайном юзабильность (удобство в использовании). А именно: с первого взгляда на сайт должно быть ясно, где именно у него активные элементы. И это должно подтверждаться при изменении состояния, то есть должны быть продуманы и внятно воплощены стили для псевдоклассов:hover,:active,:visited и:focus. У:focus, например, есть стили по умолчанию, они несколько отличаются от браузера к браузеру. Значения состояний: ·:hover — наведение мыши; ·:active — клик (мышью или с клавиатуры); ·:visited — посещённая ссылка; ·:focus — ссылка выбрана при переключении с клавиатуры. Традиционно ссылка имеет отличающийся цвет и/или подчёркивание. Иногда — и то и другое. Может быть фон, например, с обводкой, или даже градиентом. В работе со ссылками используются селекторы атрибутов, которые позволяют выбрать типы селекторов. Это позволяет декорировать ссылки не по классам, а по их содержанию, отделить ссылки для скачивания от ссылок на страницы внутри сайта и на внешние ресурсы.
a[href*="css"] /* Применится к ссылкам, в URL которых есть сочетание букв css */ a[href^="https://"] /* Применится к ссылкам, которые начинаются с https:// */ a[href$=".jpeg"] /* Применится к ссылкам, которые заканчиваются на.jpeg */ a[type="image/jpeg"] /* Применится к ссылкам, которые помечены атрибутом type как jpeg или jpg */ Работать с селекторами такого типа мы учим в главе «Селекторы, часть 3» интерактивных курсов.
Ссылка на номер телефона размечается с помощью специального префикса перед адресом ссылки — tel:. <a href="tel:+79123456789">8-912-345-67-89</a> Стилизоваться такая ссылка может с помощью CSS-селектора a[href^="tel:"]. a[href^="tel:"] { font-size: 16px; line-height: 32px; text-decoration: none; color: #000000; } Ссылка на электронную почту обычно в HTML размечается похожим образом: в адресе ставится префикс mailto:. <a href="mailto:12345@gmail.com">123456@gmail.com</a> Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^="mailto:"]. a[href^="mailto:"] { font-size: 16px; line-height: 32px; color: #000000; } Пример нескольких ссылок в одном параграфе: <p> «У многих <a href="https://cats.info" target="_blank">котов</a> прямо на морде написано, что они Настоящие. Если вам попадётся на глаза кот <a href="img/this-look.jpg">такой</a> наружности, будто ему зажали голову в тиски и несколько раз двинули по морде молотком, обёрнутым в тряпку, можете не сомневаться: перед вами Настоящий кот». (<cite>The Unadulterated Cat, <a href="autors/pratchett.html">Терри Пратчетт</a></cite>) </p> Разберём подчёркивания. Чтобы убрать стандартное подчёркивание — применим text-decoration: none;. Обычно для ссылок применяется ограниченное количество стилистических приёмов, а задуманных для этого свойств и того меньше. В их числе новое свойство text-decoration-style. Давно знакомое нам свойство text-decoration стало составным, позволяя управлять оформлением текста более детализированно. Пока не все свойства text-decoration работают хорошо. Например, text-decoration-skip, которое должно заставить пропускать пробелы или определённые элементы, пока работает только в Safari. Свойство text-decoration-thickness, позволяющее задавать толщину, тоже работает пока что не везде. Проверяйте в CanIUse.
.link { text-decoration: underline; /* Показывает, что текст подчёркнут */ text-decoration-color: #da5530; /* Цвет линии */ text-decoration-style: double; /* Стиль линии — двойной */ text-decoration-skip-ink: auto; /* Пропускает элементы шрифта */ text-underline-position: auto; /* Со значением under линии опустились бы ниже */ } Значения text-decoration-style · solid — сплошная линия; · double — двойная сплошная линия; · wavy — волнистая линия; · dotted — точки;
· dashed — штрихи. Свойства box-shadow или border-bottom позволяют сделать подчёркивание другого цвета и даже с изысками. Проблема только в том, что это «костыль», расположение линии, сделанной таким образом, зависит от интерлиньяжа, и если шрифт увеличить, а интерлиньяж задан в абсолютных единицах, то подчёркивание может превратиться в зачёркивание.
.link { text-decoration: none; border-bottom: 2px solid #da5530; font-size: 16px; line-height: 18px; } Так могла бы выглядеть часть технического задания, посвящённая ссылкам
a { text-decoration: none; font-family: "Montserrat", "Arial", sans-serif; font-style: normal; font-weight: normal; font-size: 16px; line-height: 20px; color: #0083ff; }
a:visited { color: #8d00bf; }
a:hover { color: #0063bf; border-bottom: 1px solid #0063bf; cursor: pointer; }
a:active { padding: 10px; border: 2px solid rgba(0, 131, 255, 0.4); box-sizing: border-box; border-radius: 2px; } Замечание Для состояний ссылок очень важно соблюсти порядок, в котором будут записаны селекторы с псевдоклассами. Обязательно размещайте их в следующей последовательности: a { color: red; } a:visited { color: grey; } a:hover { color: blue; } a:active { background-color: yellow; } Если поменять строки местами, то согласно правилам каскадности, некоторые стили перестанут работать. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в:visited и в:hover, и если расположить стили для:hover выше, чем стили для:visited, то они перекроют последние. Важно сделать декорирование ссылок таким, чтобы пользователю было очевидно, что перед ним именно активный элемент, на который нужно нажать. Можно изменить вид курсора. Самое стандартное — сделать при наведении курсор в виде руки: cursor: pointer;, его хорошо и правильно делать при наведении на ссылку, это позволяет пользователю понять, что элемент кликабельный. Такая стилизация ссылок есть в браузерах по умолчанию. Как мы уже знаем по семантической разметке, не всё, что выглядит как кнопка, должно верстаться тегом <button>. Обычно кнопки оформляются с помощью внутренних отступов, рамок и фонов. Текст кнопки должен быть коротким, ёмким и призывным. Если ваш текст не помещается в кнопку — текст следует сократить, и точно не стоит переносить его на новую строку. Зачастую максимальные размеры кнопки специально ограничивают. Кнопка обычно выглядит довольно ярко и может отвлекать от собственно текста. Методика~ 3 минуты
|
||||||
Последнее изменение этой страницы: 2021-01-14; просмотров: 84; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.223.21.5 (0.011 с.) |