В коде html страницы есть конструкция вида
<td></td>
id=»clock» это
#clock {background:url(img/clock.gif) no-repeat left 0; width:125px; padding:0px 0px 0px 20px; height:130px}
Мне надо сделать картинку часов clock.gif ссылкой, но поскольку она прописана через css, то в коде страницы есть только <td></td> и картинку часов ссылкой сделать не могу.
Есть какие-то решения как сделать картинку часов ссылкой не «вынимая» картику из css или возможен вариант только когда картинку убирать из css файла и вставлять <img …> в html страницу?
kruglov
Новичок
#2
CSS это стили. А не функциональность.
Адрес ссылки в CSS прописывать нельзя.
golos81
Новичок
#3
Т. е. если я правильно понял, единственное правильное решение, это «выносить» картинку из css в html код страницы?
но это ненадежно, т. к. яваскрипт может быть отключен.
BlackSabbath
Чисто для справки: твой первый вариант — IE-only и устарел, второй не пройдет валидацию.
Ссылки и изображения в HTML
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание списков в html. В данной статье я бы хотел рассказать о том, как добавлять ссылки и изображения в HTML-страницу
. Пожалуй, в интернете сейчас не найти ни одной страницы, на которой нет изображений и ссылок. Взять хотя меню навигации по сайту, она есть абсолютно на каждой странице. Не будем много болтать и сразу приступим к добавлению ссылок и изображений на HTML-страницу. Для того, чтобы добавить изображение необходимо использовать тег <img>. Сразу пример:
<html>
<head>
<meta charset="utf-8"/>
<title>Добавление ссылок и изображений в HTML</title>
</head>
<body>
<img src="car. jpg" alt="Наша картинка"/>
</body>
</html>
Как мы видим, тег <img> является одиночным, т.е. у него нет закрывающегося тега <img/>. Также у него есть несколько атрибутов. Атрибут src указывает путь до картинки. В данном случае мы написали «car.jpg». Картинка в браузере откроется только в том случае, если файл, из которого мы её открываем, находится в той же директории, что и сама картинка. Это так называемый относительный путь. Можно указывать полный или, по-другому, абсолютный путь,чтобы точно не ошибиться. Например:
src=»http://mysite.ru/images/car.jpg»
Вернемся к нашей конструкции:
<img src=»car.jpg» alt=»Наша картинка»/>
В данном случае будет создана картинка шириной в 300px и высотой 200px, за что отвечают атрибуты width и height. Если их не указывать, то в браузере появится картинка изначального размера, т.е. того, который она имеет физически. Также значения ширины и высоты картинки можно задать в процентах (от размера экрана). Пусть мы хотим, чтобы картинка занимала всю ширину и половину высоты окна браузера. Для этого нужно написать:
<img src=»car.jpg» alt=»Наша картинка»/>
Атрибут alt обозначает тот текст, который появится, если картинка по каким-то причинам не отобразилась, или у пользователя отключен показ картинок в браузере. Рекомендую ставить этот атрибут всегда, так как это полезно для оптимизации сайта.
Пришло время научиться добавлять на наши страницы ссылки. Напишем следующий код:
<html>
<head>
<meta charset="utf-8"/>
<title>Добавление ссылок и изображений в HTML</title>
</head>
<body>
<a href="https://yandex.ru" title="Яндекс">Перейти на сайт Яндекса</a>
</body>
</html>
Тег <a> означает начало ссылки. У этого тега есть несколько атрибутов. Атрибут href(якорь) указывает то, куда мы попадем, при нажатии на ссылку. В данном случае мы попадем на сайт Яндекса.
В атрибуте href можно указывать не только ссылки на другие страницы или сайты, но и что угодно, например другие файлы, картинки. Пути могут быть также, как и абсолютные, так и относительные.
Допустим, вы хотите разместить у себя на странице возможность скачать файл. Пусть файл у нас имеет название «file.docx» и лежит в папке files. Для этого нужно написать:
После того, как пользователь нажмёт «Скачать мой файл», файл будет скачан ему на компьютер.
Атрибут title будет выводить тот текст, который появится при наведении курсором на ссылку.
Если вы обратили внимание, то сайт Яндекса открывается в том же окне, что и наша страница. Есть ещё один атрибут, который отвечает за то, в каком окне будет открываться сайт. Давайте напишем код:
<a href=»https://yandex.ru» title=»Яндекс» target=»_blank»>Перейти на сайт Яндекса</a>
В данном случае сайт Яндекса откроется в новом окне.
Домашнее задание: у атрибута target есть и другие значения, например _self или _new. Попробуйте поиграться с этими значениями и посмотрите, что при этом происходит.
В данной статье вы научились вставлять
ссылки и изображения на html-страницу.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Опубликовано от Алексей Гулынин
Оставить комментарий
Следующая статья >
Комментарии:
Стилизация ссылок CSS
Вы можете стилизовать HTML-ссылки (от до элементов), используя свойства CSS и селекторы CSS. HTML-ссылки могут быть
либо текстовые ссылки, ссылки на изображения или блочные ссылки (блок HTML). Вот три примера HTML-ссылок:
Первый элемент a является текстовой ссылкой, потому что тело элемента a содержит только текст.
Второй элемент a является ссылкой на изображение, потому что тело элемента a просто содержит img .
элемент.
Третий элемент a является ссылкой на блок, потому что тело элемента a содержит блок HTML.
Блочные ссылки не всегда поддерживались браузерами, но на момент написания статьи они работали в большинстве браузеров.
(если не все).
Стилизация текстовых ссылок
Текстовые ссылки могут быть оформлены с использованием всех свойств стиля текста CSS.
Это означает, что вы можете установить font-family , font-size , font-weight , цвет , текст-украшение и т. д. текстовых ссылок. Вот пример стиля CSS для текстовой ссылки:
<стиль>
а {
семейство шрифтов: Helvetica;
размер шрифта: 1em;
вес шрифта: полужирный;
цвет: #000099;
текстовое оформление: нет;
}
В этом примере правило CSS устанавливает семейство шрифтов на Helvetica , устанавливает размер шрифта to 1em , устанавливает font-weight на жирный , цвет на #000099 (темно-синий) и удаляет подчеркивание по умолчанию для всех элементов a .
Вот как выглядит текстовая ссылка с применением этих стилей:
Текстовая ссылка
Стилизация ссылок на изображения
Когда ссылка содержит изображение, вы можете стилизовать элемент a или элемент img .
Изображения можно стилизовать, используя любые стандартные свойства CSS для стилизации изображений.
Звенья блока оформления
Когда вы стилизуете блочные ссылки, вы обычно стилизуете HTML внутри элемента a , а не сам элемент .
Вы можете оформить ссылку так, чтобы она выглядела как кнопка. Вы делаете это, устанавливая border , background-color , цвет и заполнение свойства CSS, в дополнение к свойствам текста. Вот пример:
Если вам нужно убедиться, что ссылки явно подчеркнуты, вы можете использовать свойство подчеркивания text-decoration: underline .
Пример подчеркивания ссылок
a {
оформление текста: подчеркивание;
}
Подписаться на @tutorial_brain
Ссылки стилей в div
Создать уникальный стиль для div легко, даже если вы хотите добавить ссылку на div.
Вы можете определить div, используя идентификатор или класс . Затем вы можете использовать этот тег id или class внутри тега стиля, чтобы задать стиль.
Таким образом, вы можете изменить цвет ссылки, ширину div, цвет фона и т.д.
Пример использования ссылок в div
#divimg1 {
ширина:авто;
высота: 300 пикселей;
цвет фона: оранжевый;
}
Подписаться на @tutorial_brain
Стилизация ссылок HTML на основе различных стадий ссылки
Существует 4 типа ссылок в зависимости от фазы (этапа), на которой они находятся. Эти фазы происходят с определенным событием, которое принимает пользователь::
a:link → Это обычная ссылка, которую пользователь не посещал. Косвенно эта ссылка является нетронутой и не посещенной.
a:visited → Ссылка, которую пользователь посетил уже в стадии посещенной ссылки. Обычно веб-сайты отображают эту ссылку другим цветом по сравнению с непосещенной ссылкой.
a:hover → Когда пользователь наводит указатель мыши на ссылку, то конкретный момент, когда пользователь наводит курсор на ссылку, является стадией наведения. На некоторых веб-сайтах курсор меняется на «руку» при перемещении курсора.
a:active → Момент перехода по ссылке называется активной стадией ссылки, поэтому, когда пользователь щелкает определенную ссылку и окно временных рамок при нажатии на ссылку, это фаза активной ссылки. .
Пример обычной ссылки, которая не посещается:
a:link { text-decoration:none; семейство шрифтов: калибровки; цвет: зеленый; }
Пример посещенной ссылки:
a:посетили { цвет: синий; }
Пример ссылки при наведении мыши:
a:hover { цвет: черный; фоновый цвет:розовый; }
Пример активной ссылки:
a:active { цвет: помидор; text-decoration:underlined; цвет фона:желтый; }
Предупреждение/Опасность/Информация/Успех
Важно следовать им при определении стиля для различных этапов ссылок.
a:active всегда следует за a:hover
a:hover всегда следует после a:link и a:visited
Пример, показывающий различные типы ссылок
a:link {
текстовое оформление: нет;
семейство шрифтов: калибри;
цвет:зеленый;
}
а: посетил {
цвет синий;
}
а: наведите {
цвет: розовый;
украшение текста: подчеркивание;
}
а: активный {
цвет: помидор;
оформление текста: подчеркнутый;
цвет фона: желтый;
}
CSS Interview Вопросы и ответы
Какое свойство гиперссылки определяет непосещенную ссылку?
В CSS свойство a:link определяет непосещенную ссылку. a:link — это стандартная ссылка, по которой не нажимают и не посещают.
Как изменить цвет ссылок?
Сначала выберите ссылку и укажите встроенный CSS, внешний CSS или внутренний CSS.
alink — активная ссылка — это обычная ссылка, по которой пользователь не заходил. Косвенно эта ссылка не нажимается, и это непросмотренная ссылка.
vlink — это Visited-ссылка, здесь пользователь нажал на ссылку и теперь она находится в стадии посещенной ссылки. Обычно веб-сайты отображают эту ссылку другим цветом по сравнению с непосещенной ссылкой.
3. Как добавить ссылку на кнопку?
Кнопка дает призыв к действию, когда мы нажимаем на нее. Обычно кнопки используются для кнопки отправки, кнопки входа и т. д. Чтобы добавить ссылку на кнопку, нам нужно указать тег тег внутри тега .
е. если я правильно понял, единственное правильное решение, это «выносить» картинку из css в html код страницы?
com/»><div></div></a></td>
к. яваскрипт может быть отключен.jpg" alt="Наша картинка"/> </body> </html>
jpg" alt="Наша картинка"/>
</body>
</html>
Пусть мы хотим, чтобы картинка занимала всю ширину и половину высоты окна браузера. Для этого нужно написать:
Вот три примера HTML-ссылок:
Следущая страница
д. текстовых ссылок. Вот пример стиля CSS для текстовой ссылки:
Ссылка не нужна только для текста. Это может быть и для изображений.
На некоторых веб-сайтах курсор меняется на «руку» при перемещении курсора.
com/" target="_blank">Выделите ссылку темно-синим цветом
