html стили, тег style Урок 1

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

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

Автор: MilovanovV
Категория: HTML сайты » html теги
14-06-2011, 22:22

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

Для определения стилей элементов web-страниц, в html применяется тег
<style>

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

Поэтому, давайте рассмотрим основные моменты форматирования элементов web-страниц с применением стилей. И начнем мы изучение html стилей с тега <style>.

Итак, тег <style>, применяется для определения стилей элементов, присутствующих на web-странице. Тег <style> необходимо использовать между тегами <head> и </head>

Синтаксис написания -

<head>
<style type="text/css"> ... </style>
</head>

Лучше всего смотреть работу html кода на конкретном примере. Поэтому давайте

возьмем простой html код и на его примере, последовательно, рассмотрим работу стилей.

Итак, берём вот этот html код:

<!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>Тег STYLE</title>

</head>

<body>

<H2>Изучаем стили HTML!</H2>

</body>

</html

Создадим файл style.html, добавим в него данный код, а затем, откроем файл style.html, браузером. В результате, браузер отобразит в своём окне следующее:

html стили, тег style синтаксис

Итак, в теле html документа у нас написана фраза "Изучаем стили HTML!”, причем, данный текст форматирован единственным тегом <H2>, которым мы задаём размер шрифта равным H2 (заголовок второго уровня).

Теперь давайте добавим в наш html код тег стилей. Согласно синтаксису, добавляем стили между тегами <head>и </head>, в результате получаем:

<!DOCTYPEHTML 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>Тег STYLE</title>

<style type="text/css">

H2{ font-size: 125%; font-style: italic; font-family: Verdana, Arial; color: Red }

</style>

</head>

<body>

<H2>Изучаем стили HTML!</H2>

</body>

</html>

Как видите, тегом <style> мы задали параметры для тега H2.

Теперь, как только в теле html документа, встретится тег <H2>, браузер для форматирования текста будет использовать стили, заданные тегом <style>

Самое важное здесь то, что для тега H2, Вы задаете стиль один раз, а использовать эти параметры в коде документа html, можно сколько угодно раз.

Конкретно для данного кода, тегом <style>, мы задали следующие параметры тега H2:

font-size: 125%; - размер шрифта 125%

font-style: italic; - курсивный шрифт

font-family: Verdana, Arial, sans-serif; - использовать шрифт - Verdana, Arial

color: Red - цвет шрифта красный.

Смотрим, как браузер отработает данный код:

Тег STYLE

В определении тега <style> </head>.

Число параметров, которые описывает тег <style>

Поэтому, в некоторых случаях, есть смысл вынести описание стилей сайта в отдельный файл, а между тегами <head> и </head> разместить ссылку на этот файл.

Для реализации этой процедуры, то есть для связи html документа с таблицей стилей, вынесенной в отдельный файл, в html, используется тег <link>.

О том, как работает тег <link>, мы поговорим в следующем уроке.

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

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