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

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

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" "http://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" "http://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>, мы поговорим в следующем уроке.

 

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

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации