Какой атрибут используется для указания типа включаемого файла в теге ссылки

Обновлено: 21.11.2024

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

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

Отправить электронное письмо со ссылкой

Помимо ссылки на другую веб-страницу или в другом месте на странице, вы также можете создать ссылку на адрес электронной почты. В зависимости от возможностей браузера, операционной системы и установленного программного обеспечения программа электронной почты зрителя автоматически загружается, а адрес электронной почты помещается в поле «Отправить» в новом окне электронной почты.

Для этого введите адрес электронной почты в качестве значения атрибута "href" и добавьте перед ним "mailto:". Например: Электронная почта Джо. Однако это приводит к нежелательному побочному эффекту. Существуют программы, созданные «спамерами», которые сканируют веб-страницы в поисках адресов электронной почты на веб-странице. Если он найдет его, этот адрес электронной почты будет добавлен в базу данных спамера, и этот адрес начнет заполняться нежелательной почтой. К счастью, есть способы обойти это. Если вы заинтересованы, отправьте сообщение в ETS, чтобы узнать больше.

Относительные и абсолютные ссылки

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

С другой стороны, относительные ссылки используют тот факт, что браузер уже знает, где находится текущий документ. Итак, все, что нужно, — это связь между текущим документом и расположением ссылки. Например: является относительным, поскольку дано только имя файла. Браузер знает расположение текущего документа и поэтому предполагает, что файл «page.html» находится в том же каталоге, что и текущий документ. Что делать, если файл, на который вы ссылаетесь, находится не в том же каталоге? Затем вам нужно будет указать либо путь к подкаталогу, включая имена каталогов, либо использовать «../», чтобы перейти «вверх» каталога из того, в котором вы находитесь. Эта таблица может пролить некоторый свет на эту концепцию:

Путь Что это значит
Файл "page .html" находится в текущем каталоге.
Файл "page.html" находится в каталоге на один уровень выше текущей страницы. Используя приведенный выше пример, если текущим каталогом был «другой», то этот путь будет идти на один шаг вверх к каталогу «tips», чтобы найти файл «page.html».
Файл "page.html" расположен в каталоге на два уровня выше текущего каталога.
Файл "page.html" находится в "корне" веб-сервера. Обратите внимание на косую черту перед именем. Это означает, что браузер пройдёт весь путь до самого базового или «корневого» уровня веб-сервера, чтобы найти файл. Например: если текущий файл расположен по адресу «http://www.engr.colostate.edu/ets/how/web/links.html», тогда эта ссылка будет вести на «http://www.engr.colostate. edu/page.html"

Эти методы можно использовать вместе, чтобы найти определенный файл в структуре вашего веб-каталога. Например, нужно перейти на два каталога вверх, а затем вернуться в два каталога с именами «prefs» и «location», чтобы найти веб-файл «index.html».

Местоположения веб-каталогов

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

В инженерной сети есть несколько мест, выделенных для обслуживания веб-страниц через Интернет. Эти места в основном представляют собой каталоги в сети, настроенные как места для «обслуживания» веб-страниц через Интернет. Главное, что нужно помнить в связи с этим, это то, что любой каталог или файл, который находится «вверху» от веб-каталога, невидим для Интернета. Или, другими словами, единственные файлы, видимые в Интернете, находятся в веб-каталоге, созданном для обслуживания веб-страниц, и любых его подкаталогах.И поэтому любая ссылка на место, которое не находится в этом каталоге, не будет работать. Браузер сообщит вам, что ссылка не найдена.

Например: все преподаватели, сотрудники и студенты инженерного колледжа имеют доступ к каталогу «public_html», который был выделен для обслуживания веб-страниц с вашего диска U:\. Таким образом, все файлы, размещенные в каталоге public_html, можно просматривать через Интернет. Но любой файл на вашем диске U:\, который не находится в вашем каталоге public_html, не может быть просмотрен или связан с ним через Интернет.

*Эта строка текста является якорем для ссылки в верхней части страницы. Эта ссылка снова вернется наверх.

12.1 Введение в ссылки и якоря

HTML предлагает множество традиционных идиом для публикации форматированного текста и структурированных документов, но от большинства других языков разметки его отличает возможность работы с гипертекстом и интерактивными документами. В этом разделе представлена ​​ссылка (или гиперссылка, или веб-ссылка), основная конструкция гипертекста. Ссылка — это соединение одного веб-ресурса с другим. Несмотря на простую концепцию, ссылка была одной из основных движущих сил успеха Интернета.

A имеет два конца, которые называются, и направление. Ссылка начинается с привязки «источник» и указывает на привязку «назначение», которой может быть любой веб-ресурс (например, изображение, видеоклип, звуковой фрагмент, программа, HTML-документ, элемент в HTML-коде). документ и т. д.).

12.1.1 Посещение связанного ресурса

Поведением по умолчанию, связанным со ссылкой, является поиск другого веб-ресурса. Такое поведение обычно и неявно достигается путем выбора ссылки (например, щелчком мыши, вводом с клавиатуры и т. д.).

Следующий отрывок HTML содержит две ссылки, одна из которых представляет собой HTML-документ с именем «chapter2.html», а другая — изображение GIF в файле «forest.jpg»:

Активируя эти ссылки (щелкая мышью, вводя с клавиатуры, используя голосовые команды и т. д.), пользователи могут посещать эти ресурсы. Обратите внимание, что атрибут href в каждой исходной привязке указывает адрес целевой привязки с URI.

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

Якоря назначения в HTML-документах могут быть указаны либо элементом A (имя его с помощью атрибута name), либо любым другим элементом (название с помощью атрибута id).

Таким образом, например, автор может создать оглавление, записи которого ссылаются на элементы заголовка H2 , H3 и т. д. в том же документе. Используя элемент A для создания целевых привязок, мы напишем:

Того же эффекта можно добиться, сделав якорями сами элементы заголовка:

12.1.2 Другие отношения ссылок

Самое распространенное использование ссылки — это получение другого веб-ресурса, как показано в предыдущих примерах. Однако авторы могут вставлять в свои документы ссылки, которые выражают другие отношения между ресурсами, а не просто «активируйте эту ссылку, чтобы посетить этот связанный ресурс». Ссылки, которые выражают другие типы отношений, имеют один или несколько типов ссылок, указанных в их привязке к источнику.

роли ссылки, определенные с помощью A или LINK, указываются с помощью атрибутов rel и rev.

Например, ссылки, определяемые элементом LINK, могут описывать положение документа в серии документов. В следующем отрывке ссылки внутри документа под названием «Глава 5» указывают на предыдущую и следующую главы:

Тип первой ссылки — «предыдущая», а второй — «следующая» (два из нескольких распознаваемых типов ссылок). Ссылки, указанные с помощью LINK, не отображаются вместе с содержимым документа, хотя пользовательские агенты могут отображать их другими способами (например, в качестве инструментов навигации).

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

12.1.3 Указание якорей и ссылок

Несмотря на то, что некоторые элементы и атрибуты HTML создают ссылки на другие ресурсы (например, элемент IMG, элемент FORM и т. д.), в этой главе рассматриваются ссылки и привязки, создаваемые элементами LINK и A. Элемент LINK может появляться только в заголовке документа. Элемент A может появляться только в теле.

Когда атрибут href элемента A установлен, этот элемент определяет исходную привязку для ссылки, которую пользователь может активировать для получения веб-ресурса. Исходная привязка — это расположение экземпляра A, а конечная привязка — веб-ресурс.

Полученный ресурс может обрабатываться агентом пользователя несколькими способами: путем открытия нового документа HTML в том же окне агента пользователя, открытия нового документа HTML в другом окне, запуска новой программы для обработки ресурса и т. д. , Поскольку элемент A имеет содержимое (текст, изображения и т. д.), пользовательские агенты могут отображать это содержимое таким образом, чтобы указывать на наличие ссылки (например, подчеркивая содержимое).

Когда установлены атрибуты name или id элемента A, этот элемент определяет привязку, которая может быть местом назначения других ссылок.

Авторы могут устанавливать атрибуты name и href одновременно в одном и том же экземпляре A.

Элемент LINK определяет связь между текущим документом и другим ресурсом. Хотя LINK не имеет содержимого, определяемые им отношения могут отображаться некоторыми пользовательскими агентами.

12.1.4 Заголовки ссылок

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

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

12.1.5 Интернационализация и ссылки

Поскольку ссылки могут указывать на документы, закодированные с использованием разных кодировок символов, элементы A и LINK поддерживают атрибут charset. Этот атрибут позволяет авторам сообщать пользовательским агентам о кодировании данных на другом конце ссылки.

Атрибут hreflang предоставляет агентам пользователя информацию о языке ресурса в конце ссылки, так же как атрибут lang предоставляет информацию о языке содержимого элемента или значений атрибутов.

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

12.2 Элемент A

Начальный тег: обязателен, Конечный тег: обязателен

name = cdata [CS] Этот атрибут дает имя текущему якорю, чтобы он мог быть местом назначения другой ссылки. Значение этого атрибута должно быть уникальным именем привязки. Областью действия этого имени является текущий документ. Обратите внимание, что этот атрибут использует то же пространство имен, что и атрибут id. href = uri [CT] Этот атрибут указывает местоположение веб-ресурса, тем самым определяя связь между текущим элементом (исходной привязкой) и целевой привязкой, определяемой этим атрибутом. hreflang = langcode [CI] Этот атрибут указывает базовый язык ресурса, обозначенного атрибутом href, и может использоваться только при указании атрибута href. type = content-type [CI] Этот атрибут дает рекомендательную подсказку относительно типа содержимого, доступного по целевому адресу ссылки. Это позволяет пользовательским агентам использовать резервный механизм, а не извлекать контент, если им сообщают, что они получат контент в типе контента, который они не поддерживают. Авторы, использующие этот атрибут, берут на себя ответственность за управление риском того, что он может стать несовместимым с содержимым, доступным по целевому адресу ссылки. Текущий список зарегистрированных типов контента см. в [MIMETYPES]. rel = link-types [CI] Этот атрибут описывает отношение текущего документа к якорю, указанному атрибутом href. Значение этого атрибута представляет собой список типов ссылок, разделенных пробелами. rev = link-types [CI] Этот атрибут используется для описания обратной ссылки от привязки, заданной атрибутом href, к текущему документу. Значение этого атрибута представляет собой список типов ссылок, разделенных пробелами. charset = charset [CI] Этот атрибут указывает кодировку символов ресурса, указанного ссылкой. Дополнительные сведения см. в разделе о кодировках символов.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы документа)
  • lang (информация о языке), dir (направление текста)
  • заголовок (название элемента)
  • стиль (информация о встроенном стиле)
  • форма и координаты (карты изображений)
  • onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
  • target (информация о целевом кадре)
  • tabindex (навигация с помощью вкладок)
  • accesskey (клавиши доступа)

Каждый элемент A определяет якорь

  1. Содержимое элемента A определяет положение привязки.
  2. Атрибут name называет якорь таким образом, что он может быть местом назначения для нескольких ссылок (см. также якоря с идентификатором ).
  3. Атрибут href делает эту привязку исходной привязкой ровно для одной ссылки.

Авторы также могут создать элемент A, в котором не указаны привязки, т. е. не указаны href , name или id . Значения этих атрибутов могут быть установлены позже с помощью скриптов.

В следующем примере элемент A определяет ссылку. Якорь источника — это текст «Веб-сайт W3C», а якорь назначения — «http://www.w3.org/»:

Эта ссылка указывает на домашнюю страницу консорциума World Wide Web. Когда пользователь активирует эту ссылку в пользовательском агенте, пользовательский агент получит ресурс, в данном случае HTML-документ.

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

Чтобы явно указать пользовательским агентам кодировку символов на целевой странице, установите атрибут charset:

Предположим, мы определяем привязку с именем "anchor-one" в файле "one.html".

Это создает привязку вокруг текста "Это расположение первой привязки". Обычно содержимое A не отображается каким-либо особым образом, когда A определяет только якорь.

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

Элемент A в следующем примере указывает ссылку (с помощью href ) и одновременно создает именованный якорь (с именем ):

Этот пример содержит ссылку на веб-ресурс другого типа (изображение PNG). Активация ссылки должна привести к получению ресурса изображения из Интернета (и, возможно, отображению, если система настроена на это).

Примечание. Пользовательские агенты должны иметь возможность находить якоря, созданные пустыми элементами A, но некоторые из них не могут этого сделать. Например, некоторые пользовательские агенты могут не найти «пустую привязку» в следующем фрагменте HTML:

12.2.1 Синтаксис имен привязок

Имя привязки — это значение атрибута name или id при использовании в контексте привязок. Имена якорей должны соответствовать следующим правилам:

  • Уникальность. Имена привязок должны быть уникальными в пределах документа. Имена привязок, отличающиеся только регистром, могут не отображаться в одном и том же документе.
  • Сопоставление строк. Сравнение идентификаторов фрагментов и имен привязок должно выполняться путем точного (с учетом регистра) совпадения.

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

НЕПРАВИЛЬНЫЙ ПРИМЕР:
Следующий пример недопустим с точки зрения уникальности, поскольку два имени совпадают, за исключением регистра:

Несмотря на то, что следующий отрывок является допустимым HTML, поведение пользовательского агента не определено; некоторые пользовательские агенты могут (ошибочно) считать это совпадением, а другие — нет.

12.2.2 Вложенные ссылки запрещены

Ссылки и привязки, определяемые элементом A, не должны быть вложенными; элемент A не должен содержать никаких других элементов A.

Поскольку DTD определяет элемент LINK как пустой, элементы LINK также не могут быть вложенными.

12.2.3 Якоря с атрибутом id

Атрибут id можно использовать для создания привязки в начальном теге любого элемента (включая элемент A).

В этом примере показано использование атрибута id для позиционирования привязки в элементе H2. Якорь связан с элементом A.

В следующем примере якорь назначения именуется с помощью атрибута id:

Атрибуты id и name используют одно и то же пространство имен. Это означает, что они не могут оба определить привязку с одним и тем же именем в одном и том же документе. Допустимо использовать оба атрибута для указания уникального идентификатора элемента для следующих элементов: A, APPLET, FORM, FRAME, IFRAME, IMG и MAP. Когда оба атрибута используются в одном элементе, их значения должны быть идентичными.

НЕПРАВИЛЬНЫЙ ПРИМЕР:
Следующий отрывок является недопустимым HTML, поскольку эти атрибуты объявляют одно и то же имя дважды в одном и том же документе.

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

Использовать идентификатор или имя? При принятии решения об использовании идентификатора или имени для имени привязки авторам следует учитывать следующие факторы:

  • Атрибут id может действовать не только как имя привязки (например, селектор таблицы стилей, идентификатор обработки и т. д.).
  • Некоторые старые пользовательские агенты не поддерживают привязки, созданные с помощью атрибута id.
  • Атрибут name позволяет использовать более подробные имена якорей (с объектами).

12.2.4 Недоступные и неидентифицируемые ресурсы

Ссылка на недоступный или неидентифицируемый ресурс является ошибкой. Хотя пользовательские агенты могут по-разному обрабатывать такую ​​ошибку, мы рекомендуем следующее поведение:

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

12.3 Отношения между документами: элемент LINK

Начальный тег: обязателен, Конечный тег: запрещен

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы документа)
  • lang (информация о языке), dir (направление текста)
  • заголовок (название элемента)
  • стиль (информация о встроенном стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
  • href , hreflang , type , rel , rev (ссылки и привязки)
  • target (информация о целевом кадре)
  • медиа (информация о стиле заголовка)
  • кодировка (кодировки символов)

Этот элемент определяет ссылку. В отличие от A, он может появляться только в разделе HEAD документа, хотя может появляться любое количество раз. Хотя ССЫЛКА не имеет содержимого, она передает информацию о взаимоотношениях, которая может отображаться агентами пользователя различными способами (например, панель инструментов с раскрывающимся меню ссылок).

В этом примере показано, как несколько определений LINK могут отображаться в разделе HEAD документа. Текущий документ - "Chapter2.html". Атрибут rel определяет отношение связанного документа с текущим документом. Значения «Index», «Next» и «Prev» объясняются в разделе, посвященном типам ссылок.

12.3.1 Прямые и обратные ссылки

Атрибуты rel и rev дополняют друг друга: атрибут rel указывает прямую ссылку, а атрибут rev — обратную.

Рассмотрите два документа A и B.

Имеет то же значение, что и:

Оба атрибута могут быть указаны одновременно.

12.3.2 Ссылки и внешние таблицы стилей

Когда элемент LINK связывает внешнюю таблицу стилей с документом, атрибут type указывает язык таблицы стилей, а атрибут media указывает предполагаемый носитель или носитель рендеринга. Пользовательские агенты могут сэкономить время, извлекая из сети только те таблицы стилей, которые применимы к текущему устройству.

Типы мультимедиа более подробно обсуждаются в разделе, посвященном таблицам стилей.

12.3.3 Ссылки и поисковые системы

Авторы могут использовать элемент LINK для предоставления поисковым системам различной информации, в том числе:

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

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

В следующем примере мы используем атрибут hreflang, чтобы сообщить поисковым системам, где найти версии документа на голландском, португальском и арабском языках. Обратите внимание на использование атрибута charset для арабского руководства. Обратите также внимание на использование атрибута lang для указания того, что значение атрибута title для элемента LINK, обозначающего руководство на французском языке, указано на французском языке.

В следующем примере мы сообщаем поисковым системам, где найти печатную версию руководства.

В следующем примере мы сообщаем поисковым системам, где найти первую страницу набора документов.

Дополнительная информация содержится в примечаниях в приложении о том, как помочь поисковым системам проиндексировать ваш веб-сайт.

12.4 Информация о пути: элемент BASE

Начальный тег: обязателен, Конечный тег: запрещен

href = uri [CT] Этот атрибут указывает абсолютный URI, который действует как базовый URI для разрешения относительных URI.

Атрибуты, определенные в другом месте

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

При наличии элемента BASE он должен находиться в разделе HEAD документа HTML перед любым элементом, ссылающимся на внешний источник. Информация о пути, указанная элементом BASE, влияет только на URI в документе, где появляется этот элемент.

Например, при наличии следующего объявления BASE и объявления A:

относительный URI "../cages/birds.jpg" будет разрешаться следующим образом:

12.4.1 Разрешение относительных URI

Агенты пользователя должны вычислять базовый URI для разрешения относительных URI в соответствии с [RFC1808], раздел 3. Ниже описано, как [RFC1808] применяется конкретно к HTML.

Агенты пользователя должны вычислять базовый URI в соответствии со следующими приоритетами (от наивысшего приоритета к низшему):

Кроме того, элементы OBJECT и APPLET определяют атрибуты, которые имеют приоритет над значением, установленным элементом BASE. Пожалуйста, ознакомьтесь с определениями этих элементов для получения дополнительной информации о связанных с ними проблемах URI.

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

Связывание с внешней таблицей стилей

Внешняя таблица стилей может быть связана с документом HTML через элемент LINK HTML:

Тег помещается в HEAD документа. Необязательный атрибут TYPE используется для указания типа мультимедиа — text/css для каскадной таблицы стилей — что позволяет браузерам игнорировать типы таблиц стилей, которые они не поддерживают. Настройка сервера для отправки text/css в качестве Content-type для файлов CSS также является хорошей идеей.

Внешние таблицы стилей не должны содержать теги HTML, такие как или

Элемент STYLE помещается в HEAD документа. Обязательный атрибут TYPE используется для указания типа носителя, как и его функция с элементом LINK. Точно так же атрибуты TITLE и MEDIA также могут быть указаны с помощью STYLE.

Очень старые браузеры, такие как Netscape 2.0, не зная об элементе STYLE, обычно отображали его содержимое, как если бы оно было частью BODY, таким образом делая таблицу стилей видимой для пользователя. Чтобы предотвратить это, содержимое элемента STYLE может содержаться в комментарии SGML ( ), как в предыдущем примере. Такое использование токенов комментариев для сокрытия таблицы стилей от старых браузеров следует использовать только в HTML, где токены комментариев фактически являются частью таблицы стилей. В XHTML токены комментария будут настоящим XML-комментарием, а таблица стилей будет скрыта от браузеров, которые обрабатывают документ как XML.

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

Импорт таблицы стилей

Таблица стилей может быть импортирована с помощью инструкции CSS @import. Этот оператор может использоваться в файле CSS или внутри элемента STYLE:

Обратите внимание, что другие правила CSS по-прежнему могут быть включены в элемент STYLE, но все операторы @import должны располагаться в начале таблицы стилей. Любые правила, указанные в самой таблице стилей, переопределяют конфликтующие правила в импортированных таблицах стилей. Например, даже если одна из импортированных таблиц стилей содержала DT , термины определения все равно имели бы желтый фон.

Порядок, в котором импортируются таблицы стилей, важен для определения того, как они каскадируются. В приведенном выше примере, если в импортированной таблице стилей style.css указано, что СИЛЬНЫЕ элементы должны отображаться красным цветом, а в таблице стилей punk.css указано, что СИЛЬНЫЕ элементы должны отображаться желтым цветом, то последнее правило будет иметь преимущество, и СИЛЬНЫЕ элементы будут желтым цветом.

Импортированные таблицы стилей полезны для обеспечения модульности. Например, сайт может разделять разные таблицы стилей по используемым селекторам. Может существовать таблица стилей simple.css, содержащая правила для общих элементов, таких как BODY, P, H1 и H2. Кроме того, может существовать таблица стилей extra.css, содержащая правила для менее распространенных элементов, таких как CODE, BLOCKQUOTE и DFN. Таблица стилей table.css может использоваться для определения правил для элементов таблицы. При необходимости эти три таблицы стилей могут быть включены в документы HTML с помощью оператора @import. Три таблицы стилей также можно объединить с помощью элемента LINK.

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

Стиль может быть встроен с помощью атрибута STYLE. Атрибут STYLE может применяться к любому элементу BODY (включая сам BODY), кроме BASEFONT, PARAM и SCRIPT. Атрибут принимает в качестве значения любое количество объявлений CSS, где каждое объявление отделяется точкой с запятой. Ниже приведен пример:

Этот абзац выделен красным шрифтом New Century Schoolbook, если он доступен.

Обратите внимание, что New Century Schoolbook содержится в одинарных кавычках в атрибуте STYLE, поскольку двойные кавычки используются для содержания объявлений стиля.

Встраиваемый стиль теряет многие преимущества таблиц стилей из-за смешивания содержимого с представлением. Кроме того, встроенные стили неявно применяются ко всем носителям, поскольку не существует механизма для указания предполагаемого носителя для встроенного стиля. Этот метод следует использовать с осторожностью, например, когда стиль должен применяться на всех носителях к одному вхождению элемента. Если стиль должен применяться к одному экземпляру элемента, но только с определенными носителями, используйте атрибут ID вместо атрибута STYLE.

Атрибут CLASS

Атрибут CLASS используется для указания класса стиля, к которому принадлежит элемент.Например, в таблице стилей могли быть созданы классы панка и предупреждения:

На эти классы можно ссылаться в HTML с помощью атрибута CLASS:

Проприетарные расширения

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

В этом примере класс punk можно применить к любому элементу BODY, поскольку с ним в таблице стилей не связан элемент HTML. Используя таблицу стилей примера, класс предупреждения можно применить только к элементу P.

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

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

Атрибут идентификатора

Атрибут ID используется для определения уникального стиля элемента. Правило CSS, такое как

может применяться в HTML через атрибут ID:

Добро пожаловать в группу веб-дизайна!

Каждый атрибут идентификатора должен иметь уникальное значение в документе. Значение должно быть начальной буквой, за которой следуют буквы, цифры или дефисы. Буквы ограничены A-Z и az.

Обратите внимание, что HTML 4 допускает точки в значениях атрибутов ID, а CSS1 не разрешает точки в селекторах ID. Также обратите внимание, что CSS1 позволяет использовать символы Unicode 161–255, а также экранированные символы Unicode в качестве числового кода, но HTML 4 не позволяет использовать эти символы в значении атрибута ID.

Использование идентификатора уместно, когда стиль нужно применить только один раз в любом документе. ID отличается от атрибута STYLE тем, что первый позволяет использовать стили для конкретного носителя, а также может применяться к нескольким документам (но только один раз в каждом документе).

Элемент SPAN

Элемент SPAN был введен в HTML, чтобы позволить авторам задавать стиль, который нельзя привязать к структурному элементу HTML. SPAN может использоваться в качестве селектора в таблице стилей, а также принимает атрибуты STYLE, CLASS и ID.

SPAN — это встроенный элемент, поэтому его можно использовать так же, как такие элементы, как EM и STRONG в HTML. Важным отличием является то, что в то время как EM и STRONG имеют структурное значение, SPAN не имеет такого значения. Он существует исключительно для применения стиля и поэтому не действует, когда таблица стилей отключена.

Некоторые примеры SPAN приведены ниже:

Элемент DIV

Элемент DIV аналогичен элементу SPAN по функциям, но основное отличие состоит в том, что DIV (сокращение от "раздел") представляет собой элемент блочного уровня. DIV может содержать абзацы, заголовки, таблицы и даже другие разделы. Это делает DIV идеальным для маркировки различных классов контейнеров, таких как глава, реферат или заметка. Например:

Подразделения

Элемент DIV определен в HTML 3.2, но в HTML 3.2 разрешен только атрибут ALIGN. В HTML 4.0 среди прочего добавлены атрибуты CLASS, STYLE и ID.

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

Требуется закрывающий тег.

Примечание о проверке

Немногие документы в стиле CSS проходят проверку на уровне HTML�3.2 (Wilbur). HTML�3.2 не определяет ни элемент SPAN, ни атрибуты CLASS, STYLE или ID, а также не поддерживает атрибуты TYPE и MEDIA в элементах LINK и STYLE.

Эти элементы и атрибуты, относящиеся к стилю, не представляют опасности для неподдерживающих браузеров, поскольку они безопасно игнорируются. Документы, в которых используются эти элементы и атрибуты, могут быть проверены на соответствие HTML 4.

Читайте также: