Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 9:

Дополнительные возможности HTML

Использование стилей в HTML

В HTML 4.0 все форматирование можно переместить из документа HTML в отдельную таблицу стилей.

<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>

<body>
<h1>Это заголовок 1</h1>
<h3>Это заголовок 3</h3>
</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как форматировать документ HTML с помощью информации о стилях, добавленной в раздел заголовка <head>.

<html>
<body>

<a href="lastpage.htm" 
style="text-decoration:none">
ЭТО НЕПОДЧЕРКНУТАЯ ССЫЛКА!
</a>

</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>

<body>
<h1>Я отформатирован с помощью присоединенной таблицы стилей</h1>
<p>Я тоже!</p>
</body>
</html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать тег <link> для соединения с внешней таблицей стилей.

Как использовать стили

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

Внешняя таблица стилей

Внешняя таблица стилей является идеальной, когда стиль применяется к нескольким страницам. С помощью внешней таблицы стилей можно изменить внешний вид всего Web-сайта, изменяя один файл. Каждая страница должна соединяться с таблицей стилей с помощью тега <link>. Тег <link> находится в разделе заголовка <head>.

<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
</html>

Пример выполнения данного HTML-кода

Внутренняя таблица стилей

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

<html>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
</html>

Пример выполнения данного HTML-кода

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

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

Чтобы использовать встроенные стили, используется атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Следующий пример показывает, как изменить цвет и левое поле параграфа:

<html>
<body>
<p style="color: red; margin-left: 20px">
Это параграф 
</p>
</body>
</html>

Пример выполнения данного HTML-кода

Чтобы больше узнать о стилях, почитайте учебник о CSS.

Теги стилей
Тег Описание
<style> Задает определение стиля
<link> Задает ссылку на ресурс
<div> Определяет раздел в документе
<span> Определяет раздел в документе
<font> Не рекомендуется. Используйте вместо этого стили.
<basefont> Не рекомендуется. Используйте вместо этого стили.
<center> Не рекомендуется. Используйте вместо этого стили.
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Ольга Чернявская
Ольга Чернявская

Я заканчиваю проходить курс переподготовки Программирование. Как мне получить документ по окончанию обучения?

Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет