|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 24509 / 10756 | Оценка: 4.30 / 4.02 | Длительность: 08:22:00
Специальности: Программист, Разработчик интернет-проектов
Теги:
Лекция 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> | Не рекомендуется. Используйте вместо этого стили. |
