Тег link — подключение CSS, фавикона и других внешних файлов
Тег link подключает CSS файлы на HTML
страницу. Кроме того, link подключает
некоторые другие файлы, например, фавикон.
(Фавикон — это ярлычок сайта, который
виден во вкладке браузера. Его также можно
увидеть в некоторых поисковиках при поиске
напротив сайтов, например в Яндексе).
У данного тега очень много атрибутов и они могут принимать разнообразные значения, однако в реальной жизни они все практически не используются. Самое популярное — это подключение CSS и добавление фавикона.
Как подключить CSS в HTML5: <link rel=»stylesheet» href=»style.css»>. В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.
Как подключить фавикон: <link
href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon»>.
Тег link не требует закрывающего тега.
Атрибуты
| Атрибут | Описание |
|---|---|
href | Путь к подключаемому файлу. |
media | Тип устройства, для которого следует подключить файл. Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen)
или только для маленьких экранов: для мобильников или планшетов (значение handheld). Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже. |
rel | Тип подключаемого файла. Возможные значения: stylesheet | alternate.
Значение stylesheet указывает на то, что подключается CSS файл,
значение alternate используется, к примеру, для указания ссылки
на файл в формате XML для описания ленты новостей, анонсов статей. |
charset | Кодировка подключаемого файла.
В настоящее время стандартом является utf-8. |
type | Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon. |
Значения атрибута media
В HTML5 в качестве значений могут быть указаны медиа-запросы.
| Значение | Описание |
|---|---|
all | Все устройства. |
screen | Экран монитора. |
handheld | Телефоны, смартфоны, устройства с маленьким экраном. |
braille | Устройства, основанные на системе Брайля, предназначены для слепых людей. |
speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух.
Сюда же входят речевые браузеры. |
print | Принтеры. |
projection | Проекторы. |
tty | Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения. |
tty | Телевизоры, которые умеют открывать web страницы (бывает и такое). |
Значение по умолчанию: all.
Пример
Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
Это основное содержимое страницы.
</body>
</html>
Смотрите также
- тег
style,
который добавляет CSS прямо на странице - атрибут
style, который задает стили конкретному тегу
| onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
| onafterprint | Скрипт виконується тільки після як документ надрукований. |
| onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
| onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
| onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
| onload | Викликається після того як завантаження елемента завершене. |
| onmessage | Скрипт виконується коли викликане повідомлення. |
| onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
| ononline | Спрацьовує коли браузер починає працювати в режимі онлай. |
| onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
| onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
| onpopstate | Скрипт виконується коли змінено історію одного вікна. |
| onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
| onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
| onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
| onblur | Скрипт виконується, коли елемент втрачає фокус. |
| onchange | Викликається в той момент, коли значення елемента змінюється. |
| oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
| onfocus | Викликається в той момент, коли елемент отримує фокус. |
| oninput | Скрипт викликається коли користувач вводить дані поле. |
| oninvalid | Скрипт виконується, коли елемент недійсний. |
| onreset | Викликається, коли натискається у формі кнопка типу Reset. |
| onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
| onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
| onsubmit | Викликається при відправленні форми. |
| onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
| onkeypress | Викликається коли корисрувач натиснув на клавішу. |
| onkeyup | Викликається коли користувач відпускає клавішу. |
| ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
| ondrag | Періодично викликається при операції перетягування. |
| ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
| ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
| ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення. |
| ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
| ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
| ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
| onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
| onmousemove | Викликається, коли курсор миші переміщається над елементом. |
| onmouseout | Викликається, коли курсор виходить за межі елемента. |
| onmouseover | Виконується, коли курсор наводиться на елемент. |
| onmouseup | Викликається, коли користувач відпускає кнопку миші. |
| onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
| onwheel | Викликається, коли користувач прокручує коліщатко миші. |
| oncopy | Викликається, коли користувач копіює вміст елемента. |
| oncut | Викликається, коли користувач вирізає вміст елемента. |
| onpaste | Викликається, коли користувач вставляє вміст в елемент. |
| onabort | Виконується при перериванні якоїсь події. |
| oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
| oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію. |
| oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
| ondurationchange | Викликається коли змінюється довжина медіа файлу. |
| onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
| onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
| onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
| onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
| onloadeddata | Викликається коли медіа данні завантажено. |
| onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера. |
| onpause | Викликається коли відтворення медіа даних призупинено. |
| onplaying | Викликається коли розпочато відтворення медіа даних. |
| onprogress | Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. |
| onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
| onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
| onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
| onstalled | Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані. |
| onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження. |
| ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
| onvolumechange | Викликається коли змінюється гучність звуку. |
| onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
| ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
| onerror | Викликається якщо при завантаженні елемента сталася помилка. |
| onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
Стилизация гиперссылок с помощью CSS | Учебники по веб-дизайну и разработке
Цели обучения
В конце этого урока вы сможете:
- Применение правил стиля CSS к пяти состояниям гиперссылок: ссылка, посещение, фокус, наведение курсора и активная.
Вы можете просмотреть готовые версии двух примеров веб-страниц, на которые вы добавите гиперссылки в этом руководстве, щелкнув ссылку ниже. Готовые образцы будут открываться в новой вкладке вашего веб-браузера.
страница-5.html
страница-6.html
Около пяти состояний гиперссылки
На современных веб-сайтах гиперссылки обычно отображаются по-разному в зависимости от раздела веб-страницы, в котором они расположены.
- Навигационные гиперссылки : В навигационных меню и нижних колонтитулах гиперссылки обычно отображаются без подчеркивания. Из расположения ссылок пользователю ясно, что эти элементы можно щелкнуть или коснуться.
- Гиперссылки с текстовыми блоками : Когда они расположены внутри абзацев, рекомендуется подчеркивать гиперссылки, чтобы выделить их из окружающего текста.
- Гиперссылки в виде кнопок : Гиперссылки на веб-странице также могут отображаться в виде кнопок с цветным фоном и/или рамками и, возможно, значками. Как правило, гиперссылки, оформленные в виде кнопок, не имеют подчеркивания.
В отличие от других элементов веб-страницы, таких как заголовки, абзацы или изображения, гиперссылки являются интерактивными . И их внешний вид может меняться в зависимости от того, как пользователь взаимодействует с ними.
Гиперссылки — это пять так называемых состояний , которые можно сгруппировать в две категории:
- Пассивные состояния : Так выглядит гиперссылка, когда пользователь не взаимодействует с ней. Есть два пассивных состояния.
- Интерактивные состояния : Так выглядит гиперссылка, когда пользователь взаимодействует с ней. Есть три интерактивных состояния.
Есть три интерактивных состояния.Гиперссылки: два пассивных состояния
Гиперссылка может иметь два пассивных состояния.
- a:link — ссылка , а не была нажата или нажата пользователем. По умолчанию веб-браузеры отображают непросмотренные гиперссылки синим цветом.
- a:visited — по ссылке уже раз переходил пользователь. По умолчанию веб-браузеры отображают посещенные гиперссылки фиолетовым цветом.
В CSS вы ориентируетесь на непосещенные и посещенные гиперссылки на веб-странице, используя псевдоклассы :link и :visited следующим образом:
/* Пассивная ссылка - ранее не посещаемая */
ссылка {
/* здесь находятся правила стиля */
}
/* Пассивная ссылка - ранее посещенная */
а: посетил {
/* здесь находятся правила стиля */
} Как правило, эти два пассивных состояния оформляются одинаково.
/* Состояния пассивной ссылки */
ссылка,
а: посетил {
/* здесь находятся правила стиля */
} Или, в одну строку:
/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
/* здесь находятся правила стиля */
} Обратите внимание на двоеточие (:) между селектором a и именем псевдокласса (ссылка или посещенный).
Например, если вы хотите, чтобы ваши гиперссылки отображались красным цветом, когда пользователь не взаимодействует с ними, вы должны ввести следующее.
/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
красный цвет
} Гиперссылки: три интерактивных состояния
Существует три возможных пассивных состояния гиперссылки.
- a:hover — Пользователь наводит указатель мыши на ссылку. По умолчанию веб-браузеры отображают наведенные курсором ссылки синим цветом (если они ранее не посещались) и фиолетовым цветом (если ранее посещались пользователем).
- a:focus — пользователь перешел по гиперссылке с помощью клавиши Tab . По умолчанию веб-браузеры отображают ссылки в фокусе с синей пунктирной рамкой.
- a:active — ссылка в данный момент щелкается или нажимается пользователем. По умолчанию веб-браузеры отображают активные гиперссылки красным цветом.
По умолчанию веб-браузеры отображают наведенные курсором ссылки синим цветом (если они ранее не посещались) и фиолетовым цветом (если ранее посещались пользователем).В CSS вы ориентируетесь на эти три состояния гиперссылок, используя псевдоклассы :focus, :hover и :active.
Обычно все три интерактивных состояния гиперссылки оформляются одинаково.
/* Состояния интерактивной ссылки */
а: фокус, а: наведение, а: активный {
/* здесь находятся правила стиля */
} Опять же, обратите внимание на двоеточие (:) между селектором a и именем псевдокласса (фокус, наведение или активный).
Например, если вы хотите, чтобы ваши гиперссылки отображались зеленым цветом всякий раз, когда пользователь взаимодействует с ними, вы должны ввести следующее.
/* Состояния пассивной ссылки */
а: наведение, а: фокус, а: активный {
цвет: зеленый
} Таким образом, раздел файла CSS, который стилизует гиперссылки, обычно выглядит следующим образом:
/* ====== СТИЛИ ГИПЕРССЫЛОК ====== */
/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
красный цвет
}
/* Состояния интерактивной ссылки */
а: наведение, а: фокус, а: активный {
цвет: зеленый
} Гиперссылки: правильный порядок псевдоклассов
В таблице стилей CSS важно размещать псевдоклассы в правильном порядке. В противном случае ваши стили гиперссылок могут отображаться не так, как вы хотите.
Правильный порядок следующий:
:ссылка
: посетил
:навести
:фокус
: активен
Гиперссылки и подчеркивание по умолчанию
По умолчанию веб-браузеры добавляют подчеркивание ко всем пяти состояниям гиперссылок. Это результат применения значения по умолчанию underline к свойству text-decoration .
Чтобы «отключить» это подчеркивание по умолчанию, вам нужно добавить следующее правило стиля в свой файл CSS.
/* ====== СТИЛИ ГИПЕРССЫЛОК ====== */
/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
текстовое оформление: нет;
красный цвет;
}
/* Состояния интерактивной ссылки */
а: наведение, а: фокус, а: активный {
текстовое оформление: нет;
цвет: зеленый;
} За исключением особых случаев гиперссылок в меню и нижних колонтитулах, а также в качестве кнопок, рекомендуется подчеркивать посещенные и непосещенные состояния гиперссылок внутри блоков текста.
Однако для подчеркивания гиперссылок веб-дизайнеры обычно используют свойство border-bottom , а не text-decoration , потому что оно допускает больше вариантов интервалов и цвета.
Оформление ссылок на веб-странице
van GoghВ этой задаче вы будете применять стили CSS к гиперссылкам, которые вы добавили на образец веб-страницы page-5.html в предыдущем учебнике «Введение в гиперссылки».
- В VS Code откройте таблицу стилей style-5.css .
- В нижней части файла таблицы стилей скопируйте и вставьте следующее:
/* Стили пассивных ссылок */ а: ссылка, а: посетили { текстовое оформление: нет; отступ снизу: 2px; } /* Стили интерактивных ссылок */ а: наведение, а: фокус, а: активный { текстовое оформление: нет; отступ снизу: 2px; }Теперь вы сгруппировали пять возможных состояний гиперссылок в две категории для стилей и удалили подчеркивание по умолчанию. Вы также добавили интервал 2px , который будет отделять текст гиперссылки от любой нижней границы, которую вы поместите под ней. - Для первого набора правил стиля, которые применяются к состояниям гиперссылки :link и :visited, введите следующие свойства и значения CSS:
цвет: #000; нижняя граница: сплошная 2px #000;
- Для второго набора правил стиля, которые применяются к трем активным состояниям гиперссылки, введите следующие свойства и значения CSS:
цвет: #f26f21; нижняя граница: сплошной синий 2px;
- Сохраните таблицу стилей. Отобразите веб-страницу в браузере и проверьте изменения стиля четырех гиперссылок.
Вы также добавили интервал 2px , который будет отделять текст гиперссылки от любой нижней границы, которую вы поместите под ней.Вы закончили работу над первой пробной веб-страницей.
Щелкните page-5.
html, чтобы просмотреть готовый образец этой веб-страницы в новой вкладке веб-браузера.
Оформление ссылок на веб-странице
ТуризмВ этом разделе вы будете применять стили CSS к гиперссылкам, которые вы добавили на образец веб-страницы page-6.html в предыдущем учебнике по работе с внутренними гиперссылками.
- В VS Code откройте таблицу стилей style-6.css .
- В нижней части файла таблицы стилей скопируйте и вставьте следующее:
/* Стили пассивных ссылок */ а: ссылка, а: посетили { текстовое оформление: нет; отступ снизу: 2px; цвет: #006600; нижняя граница: сплошная 2px #006600; } /* Стили интерактивных ссылок */ а: наведение, а: фокус, а: активный { текстовое оформление: нет; отступ снизу: 2px; цвет: #f26f21; нижняя граница: сплошной синий 2px; } - Сохраните таблицу стилей и в веб-браузере убедитесь, что гиперссылки на веб-странице отображаются в новом стиле.
Теперь вы закончили работу над вторым образцом веб-страницы.
Нажмите page-6.html, чтобы просмотреть готовый образец этой веб-страницы в новой вкладке веб-браузера.
Загрузка ваших файлов на GitHub
После завершения веб-страницы и таблицы стилей вы готовы загрузить их в свою учетную запись на GitHub.
- Откройте новую вкладку в веб-браузере и перейдите на GitHub.com. Если вы еще не вошли в свою учетную запись GitHub, войдите сейчас.
- На домашней странице GitHub щелкните «репозиторий», содержащий ваши веб-страницы. Его имя будет выглядеть следующим образом, где имя пользователя — выбранное вами имя пользователя на GitHub. имя пользователя.github.io
- На следующем отображаемом экране GitHub в правой части экрана вы можете увидеть кнопку с именем Добавить файл . Нажмите здесь.
- В раскрывающемся списке выберите параметр Загрузить файлы .
- В проводнике (Windows 10) или Finder (Apple Mac) перетащите вложенную папку 📁 упражнений , чтобы загрузить ее в свой репозиторий на GitHub.
- Прокрутите экран GitHub вниз и примите или отредактируйте короткое сообщение (Добавить файлы через загрузку) в поле Принять изменения .
- Наконец, нажмите зеленую кнопку Подтвердить изменения , чтобы загрузить файлы.
Ваш обновленный образец веб-страницы теперь опубликован на GitHub по веб-адресам, подобным следующим:
https://username.github.io/exercises/page-5.html
https://username.github.io/exercises/page-6.html
Может пройти несколько минут, прежде чем ваши загруженные файлы появятся на GitHub.
гиперссылок CSS
Вы можете использовать CSS для изменения внешнего вида и поведения гиперссылок.
Для этого можно использовать следующие селекторы/псевдоклассы:
- и
- а: ссылка
- а: посетил
- а: наведите курсор на
- а:активный
Эти селекторы/псевдоклассы представляют элемент «якорь» (указанный с помощью тега HTML ) и его различные состояния.
Примеры
Некоторых приятных эффектов можно добиться, используя свойство text-decoration в сочетании со свойством color .
Вот пример кода, который можно вставить в таблицу стилей для достижения желаемого эффекта.
<тип стиля="текст/CSS"> .example1 a {семейство шрифтов:Georgia,serif; размер шрифта: большой} .example1 a:link {color:forestgreen;} .example1 a:посетил {color:seagreen;} .example1 a: hover {украшение текста: нет; цвет: желто-зеленый; вес шрифта: полужирный;} .example1 a:active {цвет:красный;украшение текста: нет}
Обратите внимание, что правило a:hover должно быть размещено после правил a:link и a:visited , поскольку в противном случае каскадные правила скроют действие правила a:hover .
Точно так же, поскольку a:active размещается после a:hover , активный цвет (красный) будет применяться, когда пользователь одновременно активирует и наводит курсор на элемент «якорь».
Гиперссылки без подчеркивания
<тип стиля="текст/CSS"> .example2 a:link {украшение текста: нет}
Ваши пользователи могут запутаться, если ваши гиперссылки не подчеркнуты. Более удобным решением было бы применять это поведение только к гиперссылкам только тогда, когда пользователи наводят на них курсор.
Текстовые ролловеры
<тип стиля="текст/CSS"> .