Использование шрифтов в HTML и стили.

Правила использования стилей. Внутренняя таблица стилей.

1. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. С помощью следующего кода HTML можно определить как размер шрифта, так и тип вывода в браузере:

Для основного текста измените тип шрифта – установив Courier, используя теги

 и :

<!DOCTYPE html>

<HTML>

<HEAD>

</HEAD>

<BODY>

это параграф.

это другой параграф.

</BODY>

</HTML>

Атрибут SIZЕ тега < FONT > позволяет задавать размер текста в данной области. Если вы не пользуетесь данным тегом для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3.

Атрибут СОLОR позволяет сделать страницу более красочной. Для этого используется атрибут СОLОR в теге FONТ.

Измените цвет первого параграфа:

2. Тег < FONТ > в HTML используется часто, но лучше стараться его избегать. Использовать его не рекомендуется, т.к. предполагается, что он будет удален в будущей версии HTML.

Тег < FONТ > не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML).

Консорциум World Wide Web (W3C) удалил тег из своих рекомендаций. В будущих версиях HTML, для определения свойств компоновки и вывода элементов HTML будут использоваться таблицы стилей (CSS).

Задание шрифта текста с использованием таблицы стилей (CSS):

<!DOCTYPE html>

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 STYLE="FONT-FAMILY:VERDANA">заголовок </H1>

параграф

</BODY>

</HTML>

3. Каскадные таблицы стилей (Cascading Style Sheets — CSS) были созданы в качестве способа разделения дизайна и содержимого. Рабочая группа W3C отмечает по адресу http://www.w3.org/TR/CSS/#css3 следующее «Третья версия CSS базируется на второй, модуль за модулем, используя в качестве своего ядра спецификацию CSS 2.1. Каждый модуль привносит функциональность и/или заменяет часть спецификации CSS 2.1. Согласно задумке рабочей группы/ новые CSS-модули не будут противоречить спецификации CSS 2.1: они лишь будут привносить новые возможности и совершенствовать определения».

Без CSS3- мы не смогли бы нацеливать отдельные CSS-стили на определенные характеристики устройств, например ширину области просмотра.

Каскадные таблицы стилей обычно хранятся во внешних файлах с расширением.css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS. Также CSS дает возможность из одного документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать глобальное изменение, надо просто изменить стиль, и все элементы в Web будут автоматически изменены.

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

Синтаксис CSS.

Правило записи таблицы стилей состоит из селектора и блока деклараций, заключенного в фигурные скобки. Блок деклараций содержит свойства и значения.

Т.е. синтаксис CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение}

Селектор — элемент/тег HTML, который необходимо определить.

Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение.

Например:

H1 { font-weight: bold;

font-size: 12pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal }

Здесь H1 — это селектор, за которым следует блок деклараций. Каждая декларация, как видно из данного примера, состоит из названия свойства (например, font-weight), символа двоеточия (:) и значения свойства (например, bold). Декларации должны разделяться точкой с запятой (;).

Отметим, что согласно определению CSS все его элементы не зависят от регистра. Таким образом мы можем писать h1 вместо H1, Font-Weight вместо font-weight и т.д. Тем не менее в целях единообразия в данном справочнике мы пишем имена селекторов прописными буквами, а названия свойств — строчными. Значения свойств, которые в документе могут зависеть от регистра, определяются языком документа. Так, названия тегов HTML не зависят от регистра, а названия тегов XML — зависят.

Таблицы стилей могут содержать комментарии. Комментарий начинается с символов /* и заканчивается символами */. Вложенные комментарии не допускаются. Пример:

H1 { font-weight: bold; /* жирность шрифта */

font-size: 12pt; /* размер шрифта */

font-family: Helvetica; /* название шрифта */

font-variant: normal; /* вариант шрифта */

font-style: normal /* стиль шрифта */ }