Rel stylesheet: Атрибут rel | htmlbook.ru

Атрибут rel | WebReference

Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

Синтаксис

<link rel="<тип>">

Значения

alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
author
Указывает ссылку на автора текущего документа или статьи.
help
Указывает ссылку на контекстно-зависимую справку.
icon
Адрес картинки, которая символизирует текущий документ или сайт.
license
Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
prev
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
search
Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

Нет.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>LINK, атрибут rel</title> <link rel=»stylesheet» href=»hb.css»> </head> <body> <p>…</p> </body> </html>

Браузеры

3121411
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

— HTML — Дока

Кратко

Скопировано

Позволяет загружать на страницу содержимое из внешнего файла.

Пример

Скопировано

<head>  <link href="style.css" rel="stylesheet"></head>
          <head>
  <link href="style.css" rel="stylesheet">
</head>

Как понять

Скопировано

Матёрые программисты советуют описывать CSS-стили в отдельных файлах: так их легче редактировать, сортировать и подключать к разным страницам сайта. Чтобы применить стили из внешнего файла на странице, используйте тег <link>.

Однако внешним ресурсом может выступать не только файл со стилями, но и любой другой, или же ссылка на него.

Рассмотрим два наиболее часто встречающихся случая:

  1. Изображение, которое будет отображено в качестве фавиконки на вашем сайте;
  2. Внешняя ссылка на шрифт, который применяется на сайте.

Во всех описанных случаях <link> пишется внутри <head>.

Атрибуты

Скопировано

  • href — URL-ссылка на внешний файл. Ссылка может быть как полной или абсолютной http://localhost/sitename/css/style.css, так и неполной или относительной /sitename/css/style.css.

  • rel — говорит браузеру, какую роль играет ссылка внутри тега. Иными словами, этот атрибут выражает отношения между вашей страницей и файлом, на который ведёт ссылка. Самое часто встречающееся значение — rel="stylesheet", оно означает, что ссылка внутри

    <link> ведёт на внешний файл с CSS-стилями. А для добавления фавиконки используется rel="icon". Также rel помогает определить, какую фавиконку на каком устройстве загружать, например: rel="apple-touch-icon-precomposed".

  • sizes — устанавливает размер — ширину и высоту — фавиконки в пикселях, например sizes="114x114". А если написать sizes="any", то браузер сможет масштабировать иконку под любой размер. Так можно делать с иконками в векторном формате, например SVG.

  • media — в зависимости от того, на каком устройстве открывают вашу страницу, можно применять разные стили к тексту или показывать разные иконки. Атрибут

    media указывает устройство, на котором работает тот или иной стиль. Например, <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">.

    Также атрибут media может определять, какая тема используется в ОС. Благодаря этому можно произвести небольшие оптимизации. Например, если у нас есть два разделённых CSS-файла, каждый из которых содержит стили для одной из тем, то приоритет при загрузке будет отдаваться именно тому файлу, который относится к выбранной системной теме:

<link rel="stylesheet" href="css/light.css" media="(prefers-color-scheme: light)"><link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">
          
<link rel="stylesheet" href="css/light.css" media="(prefers-color-scheme: light)"> <link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">
  • as — позволяет указать тип загружаемого контента. Благодаря ему мы помогаем браузеру правильно расставлять приоритеты и планировать загрузку. as стоит применять, если указан атрибут rel="preload" или rel="prefetch".
  • crossorigin — указывает должен ли ресурс загружаться с помощью запроса CORS. Данный атрибут имеет два доступных значения:
    • anonymous — Cross-origin запрос выполняется без отправки учётных данных;
    • use-credentials — Cross-origin запрос выполняется с отправкой учётных данных.

Пример

Скопировано

Самый простой пример, как подключить файл со стилями:

<link href="style.css" rel="stylesheet">
          <link href="style.css" rel="stylesheet">

Можно сделать разные версии сайта, чтобы пользователь мог выбрать удобную для него, например, версию для слабовидящих. Тогда для каждой версии можно подключить свой файл стилей:

<link href="default.css" rel="stylesheet" title="Default Style"><link href="accessibility.css" rel="alternate stylesheet" title="Accessibility">
          <link href="default.css" rel="stylesheet" title="Default Style">
<link href="accessibility.css" rel="alternate stylesheet" title="Accessibility">

Вот как можно использовать разные фавиконки для разных экранов и устройств:

<!-- На iPad третьего поколения с Retina-дисплеем: --><link rel="apple-touch-icon-precomposed" href="favicon144. png"><!-- iPhone с Retina-дисплеем: --><link rel="apple-touch-icon-precomposed" href="favicon114.png"><!-- iPad первого и второго поколений: --><link rel="apple-touch-icon-precomposed" href="favicon72.png"><!-- iPhone, iPod Touch и Android 2.1+ устройства без Retina дисплея: --><link rel="apple-touch-icon-precomposed" href="favicon57.png"><!-- стандартная фавиконка --><link rel="icon" href="favicon32.png">
          <!-- На iPad третьего поколения с Retina-дисплеем: -->
<link rel="apple-touch-icon-precomposed" href="favicon144.png">
<!-- iPhone с Retina-дисплеем: -->
<link rel="apple-touch-icon-precomposed" href="favicon114.png">
<!-- iPad первого и второго поколений: -->
<link rel="apple-touch-icon-precomposed" href="favicon72.png">
<!-- iPhone, iPod Touch и Android 2.1+ устройства без Retina дисплея: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- стандартная фавиконка -->
<link rel="icon" href="favicon32.
png">

Страница может выглядеть по-разному на разных устройствах. Для этого подключим разные стили, в зависимости от устройства и размера экрана:

<link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="all"><link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"><link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
          <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

В этом примере мы подключаем внешний файл со стилями с помощью атрибута rel="stylesheet" тега <link>, указываем RSS-документ текущего сайта (<link rel="alternate" type="application/rss+xml">) и устанавливаем иконку сайта — фавиконку — в адресной строке браузера (<link rel="shortcut icon">):

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Кулинарный блог</title>  <link rel="stylesheet" href="ie. css">  <link rel="alternate" type="application/rss+xml" title="Статьи с сайта cookbook.ru" href="http://cookbook.ru/rss.xml">  <link rel="shortcut icon" href="http://cookbook.ru/favicon.ico"></head><body><p>...</p></body></html>
          
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кулинарный блог</title> <link rel="stylesheet" href="ie.css"> <link rel="alternate" type="application/rss+xml" title="Статьи с сайта cookbook.ru" href="http://cookbook.ru/rss.xml"> <link rel="shortcut icon" href="http://cookbook.ru/favicon.ico"> </head> <body> <p>...</p> </body> </html>

Оптимизация

Скопировано

<link> — очень мощный и гибко настраиваемый тег. С его помощью можно многое оптимизировать, давайте посмотрим, как.

Условная загрузка ресурсов с медиавыражениями

Скопировано

Вы можете обозначить тип или условие внутри атрибута media. Этот ресурс будет загружен только в том случае, если прописанные условия соответствуют действительности.

<link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="all"><link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"><link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
          <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

Предзагрузка ресурсов (

preload)

Скопировано

<link rel="preload"> говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и вы хотите ускорить процесс.

Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

<link rel="preload" href="style.css" as="style">
          <link rel="preload" href="style.css" as="style">

Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время.

Предзагрузка и кэширование (

prefetch)

Скопировано

<link rel="prefetch"> просит браузер загрузить и кэшировать ресурс в фоновом режиме. Загрузка происходит с низким приоритетом, поэтому не мешает более важным ресурсам. Это полезно, если ресурс понадобится на следующей странице, а вы хотите заранее его кэшировать.

Здесь та же ситуация, что и у rel="preload" — браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

<link rel="prefetch" href="style.css" as="style">
          <link rel="prefetch" href="style.css" as="style">

Вероятно, этот тег можно безопасно использовать в любом объёме. Браузеры обычно планируют prefetch с наименьшим приоритетом, так что он никому не мешает. Только всегда стоит учитывать тот факт, что расходуется трафик пользователя, который может стоить денег.

Предварительное подключение к домену (

preconnect)

Скопировано

<link rel="preconnect"> просит браузер заранее подключиться к домену, когда вы хотите ускорить установку соединения в будущем.

Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts или запрашивает ответ в формате JSON с сервера.

Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.

<link rel= "preconnect" href="https://api.my-app.com">
          <link rel= "preconnect" href="https://api.my-app.com">

Используйте этот тег, чтобы немного ускорить загрузку стороннего скрипта или стилей за счёт предварительной установки соединения. Но не забывайте о том, что установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Поэтому используйте preconnect максимум для 4-6 доменов.

Предварительное разрешение записи DNS (

dns-prefetch)

Скопировано

<link rel="dns-prefetch"> просит браузер заранее выполнить резолвинг DNS для домена, если вы скоро будете подключаться к нему и хотите ускорить начальное соединение.

Браузер должен определить его IP-адрес, если будет извлекать какие-то ресурсы оттуда. Например, загружать React из CDN.

Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.

<link rel="dns-prefetch" href="https://api.my-app.com">
          <link rel="dns-prefetch" href="https://api.my-app.com">

Обратите внимание на схожие характеристики у <link rel="dns-prefetch"> и <link rel="preconnect">.

Использовать их вместе для одного домена обычно не имеет смысла, так как <link rel="preconnect"> уже включает в себя <link rel="dns-prefetch"> и многое другое. Это может быть оправданным в двух случаях:

  1. Вы планируете поддерживать старые браузеры: используйте <link rel="dns-prefetch"> в качестве запасного варианта для <link rel="preconnect">.
  2. Вы планируете ускорить подключение более чем к 4−6 доменам: тег <link rel="preconnect"> не рекомендуется использовать более чем с 4−6 доменами. <link rel="dns-prefetch"> потребляет меньше ресурсов, поэтому в случае необходимости используйте его.

Предзагрузка и пререндер страницы (

prerender)

Скопировано

<link rel="prerender"> просит браузер загрузить URL-адрес и отобразить его на невидимой вкладке.

Когда пользователь нажимает на ссылку, страница должна отобразиться немедленно. Это полезно, если вы уверены, что пользователь посетит определённую страницу, и хотите ускорить её отображение.

<link rel="prerender" href="https://my-app.com/pricing">
          <link rel="prerender" href="https://my-app.com/pricing">

Но не злоупотребляйте такой возможностью! Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Поэтому не используйте <link rel="prerender"> более чем для одной страницы.

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Чаще всего <link> используется для CSS-стилей, подгруженных из файла. А также для фавиконки и других важных ссылок.

Здесь также можно указать, является ли страница канонической (главной среди дублированных) или альтернативной: <link rel="canonical">, <link rel="alternate">.

Это нужно для качественной индексации в поисковиках. Например, если у нас мобилка на поддомене m.site.ru, то <link rel="canonical" href="https://site.ru/">, и <link rel="alternate" href="https://m.site.ru/">.

Также в alternate указываются всякие REST API и другие сервисные дела.

🛠 Для CSS не надо использовать type="text/css" — устарело.

🛠 Стоит отдельно описать правило специфичности: если какой-то стиль описывается ниже, то браузер выдаст ему больший приоритет. Это значит, что если мы подключаем стили несколькими файлами, мы можем столкнуться с проблемой, когда при правке стиля в CSS-файле это не повлияет на поведение элемента на странице, потому что в другом файле, подключённом ниже, есть какое-то переназначение того же стиля.

Алёна Батицкая советует

Скопировано

🛠 Начинающие разработчики часто путают атрибуты src и href.

src расшифровывается как source и переводится как «источник».

href расшифровывается как hyper reference, что переводится как «гиперссылка».

Разницу между этими двумя атрибутами можно описать так: всё, что должно быть загружено на странице — источник. Все сторонние ресурсы, на которые нужно перейти или сослаться — ссылка.

Соответственно, поскольку тег <link> — это ссылка, то для него мы используем атрибут href. Аналогично для тега <a>.

Тем временем, для тега <script> или <img> нужно писать атрибут src, поскольку эти теги загружают данные на страницу, а не перенаправляют пользователя или браузер куда-либо.

🛠 При подключении стилей не забываем про каскад! ☝️

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Почему принято размещать <link> со стилями внутри <head>, а <script> перед закрывающим тегом </body>? Когда можно нарушить это правило?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Как связать файлы CSS с файлами HTML: руководство «Все, что вам нужно знать»

КСС

04 января 2023 г.

Джордана А.

4 мин Чтение

HTML (язык разметки гипертекста) и CSS (каскадная таблица стилей) являются основными языками веб-разработки. HTML определяет содержание и структуру веб-сайта, а CSS определяет дизайн и представление. Вместе оба языка позволяют создать хорошо структурированный и функциональный веб-сайт.

CSS определяет объявления стилей и применяет их к документам HTML. Существует три разных способа связать CSS с HTML на основе трех разных типов стилей CSS:

  • Встроенный — использует атрибут стиля внутри элемента HTML
  • Внутренний — записан в разделе файла HTML
  • Внешний — связывает документ HTML с внешним файлом CSS

В этой статье основное внимание будет уделено внешней ссылке CSS на HTML-файл, поскольку она изменяет внешний вид всего вашего веб-сайта с помощью всего одного файла. Мы также включим более подробное объяснение CSS и его преимуществ.

Загрузить полную памятку по CSS

Как связать CSS с HTML-файлом — видеоруководство

Ищете наглядное руководство? Посмотрите это видео.

Подпишитесь на другие обучающие видео! Академия Хостингер

Подписаться

Несмотря на то, что существует несколько способов связывания CSS с файлом HTML, наиболее эффективным способом является связывание внешней таблицы стилей с документом HTML. Для этого требуется отдельный документ с расширением .css , который содержит исключительно все правила CSS без тегов HTML.

В отличие от внутренних и встроенных стилей, этот метод изменяет множество HTML-страниц, редактируя один файл CSS. Это экономит время — нет необходимости изменять каждое свойство CSS на каждой HTML-странице веб-сайта.

Начните связывать таблицы стилей с файлами HTML, создав внешний документ CSS с помощью текстового редактора HTML и добавив правила CSS. Например, вот правила стиля example.css :

 body {
  цвет фона: желтый;
}
ч2 {
  цвет синий;
  поле справа: 30px;
} 

Не добавляйте пробел между значением свойства. Например, вместо margin-right: 30px напишите margin-right: 30 px .

Затем используйте тег в разделе вашей HTML-страницы, чтобы связать файл CSS с документом HTML. Затем укажите имя вашего внешнего файла CSS. В данном случае это example.css , поэтому код будет выглядеть следующим образом:

 

 

Для лучшего понимания, вот разбивка атрибутов, содержащихся в теге :

  • rel — определяет отношение между связанным документом и текущим. Используйте атрибут rel только при наличии атрибута href .
  • тип — определяет содержимое связанного файла или документа между тегами . Он имеет текст или css в качестве значения по умолчанию.
  • href — указывает расположение файла CSS, который вы хотите связать с HTML. Если файлы HTML и CSS находятся в одной папке, введите только имя файла. В противном случае укажите имя папки, в которой вы храните файл CSS.
  • media — описывает тип носителя, для которого оптимизированы стили CSS. В этом примере мы поместили screen в качестве значения атрибута, чтобы подразумевать его использование для компьютерных экранов. Чтобы применить правила CSS к печатным страницам, установите значение 9.0016 напечатать .

После включения элемента в HTML-файл сохраните изменения и введите URL-адрес своего веб-сайта в веб-браузере. Стили, записанные в файле CSS, должны изменить внешний вид веб-сайта.

Хотя внешний CSS помогает упростить процесс веб-разработки, следует помнить о том, что HTML-страницы могут отображаться неправильно до загрузки внешней таблицы стилей. Кроме того, ссылка на несколько документов CSS может увеличить время загрузки вашего сайта.

Кстати, если вы хотите отредактировать определенный HTML-элемент, лучше использовать метод встроенного стиля. Между тем, внутренний или встроенный стиль может идеально подойти для применения правил CSS к одной странице.

Причины использования CSS

CSS — это язык таблицы стилей, который управляет визуальным представлением веб-сайта. Он состоит из списка правил форматирования для стилизации элементов, написанных на языках разметки, таких как HTML. Кроме того, CSS определяет отображение элементов HTML на различных типах носителей, таких как проекционные презентации или устройства телевизионного типа.

Всякий раз, когда браузер находит таблицу стилей, он преобразует файл HTML в соответствии с предоставленной информацией о стиле. Следовательно, важно связать CSS с файлом HTML, чтобы ваш сайт выглядел более привлекательно на разных устройствах.

Другие преимущества связывания файла CSS с документом HTML:

  • Согласованный дизайн. Поддерживает единообразие форматирования и дизайна на всем веб-сайте. Одна корректировка правил CSS может быть универсально применена к нескольким областям веб-сайта.
  • Более быстрая загрузка. Для оформления всех HTML-файлов требуется только один файл CSS. С меньшим количеством строк кода веб-сайт может загружаться быстрее. Сайт также будет кэшировать файл CSS для следующего посещения вашими посетителями.
  • Улучшение SEO . Сохранение стилей CSS в другом файле делает HTML-файл более лаконичным и упорядоченным. В результате веб-сайт будет иметь более чистый и легкий код, что приведет к лучшей сканируемости поисковыми системами.

С другой стороны, у CSS есть несколько недостатков, таких как:

  • Предлагается на нескольких уровнях. Таблица стилей CSS имеет три уровня. Такие разные фреймворки могут сбивать с толку, особенно новичков.
  • Проблемы совместимости. Некоторые таблицы стилей могут не работать в определенных браузерах, поскольку разные браузеры по-разному читают CSS. Используйте средства проверки кода CSS и HTML, чтобы избежать этих проблем.
  • Уязвим к атакам. Открытый исходный код CSS может увеличить риск кибератак. Например, человек, имеющий доступ к файлу CSS, может написать вредоносный код или украсть личные данные. Однако надлежащие меры безопасности могут предотвратить эту проблему.

В целом CSS играет важную роль при разработке веб-сайта. Он управляет форматированием различных элементов на веб-странице, таких как шрифты, цвета фона и позиции объектов. При правильном применении CSS и HTML веб-сайт может обеспечить оптимизированный пользовательский интерфейс.

Заключение

Встраивание правил CSS в элементы HTML может отнимать много времени и энергии. К счастью, внешние таблицы стилей делают этот процесс более эффективным.

Внешние таблицы стилей CSS — это документы, содержащие список правил стиля. Свяжите их с документом HTML, и вы сможете изменять сразу несколько страниц, избегая раздувания кода и сохраняя структуру HTML в чистоте.

Мы надеемся, что знание того, как настроить свой веб-сайт, легко связав CSS с HTML, сэкономит вам время и позволит больше сосредоточиться на увеличении трафика.

Если вам интересно узнать больше о программировании, ознакомьтесь с нашим руководством по обучению программированию.

Как связать HTML с CSS в HTML?

Чтобы связать HTML с CSS в файле HTML, необходимо использовать теги ссылок с правильными атрибутами. Помните, что в качестве самозакрывающегося тега тег ссылки должен быть включен в раздел заголовка вашего HTML-файла.

Почему мой CSS не связывается с HTML?

Убедитесь, что ваши файлы находятся в одной папке, если у вас возникли проблемы с привязкой CSS к HTML. Убедитесь, что путь к файлу указан правильно, если файл CSS находится в другой папке.

Джордана — энтузиаст цифрового маркетинга и веб-разработки. Она любит проводить время за ноутбуком, работать над новыми проектами и узнавать новое. Когда она не занята работой, она путешествует по миру в поисках лучших суши!

Подробнее от Jordana A.

Прикрепление CSS к документу

Присоединение CSS к документу

Вернуться на страницу недели 3 »

Созданный нами CSS будет действовать как таблица стилей для наших веб-страниц. Это то, что будет контролировать тип, цвет, макет и даже интерактивные элементы. Чтобы наши HTML-страницы могли использовать правила CSS, нам нужно убедиться, что наша HTML-страница каким-то образом ссылается на них или присоединяет их.

Существует три распространенных способа присоединения таблиц стилей:

  • Внешний
  • Встроенный/внутренний
  • Встроенный

Внешние стили

Лучший способ присоединения таблиц стилей CSS — использование внешних стилей . С помощью этого метода вы будете писать весь свой CSS в отдельном файле с расширением .css . Затем вы можете ссылаться на файл CSS с каждой из ваших HTML-страниц.

В приведенном ниже примере мы ссылаемся на документ CSS с именем styles.css .

 

<голова>
  <мета-кодировка="utf-8"/>
  Пример внешней таблицы стилей
  
      
  

Внешние таблицы стилей используют тег внутри элемента head .

отн.
Атрибут rel объясняет отношение ссылки к нашему документу. Значение в этом случае всегда будет таблица стилей , поскольку именно на нее мы создаем ссылку.
ссылка
Атрибут href является ссылкой на нашу таблицу стилей. Это работает точно так же, как href , используемый в тегах и .
СМИ
Атрибут media описывает, к какому типу носителя должны применяться наши таблицы стилей. Существует ряд возможных значений, включая screen и print . Вы будете чаще всего использовать экран .

Встраиваемые/внутренние модели

Вы также можете добавить стили CSS вверху HTML-страницы внутри элемента head .

 
<голова>
  <мета-кодировка="utf-8"/>
  Пример встроенных/внутренних таблиц стилей
  
  <стиль>
     п {
        цвет: темно-розовый;
     }
    
  

Это отличный способ быстро протестировать новый стиль на вашей странице. Зарезервируйте внутренние стили для тестирования и экспериментов с новыми правилами CSS.

Встроенные стили

Последний метод заключается в добавлении стилей CSS встроенных в ваш HTML.

Для этого вам просто нужно использовать атрибут стиля и добавить объявление CSS в качестве значения атрибута.

 

style="color: deeppink" >Этот абзац будет "темно-розовым".

Хотя это очень просто, это также не очень расширяемо.

Например, чтобы сделать все абзацы красными, нам нужно будет добавить атрибут стиля к каждому абзацу в нашем HTML-документе.

 

Этот абзац будет "темно-розовым".

Это еще один абзац со словом "темно-розовый".

Это еще один абзац со словом "темно-розовый".

Это много лишнего CSS, что также означает много места для ошибок.

Как правило, использование встроенных стилей считается дурным тоном.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *