Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Чаще всего стили подключают из внешнего файла с расширением .css . Для этого используется тег . Например:
В атрибуте href задают адрес файла, а атрибут rel=»stylesheet» говорит браузеру, что мы подключаем стили, а не что-то другое.
Лучше подключать стили внутри , но это необязательно. Тег будет работать и в другом месте страницы.
В этом задании вы подключите внешний стилевой файл, который расположен по адресу external.css (перейдите по ссылке, чтобы открыть этот файл в браузере).
Перейти к заданию
index.html Сплит-режим
Подключение внешних стилей
Внешние стили
Внешние стили намного удобнее встроенных, так как вы можете подключить один и тот же файл стилей ко множеству страниц.
Если понадобится внести в стили изменения, то вы меняете один файл, а изменения появляются на всех страницах, где он подключен.
Со встроенными стилями в этом случае пришлось бы повозиться.
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Rel stylesheet что это
Подключает внешние ресурсы — стили, фавиконки, шрифты и прочее.
Время чтения: 9 мин
Открыть/закрыть навигацию по статье
Кратко
Пример
Как понять
Атрибуты
Пример
Оптимизация
Условная загрузка ресурсов с медиавыражениями
Предзагрузка ресурсов (preload)
Предзагрузка и кэширование (prefetch)
Предварительное подключение к домену (preconnect)
Предварительное разрешение записи DNS (dns-prefetch)
Предзагрузка и пререндер страницы (prerender)
Дока Дог советует
Алёна Батицкая советует
Почему принято размещать со стилями внутри , а перед закрывающим тегом
? Когда можно нарушить это правило?
Контрибьюторы:
Обновлено 15 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Позволяет загружать на страницу содержимое из внешнего файла.
Пример
Скопировать ссылку «Пример» Скопировано
head>linkhref="style.css"rel="stylesheet">head>
Как понять
Скопировать ссылку "Как понять" Скопировано
Матёрые программисты советуют описывать CSS-стили в отдельных файлах: так их легче редактировать, сортировать и подключать к разным страницам сайта. Чтобы применить стили из внешнего файла на странице, используйте тег .
Однако внешним ресурсом может выступать не только файл со стилями, но и любой другой, или же ссылка на него.
Рассмотрим два наиболее часто встречающихся случая:
Изображение, которое будет отображено в качестве фавиконки на вашем сайте;
Внешняя ссылка на шрифт, который применяется на сайте.
Во всех описанных случаях пишется внутри .
Атрибуты
Скопировать ссылку "Атрибуты" Скопировано
href — URL-ссылка на внешний файл. Ссылка может быть как полной или абсолютной http : / / localhost / sitename / css / style . css , так и неполной или относительной /sitename / css / style . css .
rel — говорит браузеру, какую роль играет ссылка внутри тега. Иными словами, этот атрибут выражает отношения между вашей страницей и файлом, на который ведёт ссылка. Самое часто встречающееся значение — rel = "stylesheet" , оно означает, что ссылка внутри ведёт на внешний файл с CSS-стилями. А для добавления фавиконки используется rel = "icon" . Также rel помогает определить, какую фавиконку на каком устройстве загружать, например: rel = "apple - touch - icon - precomposed" .
sizes — устанавливает размер — ширину и высоту — фавиконки в пикселях, например sizes = "114x114" . А если написать sizes = "any" , то браузер сможет масштабировать иконку под любой размер. Так можно делать с иконками в векторном формате, например SVG.
media — в зависимости от того, на каком устройстве открывают вашу страницу, можно применять разные стили к тексту или показывать разные иконки. Атрибут media указывает устройство, на котором работает тот или иной стиль. Например, . Также атрибут media может определять, какая тема используется в ОС. Благодаря этому можно произвести небольшие оптимизации. Например, если у нас есть два разделённых CSS-файла, каждый из которых содержит стили для одной из тем, то приоритет при загрузке будет отдаваться именно тому файлу, который относится к выбранной системной теме:
as — позволяет указать тип загружаемого контента. Благодаря ему мы помогаем браузеру правильно расставлять приоритеты и планировать загрузку. as стоит применять, если указан атрибут rel = "preload" или rel = "prefetch" .
crossorigin — указывает должен ли браузер отправлять кросс-доменные запросы с заголовками CORS при загрузке файлов. Данный атрибут имеет два доступных значения:
anonymous — Cross-origin запрос выполняется без отправки учётных данных, таких как куки, заголовки аутентификации и клиентские сертификаты. Это может быть полезно для загрузки статических файлов, например изображений или шрифтов;
use - credentials — Cross-origin запрос выполняется с отправкой учётных данных, если они доступны. Например, если вы загружаете стиль CSS с другого origin и хотите, чтобы браузер отправлял куки для аутентификации, вы можете использовать это значение.
При использовании атрибута crossorigin в теге link , браузер будет проверять, поддерживает ли сервер заголовки CORS для запрашиваемого ресурса. Если сервер не поддерживает CORS или не возвращает нужные заголовки, то браузер может блокировать загрузку ресурса.
В современных браузерах атрибут crossorigin обычно необязателен для большинства типов ресурсов, таких как стили CSS, изображения или шрифты. Однако, если вы загружаете скрипт с другого домена, то использование атрибута crossorigin может быть полезным для обеспечения безопасности и корректной работы скрипта.
Пример
Скопировать ссылку "Пример" Скопировано
Самый простой пример, как подключить файл со стилями:
linkhref="style.css"rel="stylesheet">
Можно сделать разные версии сайта, чтобы пользователь мог выбрать удобную для него, например, версию для слабовидящих. Тогда для каждой версии можно подключить свой файл стилей:
Страница может выглядеть по-разному на разных устройствах. Для этого подключим разные стили, в зависимости от устройства и размера экрана:
linkhref="print.css"rel="stylesheet"media="print">linkhref="mobile.css"rel="stylesheet"media="all">linkhref="desktop.css"rel="stylesheet"media="screen and (min-width: 600px)">linkhref="highres.css"rel="stylesheet"media="screen and (min-resolution: 300dpi)">
В этом примере мы подключаем внешний файл со стилями с помощью атрибута rel = "stylesheet" тега , указываем RSS-документ текущего сайта ( ) и устанавливаем иконку сайта — фавиконку — в адресной строке браузера ( ):
Кулинарный блог
.
DOCTYPEhtml>html>head>metacharset="utf-8">title>Кулинарный блогtitle>linkrel="stylesheet"href="ie.css">linkrel="alternate"type="application/rss+xml"title="Статьи с сайта cookbook.ru"href="http://cookbook.ru/rss.xml">linkrel="shortcut icon"href="http://cookbook.ru/favicon.ico">head>body>p>. p>body>html>
Оптимизация
Скопировать ссылку "Оптимизация" Скопировано
— очень мощный и гибко настраиваемый тег. С его помощью можно многое оптимизировать, давайте посмотрим, как.
Условная загрузка ресурсов с медиавыражениями
Скопировать ссылку "Условная загрузка ресурсов с медиавыражениями" Скопировано
Вы можете обозначить тип или условие внутри атрибута media . Этот ресурс будет загружен только в том случае, если прописанные условия соответствуют действительности.
linkhref="print.css"rel="stylesheet"media="print">linkhref="mobile.css"rel="stylesheet"media="all">linkhref="desktop.css"rel="stylesheet"media="screen and (min-width: 600px)">linkhref="highres.css"rel="stylesheet"media="screen and (min-resolution: 300dpi)">
Предзагрузка ресурсов ( preload )
Скопировать ссылку "Предзагрузка ресурсов (preload)" Скопировано
говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и вы хотите ускорить процесс.
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
linkrel="preload"href="style.css"as="style">
Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время.
Предзагрузка и кэширование ( prefetch )
Скопировать ссылку "Предзагрузка и кэширование (prefetch)" Скопировано
просит браузер загрузить и кэшировать ресурс в фоновом режиме. Загрузка происходит с низким приоритетом, поэтому не мешает более важным ресурсам. Это полезно, если ресурс понадобится на следующей странице, а вы хотите заранее его кэшировать.
Здесь та же ситуация, что и у rel = "preload" — браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
linkrel="prefetch"href="style.css"as="style">
Вероятно, этот тег можно безопасно использовать в любом объёме. Браузеры обычно планируют prefetch с наименьшим приоритетом, так что он никому не мешает. Только всегда стоит учитывать тот факт, что расходуется трафик пользователя, который может стоить денег.
Предварительное подключение к домену ( preconnect )
Скопировать ссылку "Предварительное подключение к домену (preconnect)" Скопировано
просит браузер заранее подключиться к домену, когда вы хотите ускорить установку соединения в будущем.
Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts или запрашивает ответ в формате JSON с сервера.
Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.
Используйте этот тег, чтобы немного ускорить загрузку стороннего скрипта или стилей за счёт предварительной установки соединения. Но не забывайте о том, что установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Поэтому используйте preconnect максимум для 4-6 доменов.
Предварительное разрешение записи DNS ( dns - prefetch )
Скопировать ссылку "Предварительное разрешение записи DNS (dns-prefetch)" Скопировано
просит браузер заранее выполнить резолвинг DNS для домена, если вы скоро будете подключаться к нему и хотите ускорить начальное соединение.
Браузер должен определить его IP-адрес, если будет извлекать какие-то ресурсы оттуда. Например, загружать React из CDN.
Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.
Использовать их вместе для одного домена обычно не имеет смысла, так как уже включает в себя и многое другое. Это может быть оправданным в двух случаях:
Вы планируете поддерживать старые браузеры: используйте в качестве запасного варианта для .
Вы планируете ускорить подключение более чем к 4−6 доменам: тег не рекомендуется использовать более чем с 4−6 доменами. потребляет меньше ресурсов, поэтому в случае необходимости используйте его.
Предзагрузка и пререндер страницы ( prerender )
Скопировать ссылку "Предзагрузка и пререндер страницы (prerender)" Скопировано
просит браузер загрузить URL-адрес и отобразить его на невидимой вкладке.
Когда пользователь нажимает на ссылку, страница должна отобразиться немедленно. Это полезно, если вы уверены, что пользователь посетит определённую страницу, и хотите ускорить её отображение.
Но не злоупотребляйте такой возможностью! Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Поэтому не используйте более чем для одной страницы.
�� Чаще всего используется для CSS-стилей, подгруженных из файла. А также для фавиконки и других важных ссылок.
Здесь также можно указать, является ли страница канонической (главной среди дублированных) или альтернативной: , .
Это нужно для качественной индексации в поисковиках. Например, если у нас мобилка на поддомене m.site.ru, то , и .
Также в alternate указываются всякие REST API и другие сервисные дела.
�� Для CSS не надо использовать type = "text / css" — устарело.
�� Стоит отдельно описать правило специфичности: если какой-то стиль описывается ниже, то браузер выдаст ему больший приоритет. Это значит, что если мы подключаем стили несколькими файлами, мы можем столкнуться с проблемой, когда при правке стиля в CSS-файле это не повлияет на поведение элемента на странице, потому что в другом файле, подключённом ниже, есть какое-то переназначение того же стиля.
�� Начинающие разработчики часто путают атрибуты src и href .
src расшифровывается как source и переводится как «источник».
href расшифровывается как hyper reference, что переводится как «гиперссылка».
Разницу между этими двумя атрибутами можно описать так: всё, что должно быть загружено на странице — источник. Все сторонние ресурсы, на которые нужно перейти или сослаться — ссылка.
Соответственно, поскольку тег — это ссылка, то для него мы используем атрибут href . Аналогично для тега .
Тем временем, для тега или нужно писать атрибут src , поскольку эти теги загружают данные на страницу, а не перенаправляют пользователя или браузер куда-либо.
�� При подключении стилей не забываем про каскад! ☝️
На собеседовании
Скопировать ссылку "На собеседовании" Скопировано
Почему принято размещать со стилями внутри , а перед закрывающим тегом < / body>? Когда можно нарушить это правило?
Скопировать ссылку "Почему принято размещать link со стилями внутри head, а script перед закрывающим тегом /body? Когда можно нарушить это правило?" Скопировано
Когда мы размещаем стили внутри тега , браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега co стилями в начало документа предотвращает повторную перерисовку.
Тег обычно идёт перед закрывающимся тегом < / body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.
Мы можем размещать скрипт в , если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу . Про их отличия можно почитать подробнее в доке про .
defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.
Ещё один способ — указать атрибут , который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть равносильно , и указание defer не будет иметь никакого эффекта.
HTML тег
HTML тег определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента . Чаще всего тег используется для подключения внешних таблиц стилей:
Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css" .
Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:
Предварительная загрузка страниц
Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег с атрибутом rel="prefetch" , а также указывается целевая страница, которая будет заранее загружена на компьютер.
Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.
Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).
Атрибуты
alternate - ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег с атрибутом rel="canonical" .
Атрибут href , в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:
Атрибут rel HTML тега link
Обязательный атрибут rel определяет отношение между текущим документом и подключаемым внешним документом/ресурсом.
Синтаксис атрибута
Значения атрибута
Значение
Описание
alternate
Ссылка на альтернативную версию текущего документа (например, версия для печати, перевод, зеркало). Пример: