: элемент — ссылка на внешний ресурс

Атрибуты HTML-элемента link

HREF

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

Пример

<link rel="stylesheet" href="../styles/default.css">

CROSSORIGIN

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения (без учета регистра):

  • anonymous: CORS запросы к элементу будут содержать установленный флаг «omit credentials«;
  • use-credentials: CORS запросы к элементу не будут содержать установленный флаг «omit credentials«.

Пример

<link rel="icon" href="http://www.otherserver.com/icons/default.png" crossorigin="anonymous">

REL

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа (содержащего ссылку).

Элемент link должен содержать либо атрибут rel, либо атрибут itemprop, но не оба сразу. Атрибут href также является обязательным.

Пример

<link rel="prev" href="article1.html"> 
<link rel="next" href="article3.html"> 
<link rel="license" href="copyright.html"> 
<link rel="alternate" href="spanish-version.html" hreflang="es">

MEDIA

Список медиа-запросов с указанием типов медиа (и их характеристик), для которых предназначен связанный ссылкой ресурс. Например, документ или ресурс может быть оптимизирован для печати (меньше цветов, изображений и фоновых тонов), под мобильные устройства или обычные экраны. Значение по умолчанию -«all«.

Пример

<link rel="alternate" href="printer-version.html" media="print">

HREFLANG

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе (указан в атрибуте HREF).

Пример

<link rel="alternate" hreflang="es" href="spanish-version.html">

TYPE

Тип контента (или Internet Media Type), который должен содержать связанный ресурс.

Пример

<link rel="icon" href="icon.png" type="image/png"> 
<link rel="next" href="article2.html" type="text/html">

SIZES

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

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение «icon«. Иначе ситуации его использование является недействительным.

Пример

<link rel="icon" href="icon.ico" sizes="64x64 32x32 16x16"> <link rel="icon" href="icon.svg" sizes="any">

CHARSET

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type, чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Пример

<link rel="next" href="article2.html" charset="utf-8">

REV

Значение текущего документа (содержащего ссылку) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel.

Пример

<link rev="index" href="article1.html"> 
<link rev="index" href="article2.html"> 
<link rev="index" href="article3.html">

Данная публикация является переводом статьи «LINK ELEMENT» , подготовленная редакцией проекта.

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

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

  1. Связанные стили.
  2. Глобальные стили.
  3. Блочные стили.
  4. Внутренние стили.
  5. Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

  1. Чёрный
  2. Красный
  3. Зелёный
  4. Синий
  5. Оливковый

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

  1. <style>mystyle.css</style>
  2. <style>@mystyle.css</style>
  3. <link rel=»stylesheet» href=»http://htmlbook.ru/mystyle.css»>
  4. <link>@import url(mystyle.css)</link>
  5. <stylesheet>mystyle.css</stylesheet>

4. Какой атрибут используется для определения внутреннего стиля?

  1. style
  2. class
  3. styles
  4. font
  5. link

О приложении

LINK – мессенджер для безграничного общения. Общение является неотъемлемой частью нашей жизни. Однако зачастую оно ведется в профессиональной сфере. А между тем общение с родственниками, с друзьями — со всеми теми, с кем можно разделить свои горести и радости, необходимо. Не так просто найти друзей во взрослой жизни.

Статистика показывает, что чаще друзья появляются в студенческую пору. Но жизнь разбрасывают людей по разным частям земного шара. Многие поддерживают связь за счет писем или телефонных звонков. Не так давно появились различные мессенджеры, но ряд из них до сих пор имеет ограниченный функционал. А ведь хочется с друзьями не просто переписываться, но и слышать их, и видеть. Поэтому мы предлагаем вам скачать 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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients

Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex
Items
CSS Flex Responsive

Другие механизмы предзагрузки ресурсов

Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как :

  • давно поддерживается в браузерах, но предназначен для предварительной загрузки ресурсов, которые будут использоваться при следующей навигации/загрузке страницы (например, когда вы переходите на следующую страницу). Это нормально, но бесполезно для текущей страницы! Кроме того, браузеры будут отдавать ресурсам предварительной загрузки более низкий приоритет, чем ресурсам — текущая страница важнее следующей. См. Предвыборку ссылок FAQ для подробностей.
  • некоторое время назад поддерживался в Chrome и предназначался для решения проблемы предзагрузки ресурсов для текущей навигации/загрузки страницы, но у него была проблема — не было возможности определить приоритет для получения элементов. ( тогда не существовало), поэтому все они в конечном итоге были извлечены с довольно низким приоритетом, что не помогло ситуации.
  • Существует ряд загрузчиков ресурсов на основе сценариев, но они не имеют никакой власти над очередью приоритетов выборки браузера и подвержены тем же проблемам с производительностью.

Внутренние стили

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

Пример 3.4. Использование внутреннего стиля

HTML5CSS 2.1IECrOpSaFx

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

Рис. 3.2. Использование внутренних стилей для изменения вида текста

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

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

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

HTML5CSS 2.1IECrOpSaFx

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

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

Other resource preloading mechanisms

Other preloading features exist, but none are quite as fit for purpose as :

  • has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page). This is fine, but isn’t useful for the current page! In addition, browsers will give resources a lower priority than ones — the current page is more important than the next. See Link prefetching FAQ for more details.
  • renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats as a NoState prefetch instead.
  • This API has not been standardized. was supported in Chrome a while ago, and was intended to tackle the same issue as , but it had a problem: there was no way to work out a priority for the items ( didn’t exist back then), so they all got fetched with fairly low priority.
  • There are a number of script-based resource loaders out there, but they don’t have any power over the browser’s fetch prioritization queue, and are subject to much the same performance problems.

Уход за металлическими стульями

Ссылка в html элемент

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

<a href="webupblog.ru">Текст ссылки</a>

Атрибут href

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

Различают несколько видов путей:

Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.

<a href="/about.html">О сайте</a>

Абсолютный — наоборот указывает полный путь к странице. Такая страница может находится на другом сервере и относится к другому сайту. Обязательно указывать домен сайта.

<a href="http://webupblog.ru/ob-avtore/">Об авторе</a>

Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.

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

<a href="#top">Вверх</a>

Атрибут title

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

<a href="#top" title="После клика вы перейдете к шапке сайта.">Вверх</a>

Атрибут target

Этот атрибут управляет поведением при открытии ссылки, по умолчанию ссылка открывается в текущем окне. Рассмотрим его основные значения.

_blank — открывает ссылку html в новом окне_self — открывает в текущем окне

Атрибут rel

Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.

<a href="http://webupblog.ru/ob-avtore/" rel="author" >Об авторе</a>

Современный метод

Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload». Но даже этот вариант использует обработчик события onload.

Ниже приведен использования rel=»preload»:

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.

Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media

Атрибуты¶

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

Также для этого элемента доступны универсальные атрибуты.

href

Путь к файлу, на который делается ссылка.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу.

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

Нет.

media

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

Синтаксис

Значения

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

В HTML5 в качестве значений могут быть указаны медиа-запросы.

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

rel

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

Синтаксис

Значения

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

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

Нет.

sizes

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

Синтаксис

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

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

Нет.

type

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

Синтаксис

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип .

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

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

<!DOCTYPE html><html><head>
  <link rel=»stylesheet» href=»styles.css»>
</head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.

Here is what the «styles.css» file looks like:

«styles.css»:

body {  background-color: powderblue;}h1 {  color: blue;}p {  color: red;}

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

Пример конфигурации: rel=alternate hreflang=x

Компания «Пример» запустила сайт предназначенный для пользователей из Германии, Швейцарии и России.

Под следующим URL находятся в основном одно и тоже содержание, но с некоторыми отличиями вытекающими из этого региона:

  • http://www.example.com/site.html – главная на немецком языке;
  • http://de-de.example.com/site.html – немецкая версия с ценами в евро;
  • http://de-ch.example.com/site.html – немецкая версия с ценами в швейцарских франках;
  • http://ru.example.com/stranica.html – сайт на русском языке.

Атрибуты rel=»alternate» hreflang=»x» работают на уровне страницы, а не всего сайта, поэтому вы должны соответствующим образом отмечать каждый набор страниц, включая главную страницу.

Обновите код HTML во всех URL, добавив группу элементов с атрибутами rel=»alternate» hreflang=»x» на каждой странице:

<link rel=»alternate» hreflang=»de» href=»http://www.example.com/site.html» />
<link rel=»alternate» hreflang=»de-de» href=»http://de-de.example.com/site.html» />
<link rel=»alternate» hreflang=»de-ch» href=»http://de-ch.example.com/site.html» />
<link rel=»alternate» hreflang=»ru» href=»http://ru.example.com/stranica.html» />

Это руководство для алгоритма Google, что все эти страницы надо рассматривать в качестве взаимозаменяемых версий.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used. 

Assume that an external style sheet has the following style for the <h1> element:

h1
{
  color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1> element:

h1
{
  color: orange;   
}

Example

If the internal style is defined after the link to the external style sheet, the <h1> elements will be
«orange»:

<head><link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
<style>h1 {  color: orange;}</style></head>

Example

However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be
«navy»: 

<head><style>h1 {  color: orange;}</style><link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
</head>

External CSS

With an
external style sheet, you can change the look of an entire website by changing
just one file!

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html><html><head><link rel=»stylesheet» href=»mystyle.css»></head><body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body></html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the «mystyle.css» file looks:

«mystyle.css»

body {  background-color: lightblue;}h1 {  color: navy;  margin-left: 20px;}

Note: Do not add a space between the property value and the unit (such as ). The correct way is:

Внедряем CSS-код, с помощью тега

Урок №8Внедряем CSS-код, с помощью тега <link>

Рассмотрим третий способ внедрения CSS-кода в HTML-документ: Внедрение с помощью тега <link>

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

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

Создайте на рабочем столе папку Мой сайт, в папке создайте три HTML-файла:
и один CSS-файл:

В HTML-файлах, разместите следующий HTML-код:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>

  <a href="index.html">Снежный барс</a>
  <a href="polyarnyi-volk.html">Полярный волк</a>
  <a href="polyarnaya-sova.html">Полярная сова</a>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <title>Страница о полярном волке</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Полярный волк</h1>
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
      
  <a href="index.html">Снежный барс</a>
  <a href="polyarnyi-volk.html">Полярный волк</a>
  <a href="polyarnaya-sova.html">Полярная сова</a> 
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <title>Страница о полярной сове</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Полярная сова</h1>
  <p>
   Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, 
   из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, 
   длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал 
   распространения - территория тундры: Евразия, Северная Америка, 
   Гренландия.</p>
  <p>
   Полярная сова обитает обычно в открытой местности, в лесах встречается 
   редко. Питается в основном, мелкими грызунами: леммингами, в год может 
   съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие 
   хищники, птицы, рыба и даже падаль.</p>

  <a href="index.html">Снежный барс</a>
  <a href="polyarnyi-volk.html">Полярный волк</a>
  <a href="polyarnaya-sova.html">Полярная сова</a>       
 </body>
</html>

CSS-документ файла , должен содержать следующий код:

h1 {
 color: red;
 }
p {
 color: blue;
}

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

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

Давайте сделаем текст в абзацах всех страниц, зелёным. Для этого в , вместо значения , впишем значение

p {
 color: green;
}

Теперь цвет текста в абзацах, всех страниц сайта, между тегами стал зелёным.

Задание: сделайте цвет ссылок , оранжевым

Пример использования

<link>

HTML 5 - <link rel = "stylesheet" href = "css/styles.css">
HTML 4.01 - <link rel = "stylesheet" type = "text/css" href = "css/styles.css">
XHTML - <link rel = "stylesheet" type = "text/css" href = "css/styles.css">

Для всех типов документов необходимы два атрибута:

  • rel = «stylesheet» — указывает тип ссылки (в нашем случае таблица стилей).
  • href — задает URL-адрес местонахождения внешнего CSS-файла (принцип действия аналогичен атрибуту src тега <img> ).

При необходимости можно добавить несколько таблиц стилей, используя несколько тегов <link>, которые ссылаются на различные таблицы стилей.

Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера — цвет всех элементов черный, а цвет заднего фона белый).

Для просмотра страниц пользователями мы установим следующие CSS стили (файл tag_link.css), которые свяжем с документом, используя элемент <link>:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы, вынесем их тоже в отдельный файл CSS (файл tag_link_print.css) и свяжем с документом, используя элемент <link>, а именно:

h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */

Теперь полный пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута media HTML тега <style></title>
<link rel = "stylesheet" href = "../tag_link.css">
<link media = "print" rel = "stylesheet" href = "../tag_link_print.css">
</head>
<body>
	<h2>Утконос</h2>
	<p><b>Утконос (лат. Ornithorhynchus anatinus)</b> — водоплавающее млекопитающее отряда однопроходных, обитающее в Австралии. Это единственный современный представитель семейства утконосовых (Ornithorhynchidae); вместе с ехиднами образует отряд однопроходных (Monotremata) — млекопитающих, по ряду признаков близких к рептилиям. Это уникальное животное является одним из символов Австралии; оно изображено на реверсе австралийской монеты в 20 центов.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как пример отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):


Пример использования атрибута media HTML тега link (таблицы стилей для конкретных типов устройств).

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий