Элемент link

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML


14.3 External style sheets

Authors may separate style sheets from HTML documents. This offers several benefits:

  • Authors and Web site managers may share style sheets across a number of documents (and sites).
  • Authors may change the style sheet without requiring modifications to the document.
  • User agents may load style sheets selectively (based on media descriptions).

14.3.1 Preferred and alternate style sheets

HTML allows authors to associate any number of external style sheets with a document. The style sheet language defines how multiple external style sheets interact (for example, the CSS «cascade» rules).

Authors may specify a number of mutually exclusive style sheets called alternate style sheets. Users may select their favorite among these depending on their preferences. For instance, an author may specify one style sheet designed for small screens and another for users with weak vision (e.g., large fonts). User agents should allow users to select from alternate style sheets.

The author may specify that one of the alternates is a preferred style sheet. User agents should apply the author’s preferred style sheet unless the user has selected a different alternate.

Authors may group several alternate style sheets (including the author’s preferred style sheets) under a single style name. When a user selects a named style, the user agent must apply all style sheets with that name. User agents must not apply alternate style sheets with a different style name. The section on explains how to name a group of style sheets.

User agents must respect when applying any style sheet.

User agents should also allow users to disable the author’s style sheets entirely, in which case the user agent must not apply any persistent or alternate style sheets.

14.3.2 Specifying external style sheets

Authors specify external style sheets with the following attributes of the element:

  • Set the value of to the location of the style sheet file. The value of is a .
  • Set the value of the attribute to indicate the language of the linked (style sheet) resource. This allows the user agent to avoid downloading a style sheet for an unsupported style sheet language.
  • Specify that the style sheet is persistent, preferred, or alternate:

    • To make a style sheet persistent, set the attribute to «stylesheet» and don’t set the attribute.
    • To make a style sheet preferred, set the attribute to «stylesheet» and name the style sheet with the attribute.
    • To specify an alternate style sheet, set the attribute to «alternate stylesheet» and name the style sheet with the attribute.

User agents should provide a means for users to view and pick from the list of alternate styles. The value of the attribute is recommended as the name of each choice.

In this example, we first specify a persistent style sheet located in the file mystyle.css:

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

Setting the attribute makes this the author’s preferred style sheet:

 <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

Adding the keyword «alternate» to the attribute makes it an alternate style sheet:

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">

For more information on external style sheets, please consult the section on

Authors may also use the element to set the document’s preferred style sheet. For example, to set the preferred style sheet to «compact» (see the preceding example), authors may include the following line in the :

<META http-equiv="Default-Style" content="compact">

The preferred style sheet may also be specified with HTTP headers. The above declaration is equivalent to the HTTP header:

Default-Style: "compact"

If two or more declarations or HTTP headers specify the preferred style sheet, the last one takes precedence. HTTP headers are considered to occur earlier than the document for this purpose.

If two or more elements specify a preferred style sheet, the first one takes precedence.

Preferred style sheets specified with or HTTP headers have precedence over those specified with the element.

How to Connect a CSS External Style Sheet to HTML File

To link CSS to an HTML file, we use the <link> tag that you put in the HTML’s <head> section. The link will look like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>

Here’s a breakdown of the attributes contained within the link:

  • rel — defines the relationship between the file that hosts this command and the file defined in the href attribute. The standard value for this attribute is stylesheet.
  • type — defines the content of the linked file. In this tutorial, we set this attribute’s value to text/css. However, you can skip it altogether if you’re using HTML5.
  • href — specifies the location of the CSS file you want to link to the HTML. If the CSS file is in the same directory as the HTML file, you only need to enter the file name. Otherwise, you need to include the folder name in which you store the CSS file (example: CSS/stylesheet.css).
  • media — specifies the type of media the CSS rules are optimized for. In this tutorial, we use the screen value to imply its use for computer screens. If you want to apply the CSS rules to printed pages, you can set the value to print.

Once you’ve included the above link in your HTML file, save the changes and enter your website’s URL in the browser. Styles written in the CSS file should change the look of your website.

Styling Links

Links can be styled with any CSS property (e.g. , , , etc.).

Example

a {  color: hotpink;}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  • — a normal, unvisited link
  • — a link the user has visited
  • — a link when the user mouses over it
  • — a link the moment it is clicked

Example

/* unvisited link */a:link {  color: red;}/* visited link */a:visited {  color: green;}/* mouse over link */ a:hover {  color: hotpink;}/* selected link */a:active {   color: blue;}

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Attribute Values

Value Description
alternate Provides a link to an alternate representation of the document (i.e. print page, translated or mirror)
author Provides a link to the author of the document
bookmark Permanent URL used for bookmarking
external Indicates that the referenced document is not part of the same site as the current document
help Provides a link to a help document
license Provides a link to licensing information for the document
next Provides a link to the next document in the series
nofollow Links to an unendorsed document, like a paid link. («nofollow» is used by Google, to specify that the Google search spider should not follow that link)
noreferrer Requires that the browser should not send an HTTP referer header if the user follows the hyperlink
noopener Requires that any browsing context created by following the hyperlink must not have an opener browsing context
prev The previous document in a selection
search Links to a search tool for the document
tag A tag (keyword) for the current document

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

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

Встроенный стиль является по существу расширением для одиночного элемента, используемого на текущей веб-странице. Для определения стиля элемента к нему добавляется атрибут style, а значением атрибута выступает набор стилевых правил (пример 4).


Пример 4. Использование атрибута style

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Стили</title> </head> <body> <p style=»font-size: 1.2em; font-family: monospace; color: #cd66cc»>Пример текста</p> </body> </html>

В данном примере стиль элемента <p> меняется с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис. 2).

Рис. 2. Использование встроенного стиля для изменения вида текста

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

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

Пример 5. Сочетание разных методов

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подключение стиля</title> <style> h1 { font-size: 1.2em; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> <h1 style=»font-size: 36px; font-family: Times, serif; color: red»>Заголовок 1</h1> <h1>Заголовок 2</h1> </body> </html>

В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style, для второго заголовка — зелёный цвет через элемент <style> (рис. 3).

Рис. 3. Результат применения стилей

12.4 Path information: the BASE element

<!ELEMENT  - O EMPTY               -- document base URI -->
<!ATTLIST BASE
                    #REQUIRED -- URI that acts as base URI --
  >

Start tag: required, End tag: forbidden

Attribute definitions

href =
This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs.

Attributes defined elsewhere

target (target frame information)

In HTML, links and references to external images, applets, form-processing programs, style sheets, etc. are always specified by a URI. Relative URIs are according to a base URI, which may come from a variety of sources. The element allows authors to specify a document’s base URI explicitly.

When present, the element must appear in the section of an HTML document, before any element that refers to an external source. The path information specified by the element only affects URIs in the document where the element appears.

For example, given the following declaration and declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.aviary.com/products/intro.html">
 </HEAD>

 <BODY>
   <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
 </BODY>
</HTML>

the relative URI «../cages/birds.gif» would resolve to:

http://www.aviary.com/cages/birds.gif

12.4.1 Resolving relative URIs

User agents must calculate the base URI for resolving relative URIs according to , section 3. The following describes how applies specifically to HTML.

User agents must calculate the base URI according to the following precedences (highest priority to lowest):

  1. The base URI is set by the element.
  2. The base URI is given by meta data discovered during a protocol interaction, such as an HTTP header (see ).
  3. By default, the base URI is that of the current document. Not all HTML documents have a base URI (e.g., a valid HTML document may appear in an email and may not be designated by a URI). Such HTML documents are considered erroneous if they contain relative URIs and rely on a default base URI.

Additionally, the and elements define attributes that take precedence over the value set by the element. Please consult the definitions of these elements for more information about URI issues specific to them.

Note. For versions of HTTP that define a Link header, user agents should handle these headers exactly as elements in the document. HTTP 1.1 as defined by does not include a Link header field (refer to section 19.6.3).

previous   next     elements   attributes   index

How to reuse an external CSS style


External style sheets are really fun when you have more than one page that needs the same style. Most websites today use multiple pages, and they should share a common style sheet to keep consistency.

The code shows how easily this is done:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>SecondPage.html</title>
 <link rel = "stylesheet"
   type = "text/css"
   href = "myStyle.css" />
 </head>
 <body>
 <h1>Second Page</h1>
 <p>
  This page uses the same style as
  <a href = "externalStyle.html">externalStyle.html</a>.
 </p>
 </body>
</html>

External style sheets have some tremendous advantages:

  • One style sheet can control many pages: Generally, you have a large number of different pages in a website that all share the same general style. You can define the style sheet in one document and have all the HTML files refer to the CSS file.

  • Global changes are easier: If you’re using external styles, you make a change in one place and it’s automatically propagated to all the pages in the system.

  • Separation of content and design: With external CSS, all the design is housed in the CSS, and the data is in HTML.

  • Easy upgrades: Because the design parameters of the entire site are defined in one file, you can easily change the site without having to mess around with individual HTML files.

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с внешней или внутренней таблицей стилей, но никак не со встроенными стилями. Общий синтаксис следующий.

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.

Пример 6. Импорт CSS

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Импорт</title> <style> @import url(‘https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic’); h1 { font-family: ‘Lobster’, cursive; color: green; } </style> </head> <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> </body> </html>

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент <link> (пример 7).

Пример 7. Импорт в файле style.css


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

HTML в примерах

Цель

Определить связи с другими документами. На текущий момент этот элемент не очень распространен, так как мало броузеров или других программ поддерживают его. Элементы LINK могут быть использованы:

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

Типичное отображение

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

<LINK REL=relation HREF=URL>

или

<LINK REV=relation HREF=URL>

Возможные атрибуты

имя атрибута возможные значения смысл
HREF URL URL для связанных ресурсов
REL строка тип связи «вперед»
REV строка тип связи «назад»
TITLE строка необязательная строка заголовка для связанного ресурса

Связь от документа A к документу B по выражению REV=relation — та же самая связь, что от B к A по выражению REL=relation.

Примеры

Элемент связи, определяющий таблицу стилей:

<LINK REL=STYLESHEET HREF="basic.css"> 

Простой элемент LINK, специфицирующий авторскую информацию:

<LINK REV=MADE HREF="mailto:jukka.korpela@hut.fi"> 

Некоторые элементы LINK, которые могут появиться в большом документе, разделенном на отдельные, но взаимосвязанные файлы HTML:

<LINK REL=CONTENTS HREF="toc.html"> 
<LINK REL=PREVIOUS HREF="doc31.html"> 
<LINK REL=NEXT HREF="doc33.html"> 

Примечания

Элемент LINK с REV=MADE иногда используется, чтобы идентифицировать автора документа, либо адрес его электронной почты, либо связь к домашней странице автора. Хотя немногие программы могут использовать эту информацию, ее включение может быть полезным. Заметим, что информация не показывается читателю документа (если он не запросит специально код HTML), поэтому при необходимости Вы должны дополнительно ввести такую информацию с помощью, например, элемента ADDRESS.

В свое время был выпущен отчет Internet о предлагаемых значениях связей. (Официально отчет был закрытым.) Вот некоторые из наиболее известных, упоминаемых в HTML 3.2 Ссылочных спецификациях значений:

установка атрибута роль связанного ресурса
REL=INDEX Документ задает индекс для текущего документа.
REL=GLOSSARY Документ дает глоссарий терминов, которые имеют отношение к текущему документу.
REL=COPYRIGHT Объявление авторского права для текущего документа
REL=CONTENTS Документ оглавления для нескольких взаимосвязанных документов.
REL=NEXT Следующий документ для посещения в управляемом просмотре.
REL=PREVIOUS Предыдущий документ в управляемом просмотре.
REL=HELP Документ предлагает помощь, например, описывая расширенный контекст и предлагая дополнительные ссылки к полезным документам. Это помогает в восстановлении ориентирования пользователя, который «потерялся» на своем пути.
REL=BOOKMARK Закладка, используемая для обеспечения прямых связей по отмеченным (введенным в список закладок) точкам при работе с документом. Атрибут TITLE может быть использован в качестве метки в списке закладок. Несколько закладок может быть определено в каждом документе, предоставляя пользователю средства для ориентирования в расширенном документе.

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

В соединении с таблицами стилей элемент LINK может быть использован с REL=STYLESHEET.

HTML Links — Syntax

The HTML tag defines a hyperlink. It has the following syntax:

<a href=»url«>link text</a>

The most important attribute of the element is the attribute, which indicates the link’s destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

<a href=»https://www.w3schools.com/»>Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

Reasons to Use CSS External Style Sheet File for HTML Programming

Cascading Style Sheet (CSS) is a style sheet language that manages the website’s visual representation. Commonly used with markup languages like HTML, CSS allows you to style each HTML element and give your overall site a more appealing look.

While there are many ways to add CSS to HTML, the simplest method of doing it is by adding all the CSS rules to the HTML directly. Despite so, this CSS method carries many disadvantages. Aside from bloating your code with repetitive CSS rules, its editing process is time-consuming as changes made in one file won’t apply to the others.

To avoid these hassles, you can put the CSS styles into a .css file and link it to the HTML files. That way, one CSS file can be used to style many HTML pages.

Here are the advantages of linking a CSS file to HTML:

  • Time-effective — you only need to create a single CSS file to style all HTML files.
  • Faster load time — the site will cache the CSS file for your visitors’ next visit.
  • Improve SEO — storing CSS styles in another file makes the HTML file more concise and readable by search engines.

С этим читают