Wiki-учебник по веб-технологиям: HTML/Стили ...

Главная | |

Стили


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

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

<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
 </style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h3>Это заголовок 3</h3>
</body>
</html>


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

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


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

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<h1>Я отформатирован с помощью присоединенной таблицы стилей</h1>
<p>Я тоже!</p>
</body>
</html>


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

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

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

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

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

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


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

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

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


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

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

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

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

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


Теги заголовка

Тег Описание
<head> Определяет информацию о документе
<title> Определяет заглавие документа
<base> Определяет базовый URL для всех ссылок на странице
<link> Определяет ссылку на ресурс
<meta> Определяет мета-информацию
<!DOCTYPE> Определяет тип документа. Этот тег идет перед начальным тегом <html>.