Ссылки
Цвет ссылки устанавливается через свойство color , которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover , а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition , значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
Как заголовок сделать ссылкой?
В блогах заголовок сообщения обычно служит и ссылкой на полный текст. Чтобы заголовок, который создаётся с помощью тега превратить в ссылку, следует текст обернуть тегом . В HTML5 порядок тегов не имеет значения, поэтому блочный элемент можно вставить внутрь строчного элемента , но в HTML4 и XHTML тег обязан находиться внутри , но никак не наоборот.
Как сделать, чтобы слой целиком был ссылкой?
При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя.
Как открыть ссылку в новом окне?
По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank .
Как добавить рисунок к внешним ссылкам?
Внешними называются ссылки, которые ведут на другой сайт. Чтобы пользователь мог отличить такие ссылки от обычных, к внешним ссылкам добавляют небольшой рисунок (например, такой ), который информирует о том, что ссылка указывает на другой ресурс.
Для изменения стиля ссылок создадим новый стилевой класс external и для него добавим рисунок в виде фона с помощью свойства background . При этом следует указать значение no-repeat , чтобы фон не повторялся.
Как добавить пунктирное подчеркивание к ссылкам?
Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчеркивание у ссылок с помощью свойства text-decoration со значением none .
Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?
Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью атрибута class применяем его к желаемым тегам .
Как на странице сделать ссылки разных цветов?
Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На темном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.
Как изменить вид ссылки при наведении на нее курсора мыши?
Псевдокласс :hover , который добавляется к селектору A , как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A , потом через двоеточие hover .
Как установить цвет посещённой ссылки?
Чтобы задать вид оформления посещенных ссылок, используйте псевдокласс :visited , который через двоеточие добавляется к селектору A , как показано в примере 1.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как в html поменять цвет ссылки: Как изменить цвет ссылки и фона под ней?
Возможность изменения цвета ссылок одна из важных составляющих HTML-верстки. Ведь это позволяет не только грамотно вписать ссылки в дизайн сайта, но и помогает посетителям ориентироваться в его навигации. В уроке Ссылки и их разновидности вы узнали, что такое посещенные, непосещенные, активные ссылки и ссылки при наведении курсора мыши. Теперь вы научитесь менять цвет ссылок в каждом из этих состояний.
В старых версиях HTML существовали специальные атрибуты тега , позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style, а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы () вставить тег , а внутри него указать один или несколько следующих стилей:
C тегом вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.
Пример изменения цвета ссылок в HTML-странице
Изменение цвета ссылок на странице a:link a:visited a:hover a:activeru/">Как создать сайт
Справочники по HTML и CSS
Результат в браузере
Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.
Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега атрибут и задайте нужный цвет.
Пример использования тегов
Изменение цвета ссылок на странице a:link a:visited a:hover a:activeСайт Seodon. ru
Здесь вы можете найти справочник по тегам HTML
Результат в браузере
- Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
- Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
- В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
- Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.
Посмотреть результат → Посмотреть ответ
| Cсылки и их разновидности | ← Содержание → | Ссылки на электронную почту |
Как изменить цвет ссылок — Жизнь с WordPress
Здравствуйте, дамы и господа!
Сегодня мы займемся вопросом красоты.
(Постоянные читатели блога могут обновить кэш браузера Ctrl+F5 для актуализации внешнего вида блога. )
Ранее, в нескольких статьях я уже описывал некоторые изменения, касающиеся внешнего вида сайта.
1. Изменяем стиль заголовка h3
2. Как изменить стиль отдельного пункта меню или отдельной рубрики
3. Как изменить заголовок на странице рубрики
4. Изменяем шрифт заголовка статей
5. Оформление формы подписки по email
Сейчас хочу изменить цвет ссылок на блоге и рассказать вам как это сделать.
Вот так выглядели ссылки на этом сайте до внесения изменений:
Как видите, достаточно бледно и незаметно. Наверное, если б не указал на эти ссылки стрелками, то из трех ссылок можно было заметить только “Читать далее”, и то потому что она выделена жирным шрифтом.
Здесь сразу приведу скрин того, что у меня получилось после изменения цвета и стиля ссылок, чтобы можно было сравнить вариант “до” и “после”.
В этом скриншоте уже не пришлось показывать стрелками где ссылки.
А какой вам вариант нравится больше?
Конечно, я люблю минималистические темы, но в выбранном шаблоне оказались слишком незаметные ссылки. Иногда, в статьях приходилось выделять их жирным, но вид таких ссылок все-равно меня не устроил. И вот, наконец-то, я сообразил, что нужно просто изменить цвет ссылок.
Задумано – сделано. То как преобразился вид моего блога мне очень понравилось! Казалось бы такая мелочь – цвет ссылок – небольшие изменения в css-файле, а какой эффект!
Это вызвало у меня ассоциацию с макияжем у девушек. =) А если проводить более точную аналогию, то именно с подкрашивание ресниц и подчеркиванием контура глаз с помощью карандаша. (Я вот тоже подчеркнул ссылки.)
Ладно, давайте ближе к делу, что и где я изменил.
Наверняка, вы уже знаете, да и я ни один раз уже писал, что все изменения стилей производятся в файле(ах) *.css вашего шаблона WordPress. Это может быть файл
style.css, а может быть другой(ие). Чтобы узнать это точно, нужно в браузере посмотреть код элемента ссылки.
1. Название css-файла, в котором описаны стили для ссылки (style. css).
2. При наведение указателя мыши на style.css всплывает подсказка с указанием абсолютного пути к файлу и номером строки в которой описан стиль для анализируемого элемента веб-страницы.
3. Собственно, цвет ссылки.
Какая мощная вещь – анализ кода! Все ясно – заходи в указанный файл и изменяй цвет. Но, давайте не будем спешить! Дело в том, что изменение значения цвета в указанной строке изменит цвет всех ссылок сайта.
Если вам это и надо – изменить цвет для всех ссылок сайта, то отлично. Подбирайте нужный цвет и вносите соответствующее изменение в ваш css файл.
Я же хочу оставить черным цветом ссылки в сайдбаре и ссылки-заголовки статей. Единственное – при наведении курсора сделать их зелеными. В содержимом же статьи изменить цвет на более светлый синий и так же при наведении указателя мыши – изменять на зеленый цвет.
Опять с помощью анализа элемента выясняю, что все ссылки, которые я хочу сделать светло-синими расположены в блоке
Чтобы изменения коснулись только ссылок внутри блока с нужно при описании стиля написать #content a. Собственно, вот стили, которые я добавил:
border–bottom: 1px solid #c0e4fc;
border–bottom: 1px solid #77c069;
color – понятно – цвет
border-bottom – граница снизу (подчеркивание), сплошное шириной в 1px, заданного цвета
padding-bottom – отступ от текста ссылки до нижней границы.
a:hover – означает, что стиль будет применен при наведении курсора мыши на ссылку.
Далее, у меня получилось, что ссылки-заголовки статей тоже расположены в блоке .title a. Это означает – для всех ссылок внутри блоков с классом Но, приоритет селектора
#content a выше, поэтому стили #content a перекрывали стили .title a.
Чтобы этого не происходило, я добавил #content перед .title a. Теперь все .title a внутри #content получат свой собственный стиль, отличный от #content a:
#content .title a
#content .title a:hover
И для полноты описания всех, сделанных мной, изменений приведу еще один откорректированный стиль. Он касается ссылок в сайдбаре.
border–bottom: 1px solid #77c069;
Теперь, при наведенном указателе мыши, ссылки в сайдбаре будут зелеными (с подчеркиванием).
Итак, подведем итог.
Для изменения цвета ссылок нужно изменить значение свойства color для соответствующего селектора:
a – все ссылки;
#idname a – все ссылки внутри блока с >
.classname a – все ссылки внутри блока с классом classname.
При этом, приоритет #idname выше, чем у .classname
a:hover – определяет стиль элемента при наведении указателя мыши.
Спасибо за внимание! Надеюсь, понятно изложил. Жду ваших комментариев.
[CSS] — Как изменить цвет ссылки в HTML с помощью CSS —
Узнайте, как настраивать цвета ссылок и применять разные значения цвета к каждой отдельной ссылке с помощью CSS.
���� Технический вопрос
Спросил 4 месяца назад в CSS by Olagunju
как изменить цвет ссылок в моем коде на каждый другой цвет
цвет HTML якорь связь CSS свойство значение
Дополнительные вопросы по кодированию о CSS
���� Технический вопрос
Спросил 1 день назад в CSS by Maria
какой фон: прозрачный;
фон прозрачный Свойства CSS
���� Технический вопрос
Спросил 2 дня назад в CSS Эми
как изменить цвет заголовка в css
CSS цвет рубрика
���� Технический вопрос
Спросил 4 дня назад в CSS от Arron
как мне сделать h4 hover?
УС парить h4 элемент псевдокласс
���� Технический вопрос
Спросил 4 дня назад в CSS по Чиамо
фон с линейным градиентом в css означает
фон линейный градиент КСС
���� Технический вопрос
Спросил 4 дня назад в CSS by Mary
как изменить цвет кнопки
кнопка цвет CSS-код цвет фона
���� Технический вопрос
Спросил 4 дня назад в CSS Киара
как центрировать элементы ul по горизонтали в css
центр ул предметы горизонтально
���� Технический вопрос
Спросил 4 дня назад в CSS by A
как убрать отступы на кнопке
кнопка набивка КСС
���� Технический вопрос
Спросил 4 дня назад в CSS Марта
как переместить кнопку немного вправо
CSS позиционирование допуск слева
���� Технический вопрос
Спросил 4 дня назад в CSS Евой
что делает display: block?
дисплей блокировать в соответствии блочный уровень ширина высота набивка поля
���� Технический вопрос
Спросил 4 дня назад в CSS к кануну
как увеличить интервал между символами в css
интервал между символами CSS межбуквенный интервал
���� Технический вопрос
Спросил 5 дней назад в CSS by Arron
как навести ссылку?
УС связь парить псевдокласс
���� Технический вопрос
Спросил 5 дней назад в CSS Аррон
как добавить тень к моей кнопке?
кнопка тень CSS коробка-тень
���� Технический вопрос
Спросил 5 дней назад в CSS by Jana
Что означает курсор в CSS.
УС свойство курсора курсор мыши указатель по умолчанию помощь
���� Технический вопрос
Спросил 5 дней назад в CSS Алисия
как оформить кнопку
стиль кнопка HTML CSS набивка граница курсор размер шрифта эффект наведения
���� Технический вопрос
Спросил 5 дней назад в CSS by Thembekile
Как сделать переход при наведении кнопки?
кнопка переход при наведении КСС
���� Технический вопрос
Спросил 5 дней назад в CSS Oswaldo
Как предотвратить подчеркивание ссылки после нажатия?
ссылка подчеркнуть CSS украшение текста посетил состояние
���� Технический вопрос
Спросил 6 дней назад в CSS от Kiara
как настроить макет нескольких карт
пользовательский макет карты CSS флексбокс CSS-сетка
���� Технический вопрос
Спросил 6 дней назад в CSS by Kiara
как сделать перенос текста в css
CSS перенос текста перенос слова переполнение-обертка
���� Технический вопрос
Спросил 6 дней назад в CSS Ян
что делает переполнение в css
переполнение Свойство CSS вырезка содержимого полосы прокрутки
���� Технический вопрос
Спросил 6 дней назад в CSS by Veronica
как вставить картинку для фона в css
background-image фоновый повтор размер фона фоновая позиция
���� Технический вопрос
Спросил 7 дней назад в CSS Сара
как убрать подчеркивание в кнопке
кнопка подчеркнуть CSS текст-украшение
���� Технический вопрос
Спросил 7 дней назад в CSS Киара
как прокомментировать в css
���� Технический вопрос
Спросил 7 дней назад в CSS Киара
что такое сетка
сетка Веб-разработка адаптивные макеты CSS-фреймворки бутстрап
���� Технический вопрос
Спросил 7 дней назад в CSS by Laurencia
как добавить тень к кнопке
кнопка коробка-тень КСС
���� Технический вопрос
Спросил 7 дней назад в CSS автор Keitumetse Nirvana Akisa
Я борюсь со своим кодом. Моя кнопка не работает, когда я нажимаю на нее, и я хочу выровнять свое изображение по центру
код устранения неполадок кнопка прослушиватель событий выравнивание изображения Выравнивание по центру CSS
���� Технический вопрос
Спросил 8 дней назад в CSS by Kiara
как убрать подчеркивание из ссылки
удалить подчеркивание связь украшение текста КСС
���� Технический вопрос
Спросил 8 дней назад в CSS Киара
как убрать строку из ссылки
CSS связь украшение текста подчеркнуть удалить
���� Технический вопрос
Спросил 8 дней назад в CSS Киара
как поставить теневую границу вокруг контейнера
CSS теневая граница контейнер
���� Технический вопрос
Спросил 8 дней назад в CSS Кристрис
как создать наведение?
наведение CSS псевдокласс
���� Технический вопрос
Спросил 8 дней назад в CSS Анастасия
как изменить размер шрифта с помощью @media
CSS размер шрифта @медиа
���� Технический вопрос
Спросил 9 дней назад в CSS Ризвана
как подчеркнуть заголовок с помощью css
подчеркнуть заголовок текст-украшение
���� Технический вопрос
Спросил 9 дней назад в CSS by Arianne
как сделать толщину шрифта тонкой
толщину шрифта тонкий Свойство CSS ценить пример кода
���� Технический вопрос
Спросил 9 дней назад в CSS Кристрис
как сделать углы круглыми?
радиус границы Свойство CSS углы округлость CSS-трюки
���� Технический вопрос
Спросил 10 дней назад в CSS Элизабет
Можете ли вы помочь мне понять высоту строки
высота строки Свойство CSS
���� Технический вопрос
Спросил 10 дней назад в CSS Оливия
что такое заполнение
заполнение Веб-разработка CSS единицы измерения пикселей Эмс проценты
���� Технический вопрос
Спросил 10 дней назад в CSS от christrice
как сделать шрифт h2 тонким?
h2 шрифт тонкий CSS вес шрифта
���� Технический вопрос
Спросил 11 дней назад в CSS Жасмин
Могу ли я настроить атрибуты CSS для элемента
?
УС элемент часов css-атрибуты Селекторы CSS цвет высота ширина
���� Технический вопрос
Спросил 11 дней назад в CSS Мишель
Как сделать так, чтобы курсор менялся на курсор щелчка при наведении курсора на кнопку
CSS курсор кнопка наведите
���� Технический вопрос
Спросил 11 дней назад в CSS по christrice
как сделать мои слова большими?
УС размер шрифта
���� Технический вопрос
Спросил 11 дней назад в CSS Ариэль
Что такое высота строки?
высота строки CSS текст космос имущество
���� Технический вопрос
Спросил 11 дней назад в CSS Юлия
Как сделать
полужирным
CSS смелый вес шрифта р элемент сорт ID
���� Инструкции по коду CSS
Спросил 11 дней назад в CSS by Heather
при разрешении менее 768 пикселей выравнивание по центру div
CSS медиа-запрос выравнивание Адаптивный дизайн
���� Технический вопрос
Спросил 11 дней назад в CSS Нил
как мне сделать так, чтобы мой заголовок шел только поверх содержимого, когда я прокручиваю заголовок
положение фиксированное прокрутка HTML КСС
���� Технический вопрос
Спросил 12 дней назад в CSS Аманда
как развернуть кнопку в список
кнопка развернуть кнопка список JavaScript CSS HTML
���� Технический вопрос
Спросил 12 дней назад в CSS by Quinnie
Как изменить ориентацию моего фонового изображения?
фоновое изображение фоновое положение КСС
���� Технический вопрос
Спросил 12 дней назад в CSS от Aneeah
как сделать овальную кнопку
HTML CSS Овальная кнопка
���� Технический вопрос
Спросил 12 дней назад в CSS Джози
моя кнопка обрезается при просмотре моего веб-сайта на мобильном устройстве
CSS медиазапросы Отзывчивый дизайн мобильное устройство кнопка обрезана
���� Технический вопрос
Спросил 12 дней назад в CSS by Sibusisiwe
как добавить тень с помощью css
CSS коробка-тень тень стиль
���� Технический вопрос
Спросил 12 дней назад в CSS от Raquel
Мой CSS не работает с h2 или h3
HTML CSS h2 h3 тег ссылки размер шрифта вес шрифта цвет
���� Технический вопрос
Спросил 12 дней назад в CSS Одри
как центрировать сетку
сетка центр выравнивание содержания align-items
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node. js Рубин Идти .NET
Разочарованы синими ссылками в электронной почте? Покори их навсегда
- Советы и ресурсы
Синие ссылки в электронной почте: они полезны для удобства использования, но слишком часто вызывают головную боль у маркетологов по электронной почте, стремящихся разработать продуманные кампании, ориентированные на бренд.
На протяжении многих лет мы видели множество способов обработки синих ссылок в электронных письмах HTML, от простых до сложных.
Но какие методы работают лучше всего? И как маркетологи могут обеспечить красивый дизайн электронной почты, не жертвуя полезной функциональностью? В этом руководстве мы рассмотрим, что такое синие ссылки, и как лучше всего не допустить, чтобы они испортили ваши электронные письма. Будьте готовы учиться:
- Что такое синие ссылки?
- Следует ли их удалить?
- Как изменить их для каждого почтового клиента
- Пограничные случаи в качестве резерва (и для Outlook)
Осторожно: есть и другие виновники неработающей электронной почты
Делают ли вас ошибки электронной почты вздрогнуть? Синие ссылки — это всего лишь один из способов, которым ваша электронная почта может выглядеть неработающей. Подробно изучите, что может сломать вашу электронную почту, а также советы и рекомендации, чтобы оставаться верным.
Общие проблемы и исправления →
Что такое синие ссылки?
Синие ссылки — это именно то, на что они похожи: текст в электронном письме, который по умолчанию приобретает синий подчеркнутый стиль, характерный для гиперссылок. В электронном маркетинге, особенно на мобильных устройствах, эти синие ссылки автоматически создаются почтовыми клиентами, чтобы предоставить людям возможность сохранять информацию или взаимодействовать с ней.
В последние годы Apple Mail обновила обработку некоторых из этих ссылок и больше не выделяет их синим цветом. Для адресов и времени устройства iOS сохраняют исходный стиль, но добавляют пунктирное подчеркивание, чтобы указать, что они кликабельны.
Хотя это шаг вперед для доступности некоторых проблем с синими ссылками, он не решает всех проблем, поскольку могут быть затронуты не только адреса и время.
Большинство версий Apple Mail для iOS окрашивают телефонные номера, URL-адреса и адреса электронной почты в синий цвет, но оставляют физические адреса и время в исходном стилизованном цвете (красном, в приведенном ниже примере).
В iOS 13 контент по-прежнему связан, но сохраняется исходный цвет стиля:
В нашем тестировании эти вещи являются первыми кандидатами на получение связанного контента (синего или другого цвета):
- Адреса
- Даты
- Адреса электронной почты
- URL-адреса веб-сайтов
- Время 9053 3 номера телефона
Преимущества синие ссылки: удалять их или нет?
В каждом случае связанная информация может быть полезна подписчикам, хотят ли они добавить номер телефона в свой список контактов или найти адрес в Интернете. Хотя синие ссылки раздражают с точки зрения брендинга, на самом деле они удобны для использования и доступности, обеспечивая критически важную функциональность.
Это вызывает споры: должны ли мы вообще переопределять это поведение?
С одной стороны, мы хотим, чтобы дизайн наших электронных писем оставался единым и соответствовал бренду. Почтовые клиенты, переопределяющие наши собственные стили, могут вызвать сюрпризы, разозлить заинтересованные стороны и вызвать проблемы с доступностью. С другой стороны, люди могут полагаться на эту функциональность и ожидать, что они смогут принять меры в отношении информации, содержащейся в электронном письме.
Что же делать емейл-дизайнерам?
По нашему мнению, переопределение стилей— , но не функциональность — таких ссылок — лучший подход. Идеальное решение для синих ссылок должно сохранять способность выполнять действия по этим автоматически сгенерированным ссылкам, но позволять нам стилизовать эти ссылки, а не операционную систему или почтовый клиент.
Кто-то может возразить, что переопределение синего подчеркнутого стиля заходит слишком далеко. Однако поведение по умолчанию имеет серьезные проблемы с доступностью, с которыми мы можем бороться. Например, посмотрите на этот нижний колонтитул письма с синими ссылками, добавленными к адресу:
Это обычный дизайн: белый текст на черном фоне с мелким текстом, чтобы сосредоточить внимание на содержимом над ним. Когда информация связана и применяется синий стиль, контраст становится крайне низким. Людям с нарушениями зрения или людям с отличным зрением, использующим затемненный экран или мобильное устройство в солнечную погоду, будет очень трудно усвоить эту информацию. Полезная функция превращается в разочаровывающий опыт.
Не все почтовые клиенты одинаково относятся к автоматическому связыванию. В то время как синие ссылки являются наиболее распространенным виновником, некоторые клиенты сохраняют цвет шрифта, но добавляют тонкое подчеркивание. Некоторые клиенты связывают номера телефонов, но не адреса. Со всем этим несоответствием управлять может быть неприятно.
Итак, как дизайнеры электронной почты могут работать с синими ссылками?
Лучший способ переопределить стиль автоссылки
Хотя в прошлом мы рассматривали разные решения, такие как нацеливание на обычно связанный текст с помощью диапазонов и классов или вставка невидимых символов в этот текст, чтобы изменить поведение— лучшее решение, которое мы нашли, — это полагаться на встроенный CSS для переопределения автоматического стиля ссылок. Затем добавьте значения, такие как подчеркивание и фирменные цвета, чтобы люди знали, что контент по-прежнему доступен для кликов. Идеально подходит для удобства использования и доступности.
У этого метода много преимуществ. Вы можете:
- Установить собственные стили для текста.
- Используйте разные стили для разных ссылок — это не навязывает один стиль в электронном письме.
- Сохранить функциональность, представленную почтовыми клиентами и операционными системами.
- Легко поддерживать стиль.
Это беспроигрышный вариант как для вас, так и для ваших подписчиков.
Единственный нюанс? Различные почтовые клиенты делают разные вещи при автоматической привязке текста, поэтому вам нужно несколько правил CSS, чтобы переопределить стиль.
В ваших письмах есть синие ссылки?
Всегда знайте, когда почтовые клиенты обновляют свою электронную почту, с помощью Litmus Email Previews. Предварительно просматривайте свои электронные письма во всех популярных почтовых клиентах и устройствах и выявляйте ошибки перед отправкой.
Переопределение синих ссылок в Apple Mail
При создании ссылок вокруг текста Apple Mail добавляет к этим ссылкам дополнительные атрибуты помимо обычного атрибута href. Вот простой пример:
В прошлом мы рассмотрели множество способов обработки синих ссылок iOS. К счастью, теперь все, что вам нужно сделать, это выбрать элементы с определенными атрибутами и переопределить стили для этих элементов.
В блоке стилей вашего электронного письма добавьте следующее для целевых ссылок, добавленных Apple, и заставьте этот текст наследовать стиль от его родительского элемента:
a[x-apple-детекторы данных]
Функциональность сохранится, но текст будет оформлен так, как вы изначально планировали.
Чтобы люди знали, что контент доступен для кликов, измените значение цвета с inherit на шестнадцатеричный код цвета, который соответствует дизайну вашего бренда (например, #77d6fc для голубого) и измените значение text-decoration на подчеркивание.
Переопределение синих ссылок в Gmail
Вместо добавления атрибутов к тексту с автоматической ссылкой Gmail делает совсем другое. При обработке HTML-кода электронной почты Gmail преобразует тип документа в элемент подчеркивания (u). Зная это, вы можете затем добавить хук в свой собственный HTML для целевых элементов только для Gmail. Обычно это делается путем добавления идентификатора к элементу body.
Хотя есть несколько способов исправить синие ссылки Gmail, мы рекомендуем следующее: Настройте таргетинг на все ссылки, содержащиеся в теле Gmail, с помощью следующего тега стиля, переопределяя любой добавленный стиль в процессе:
ты + #тело а
Он использует те же свойства CSS, что и трюк Apple Mail, только специально примененный к Gmail.
Не забудьте обновить значения цвета и оформления текста, чтобы подписчикам было очевидно, что они могут переходить по автоматическим ссылкам. Опять же, некоторые люди предпочитают этот вариант, так что не скрывайте его от них.
Переопределение синих ссылок в Samsung Mail
Samsung Mail использует метод, аналогичный Gmail. Однако вместо преобразования одного элемента в другой Samsung Mail добавит в электронное письмо определенный идентификатор под названием «MessageViewBody». Как и в случае с Gmail, нацельтесь на этот идентификатор и любые ссылки, содержащиеся в вашем блоке стилей:
#MessageViewBody
Снова используются те же свойства CSS, что и раньше. И вы можете заменить значение цвета вашего бренда и подчеркнуть ссылку, если это часть вашего руководства по дизайну.
Теперь все вместе
Хотя было бы удобно объединить все вышеперечисленные селекторы CSS в одно правило, Gmail разделяет CSS с помощью селекторов атрибутов, поэтому исправление будет удалено из Gmail, что позволит свободно перемещаться синим ссылкам.
Поэтому все три правила следует хранить отдельно. Хорошая новость заключается в том, что после того, как они будут добавлены в шаблоны электронной почты, вам не нужно делать что-либо дополнительно в своем коде, чтобы удалить синие ссылки из большинства почтовых клиентов.
В совокупности ваш HTML может выглядеть так:
a[x-apple-детекторы данных] < цвет: #77d6fc !важно; размер шрифта: наследовать !важно; семейство шрифтов: наследовать !важно; вес шрифта: наследовать !важно; высота строки: наследовать !важно; >ты + #тело а < цвет: #77d6fc !важно; размер шрифта: наследовать !важно; семейство шрифтов: наследовать !важно; вес шрифта: наследовать !важно; высота строки: наследовать !важно; >#MessageViewBody < цвет: #77d6fc !важно; размер шрифта: наследовать !важно; семейство шрифтов: наследовать !важно; вес шрифта: наследовать !важно; высота строки: наследовать !важно; >
Вот пример того, как это могло бы выглядеть, если бы вы ничего не делали (без исправления), удалили стиль по умолчанию, не добавляя свой собственный (с исправлением), и заменили стиль по умолчанию своим собственным (с исправлением со стилем):
| Без крепления | С креплением | С креплением |
|---|
Обработка крайних случаев для кодировщика на всякий случай (и Outlook)
Как вы, возможно, знаете, всегда есть крайние случаи, когда дело доходит до дизайна электронной почты. Синие ссылки ничем не отличаются. Некоторые почтовые клиенты по-прежнему будут автоматически связывать текст. А поскольку почтовые приложения меняются каждые 1-2 дня, три вышеуказанных клиента могут очень легко установить обновление, которое сломает эти исправления.
В таких крайних случаях можно использовать другой подход.
Этот метод включает в себя обертывание кандидатов на автоматические ссылки с элементом, который затем используется с помощью CSS в заголовке электронного письма. Элемент контейнера имеет класс, применяемый для таргетинга. До того, как дизайнеры выяснили, что они могут использовать хак x-apple-data-detectors, этот трюк обычно использовался для синих ссылок Apple Mail, поэтому вы обычно увидите что-то вроде «appleLinks», используемого для класса, но это может быть что угодно.
В нашем примере мы будем использовать класс blueLinks:
+1 (800) 123-4567
Поскольку почтовые клиенты будут добавлять ссылку в этот элемент, нацельте ее в CSS в блоке стилей вашего электронного письма и переопределите определенные свойства CSS:
. blueLinks
Это может быть очень надежным решением, но требует большего обслуживания. Поскольку содержимое электронной почты может часто меняться, отслеживание того, где применяются эти классы, и обеспечение учета всего подозрительного текста может занять много времени и привести к ошибкам.
Вот почему мы обычно рекомендуем использовать три встроенных решения CSS выше, возвращаясь к решению на основе классов только тогда, когда тестирование показывает необходимость в нем.
Ваше исправление для клиентов Outlook для настольных ПК
Мобильные приложения Outlook можно исправить с помощью приведенного выше решения для крайних случаев, но это исправление не будет работать с клиентами Outlook для настольных ПК.
Для настольных клиентов Outlook URL-адреса и адреса электронной почты всегда будут отображаться в цветах по умолчанию, если вы не заключите их в теги . В большинстве случаев вы захотите, чтобы они вели на представленную веб-страницу или адрес электронной почты, поэтому добавление тега с атрибутом href и оформление его в виде ссылки улучшит взаимодействие с подписчиком.
Если вы не хотите, чтобы это выглядело как ссылка, вы все равно можете добавить тег и оформить его так, чтобы он выглядел как остальная часть копии.
В крайних случаях у вас может быть клиент, которому нужно, чтобы URL-адрес выглядел как обычная копия и не был связан. В этом случае единственный способ добиться этого — добавить множество соединителей нулевой ширины по всей ссылке:
www.litmus. com становится www.litmus.com
Это не самая красивая вещь, но она работает. Однако это может вызвать трения с вашими подписчиками, если они попытаются скопировать и вставить URL-адрес. Иногда отображаются странно или мешают при вставке в разные программы. Например, копирование и вставка URL-адреса, когда он закодирован, как указано выше, в адресной строке Firefox приводит к поиску в Google, а не к Litmus.com:
Так что это то, что я называю последним средством. исправление «нижний уровень клиента, который не хочет слушать доводы».
Это исправление не работает для адресов электронной почты, и, по моему опыту, я не нашел решения для создания нестилизованного адреса электронной почты без кликов, который работал бы для каждого поставщика услуг электронной почты (ESP). Для некоторых ESP можно использовать тег без атрибута href или тег . Но некоторые ESP не позволят вам отправить электронное письмо с этими взломами.
Исправьте стиль, а не функциональность
Хотя вы, возможно, захотите удалить синие автоматические ссылки ради идеального дизайна, помните, для кого предназначена ваша электронная почта: для ваших подписчиков. У почтовых клиентов есть добрые намерения сделать такие вещи, как адреса, даты и номера телефонов, кликабельными, и многим людям нравится и они с нетерпением ждут возможности использовать их таким образом. Не прячьте их. Вместо этого трансформируйте их, чтобы они соответствовали дизайну вашего электронного письма.
Меняем цвет текста и фона
В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.
Как можно указывать цвет?
Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:
- Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
- HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.
Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.
Как изменить цвет текста?
Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:
И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег и примените атрибут к нему.
Пример изменения цвета текста
Изменение цвета текста Красный текст заголовка
Синий текст параграфа.
Зеленый курсив. Красный текст.
Результат в браузере
Красный текст заголовка
Синий текст параграфа.
Зеленый курсив. Красный текст.
Как изменить цвет фона?
Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:
Пример изменения цвета фона
Изменение цвета фона Заголовок.
Параграф.
Жирный текст. Обычный текст.
Результат в браузере
Заголовок.
Жирный текст. Обычный текст.
Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.
- Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
- Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
- Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
- Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
- Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).
Разделы сайта
- Как сделать сайт
Самому и бесплатно - Учебник HTML
Для начинающих - Учебник CSS
Для новичков - Справочники
По HTML и CSS - Примеры
HTML и CSS - Ссылки
Полезные сайты для вебмастеров - Инструментарий
Программы для создания сайтов
Учебник HTML
- Введение
- Что такое HTML?
- Теги и синтаксис HTML
- Атрибуты HTML-тегов
- Общие и текст
- Структура HTML-документа
- Параграфы и заголовки
- Как изменить шрифт?
- Меняем цвет текста и фона
- Выравнивание содержимого
- Цитаты и обрыв строки
- Что такое спецсимволы HTML?
- Горизонтальные линии
- Группирование элементов
- Комментарии в HTML
- Ссылки
- Cсылки и их разновидности
- Меняем цвета ссылок
- Ссылки на электронную почту
- Якоря — создаем закладки
- Изображения
- Изображения
- Изображения для фонов
- Изображения — ссылки
- Таблицы
- Таблицы
- Границы, рамки и отступы HTML-таблиц
- Объединение ячеек таблицы
- Вложенные таблицы
- Списки
- Нумерованные и маркированные списки
- Метатеги
- Метатеги и их типы
Copyright © 2010-2015 seodon.ru Все права защищены.
С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.
HTML Ссылки
Ссылки являются важной частью HTML документа. Они связывают веб-страницы, что позволяет пользователям быстро переходить по ссылкам и получать необходимую информацию.
Ссылки в HTML документами называются гипертекстовыми ссылками, или гиперссылками. Для их вставки используют элемент . В качестве ссылки можно использовать как текст, так и изображение.
По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной. Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.
- не посещенные ссылки: подчеркнутый текст синего цвета
- посещенные ссылки: подчеркнутый текст фиолетового цвета
- активные ссылки: подчеркнутый текст красного цвета
Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей.
Синтаксис
Для того, чтобы сказать браузеру, что данная часть текста является ссылкой, необходимо поместить его в тег ․ Адрес документа, на который следует перейти, указывается при помощи атрибута href .
Выглядит это так :
a href="url">текст ссылкиa>.Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h2>Пример ссылки h2> a href="https://ru.w3docs.com/">W3Docs.com a> body> html>Результат
В этом примере мы использовали тег , чтобы определить подзаголовки и тег , чтобы создать ссылки. Между тегами и мы поместили W3Docs.com. Нажмите на него и будете перенаправлены на домашнюю страницу нашего веб-сайта.
Атрибут target
Для того, чтобы ссылка открывалась в новом окне, необходимо добавить атрибут target , значением которого является«_blank» .
Не забудьте добавлять слеш (/) к ссылке.
Атрибут ID
Атрибут id используется для создания уникального идентификатора части документа для того, чтобы к нему можно было обращаться.
Для того, чтобы чтобы перенаправить пользователя на определенную часть текста на той же самой веб-странице, необходимо:
- Создать уникальный идентификатор для этой части текста. Идентификатором может быть слово или фраза (если вы используете фразу, между словами не должно быть пробела, можно использовать нижнее подчеркивание).
Пример. Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку.
- Создать гиперссылку с указанием id, которому предшествует символ решетка #.
Пример. Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример”
Теперь давайте посмотрим, как это выглядит в коде HTML.
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h2>Пример ссылки с атрибутом id h2> a id="пример">Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку a> a href="#пример">Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример” a> body> html>Результат
Как добавить гиперссылку к изображению
- src — источник изображения
- alt — альтернативный текст
- width — ширина изображения
- height — высота изображения
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> a href="https://ru.w3docs.com/"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" /> a> body> html>Результат
Кликните по изображению внизу, и вы будете перенаправлены на домашнюю страницу нашего сайта.
Об HTML изображениях мы поговорим подробнее в следующей главе.