{"draftJsState":{"blocks":[{"data":{"image":{"id":"680c7dd763bc891002af1b1b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5i1ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте узнаем о link элементе и о том, как его использовать для ссылки на внешние таблицы стилей.","type":"unstyled","key":"1m2cl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент link используется для ссылки на внешние ресурсы, такие как таблицы стилей и иконки сайта. Вот базовый синтаксис для использования link элемента для внешнего файла CSS:","type":"unstyled","key":"bqo19"},{"data":{"image":{"id":"680c7e4cf92bb501d8461af8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1f0pu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут rel используется для указания связи между связанным ресурсом и HTML-документом. В этой ситуации нам нужно указать, что этот связанный ресурс является stylesheet.","type":"unstyled","key":"aqd9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Считается лучшей практикой разделять HTML и CSS в разных файлах. Разработчик использует link элемент для своего внешнего файла CSS вместо того, чтобы писать все в документе HTML.","type":"unstyled","key":"59fjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут href используется для указания местоположения URL-адреса внешнего ресурса.","type":"unstyled","key":"1sd0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере косая dot черта сообщает о том, что искать файл нужно в текущей папке или каталоге styles.css.","type":"unstyled","key":"3hql4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент link должен быть помещен внутрь head элемента, как показано в следующем примере:","type":"unstyled","key":"a5t0p"},{"data":{"image":{"id":"680c8116212586218b14752e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"enu0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":205,"style":"ITALIC"}],"text":"Вы можете встретить несколько link элементов в коде, которые ссылаются на различные таблицы стилей, шрифты и значки. Вот пример использования link элемента для ссылки на внешний шрифт Google под названием Playwright Cuba :","type":"unstyled","key":"ai448"},{"data":{"image":{"id":"680c817d3e3ca00ba0ba25b4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"djl7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google Fonts — это набор бесплатных и открытых пользовательских шрифтов, которые можно использовать в любом проекте. Вы можете выбрать, какие шрифты вы хотели бы использовать, и Google предоставит вам необходимый код HTML и CSS. В этом примере значение preconnect атрибута rel сообщает браузеру о необходимости создания раннего соединения со значением, указанным в href атрибуте. Это делается для ускорения времени загрузки этих внешних ресурсов.","type":"unstyled","key":"d7qk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Другим распространенным вариантом использования link элемента является ссылка на иконки. Вот пример ссылки на фавикон:","type":"unstyled","key":"n1mb"},{"data":{"image":{"id":"680c8276b314dd233f1094b9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"58kcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Favicon это сокращение от favorite icon, представляет собой небольшой значок, который обычно отображается на вкладке браузера рядом с заголовком сайта. Многие веб-сайты используют favicon для отображения значка своего бренда.","type":"unstyled","key":"dhkf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь немного практики, чтобы посмотреть визуально, как это выглядит. Создаем пустой текстовый файл в блокноте или Notepad++ или в VS Studio Code и вставляем туда блок кода:","type":"unstyled","key":"3u7u7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"h194"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3o4vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dtchj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"atnb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ebr1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тест шрифта","type":"unstyled","key":"ebo79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5keqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"96ugm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3g7g8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cofi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9aarh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5u4i1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Привет, мир!

","type":"unstyled","key":"96hum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст с подключённым шрифтом Playwrite CU.

","type":"unstyled","key":"9mf2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5ilf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8vn9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем файл с расширением html и открываем его в браузере. Получаем такую красивую картинку:","type":"unstyled","key":"3hijc"},{"data":{"image":{"id":"680c8357bdcf1456ccb2bbb6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"34d98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"797pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"j7NqxusVR5zZ2t1qpiF2"}],"entityMap":{}},"mentions":[]}