 |
Использование шрифтов в HTML и стили.
|
|
|
|
Правила использования стилей. Внутренняя таблица стилей.
1. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. С помощью следующего кода HTML можно определить как размер шрифта, так и тип вывода в браузере:
Для основного текста измените тип шрифта – установив Courier, используя теги
<FONT FACE = COURIER> и </FONT>:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8" />
</HEAD>
<BODY>
<P>
<FONT SIZE="2" FACE="VERDANA">
это параграф.
</FONT>
</P>
<P>
<FONT SIZE="5" FACE="TIMES">
это другой параграф.
</FONT>
</P>
</BODY>
</HTML>
Атрибут SIZЕ тега < FONT > позволяет задавать размер текста в данной области. Если вы не пользуетесь данным тегом для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3.
Атрибут СОLОR позволяет сделать страницу более красочной. Для этого используется атрибут СОLОR в теге FONТ.
Измените цвет первого параграфа: <FONT SIZE="2" FACE="VERDANA" COLOR=TEAL>
2. Тег < FONТ > в HTML используется часто, но лучше стараться его избегать. Использовать его не рекомендуется, т.к. предполагается, что он будет удален в будущей версии HTML.
Тег < FONТ > не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML).
Консорциум World Wide Web (W3C) удалил тег <font> из своих рекомендаций. В будущих версиях HTML, для определения свойств компоновки и вывода элементов HTML будут использоваться таблицы стилей (CSS).
Задание шрифта текста с использованием таблицы стилей (CSS):
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8" />
</HEAD>
<BODY>
<H1 STYLE="FONT-FAMILY:VERDANA">заголовок </H1>
<P STYLE="FONT-FAMILY:COURIER">параграф</P>
</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 /* стиль шрифта */ }
Таким образом, существует ряд правил и рекомендаций, которые необходимо запомнить.
1. Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:
p {font-size: 75%}
2. Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:
h1 {font-family: "lucida calligraphy"}
3. Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:
table { font-family: arial, "sans serif"; border-style: dotted}
4. Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:
h2
{ font-family: arial;
margin-right: 20pt;
color:#ffffff }
5. При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:
p,table,li
{font-family: "sans serif"; }
Размеры
Размеры (далее обозначаются как <размер>) указывают на вертикальный или горизонтальный размеры чего-либо. Размер задается как <число>, за которым следует единица измерения. Если размер равен 0, то единицу измерения можно не указывать.
| In | дюймы |
| Cm | сантиметры |
| Mm | миллиметры |
| Pt | точки |
Примеры задания размеров:
H1 { margin: 0.5em }
H1 { margin: 0.5in }
H2 { line-height: 3cm }
H3 { word-spacing: 4mm }
H4 { font-size: 12pt }
Процентные значения
|
|
|
Процентные значения (далее обозначаются как <процент>) указывают на величину чего-либо в процентах от другой величины. Они задаются как <число>, за которым следует символ процента (%), например:
H1 { font-size: 120% }
Всюду, где CSS допускает использование процентных значений, в описании соответствующего свойства четко указывается, какая именно величина является основой для вычисления значения свойства в процентах.
URL
Этот тип значений (далее обозначаемый как <url>) задает ссылку на унифицированные идентификаторы ресурсов. URI задается в форме url( URL ), например:
BODY { background: url(http://mysite.com/bg.gif) }
Текст внутри url() можно заключить в апострофы или кавычки — это ничего не изменит, например:
BODY { background: url("http://mysite.com/bg.gif") }
Цвета
Цветовые значения (далее обозначаются как <цвет>) могут задаваться либо шестнадцатеричным числом с префиксом "#" вида "#rrggbb", задающим RGB-код цвета, либо одним из 16-ти символических имен. CSS допускает использование краткой формы RGB-кодов вида "#rgb"; при этом краткая форма преобразуется в полную повторением цифр, а не добавлением нулей. Иными словами, код #FA1 соответствует полному коду #FFAA11. Кроме того, RGB-код цвета может быть задан конструкцией rgb( r, g, b ), например, следующие декларации задают один и тот же красный цвет:
EM { color: red } /* название цвета */
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* целые в диапазоне 0 до 255 */
EM { color: rgb(100%,0%,0%) } /* действительные в диапазоне от 0.0% до 100.0% */
|
|
|
