html стили, тег link

A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

html стили, тег link Урок 2

Автор: MilovanovV
Категория: HTML сайты » html теги
10-08-2011, 23:15

html стили тег link – ссылка из html документа на внешний файл.

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

Причем, в некоторых случаях, описание стилей лучше располагать в отдельном файле. Для связи html документа с файлом стилей, используется тег link.

Давайте обратимся к html справочнику. Читаем определение тега <link>:

тег <link> устанавливает связь с внешним документом, файлом, в котором находятся описания стилей или шрифтов.

Тег <link> всегда размещается в контейнере <head></head>. В отличие от тега <a>, тег <link> не создает ссылку. Тегу <link> закрывающий тег не нужен.

Синтаксис написания:<head><link ...></head>.

Теперь давайте опишем параметры тега <link>:

Параметр href - показывает путь к файлу, с которым требуется установить связь.

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

Синтаксис написания - <link rel="тип">

Аргументы параметра rel:

stylesheet - подключаемый файл хранит таблицу стилей (CSS).

application/rss+xml - подключаемый файл в формате XML, описывает ленту новостей или анонсы статей.

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

Для подключаемых таблиц связанных стилей применяется тип text/css.

Вот собственно и всё, что касается тега link.

Ну а теперь давайте вернёмся к уроку 1. Для форматирования страницы мы использовали тег style, который был определён в теге head.

Теперь давайте воспользуемся работой тега link. Выведем определение стилей во внешний файл. Посмотрим, как преобразится наш html код, то есть содержимое файла style.html, используемый нами в 1 уроке:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег LINK, параметры href и rel</title>
<link href="css/file.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<H2>Изучаем стили HTML!</H2>
</body>
</html>

Сразу отметим, что файл таблицы стилей, с именем file.css, размещён в папке с именем css.

Файл таблицы стилей - file.css должен содержать определение стилей, в фигурных скобках. Вот содержание данного файла для нашего примера: H2{ font-size: 125%; font-style: italic; font-family: Verdana, Arial; color: Red }

Как Вы видите, общая конструкция вроде бы усложнилась, у нас появилась новая папка и новый файл стилей file.css.

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

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

Например, представьте, что на Вашем сайте состоящим из сотни страниц, необходимо сделать небольшое изменения в формате текста, например, на всех страницах, необходимо изменить цвет шрифта тега H2.

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

Согласитесь это очень удобно.

Хотелось бы отметить, что вынос стилей в отдельный файл, необходимо делать, если это оправдано. То есть, если размер кода стилей подходит к 10% от размера всего кода html документа, тогда стили можно выносить.

Автор: Виктор Милованов

Оставить комментарий