Каскадные
(многоуровневые) таблицы стилей - (CSS) - это мощный стандарт на
основе текстового формата, определяющий представление данных в браузере.
Если формат HTML предоставляет информацию о составе
документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом
каскадные таблицы стилей дают возможность хранить содержимое отдельно от его
представления.
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Встроенный стиль
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Встроенный стиль
Встроенный стиль
применяется к любому тегу HTML с помощью атрибута style следующим
образом:
<P
style="font: 12pt Courier New"> Всем привет.Мы учим CSS
</P>
Можно
добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь
смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии,
якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные
стили.
Существуют два тега,
которые помогают применять встроенные стили к разделам страницы. Это теги <div>
(division - раздел) и <span> (промежуток).
Эти теги определяют
диапазон текста, так что все, находящееся между ними, будет оформлено с помощью
нужного стиля. Единственное различие между <div> и <span> состоит
в том, что <div> создает принудительный разрыв строки, a <span> -
нет.
Следовательно, нужно
использовать <span> для изменения стиля любой части текста,
меньшей абзаца.
Внедренные
стили используют
тег <style>,
расположенный между тегами </head> и <bodу> в
стандартном документе
HTML.
Рассмотрим пример
внедренного стиля:
<html>
<head>
<title>Embedded
Style Sheet Example </title>
</head>
<style>
BODY{
background: #FFFFFF;
color: #000000;
}
H1{
font: 14pt verdana;
color: #CCCCCC;}
P{font: 12pt times;}
A{color: #FFOOOO;
text-decoration: none}
</style>
Задание
свойств и значений
шрифта
У шрифтов есть очень
много свойств, которые можно изменять, и
очень много значений,
которые могут принимать эти свойства.
Как и для стандартных шрифтов HTML, можно задавать свойства для управления
Как и для стандартных шрифтов HTML, можно задавать свойства для управления
размером и цветом.
Однако для шрифтов HTML нельзя изменять насыщенность и тип
шрифта, а также
высоту строки или интерлиньяж (расстояние между отдельными
строками текста).
Кроме того, доступные в таблицах стилей методы управления
размером шрифта
намного превосходят уровень, предлагаемый стандартами HTML.
Цвет
Таблицы стилей используют стандартные методы работы с цветами броузера. Другими
Цвет
Таблицы стилей используют стандартные методы работы с цветами броузера. Другими
словами, для
получения оптимальных результатов используйте шестнадцатиричный (и
лучше всего,
поддерживаемый броузерами) цвет. Вы можете добавлять цвет, как и
другие свойства
стиля, в любой подходящий тег HTML для встроенных, внедренных и
связанных стилей.
Например, при описании цвета заголовка первого уровня указоно значения color:#333399;, в результате мы
Например, при описании цвета заголовка первого уровня указоно значения color:#333399;, в результате мы
видим заголовок
"Каскадные таблицы стилей" темно-синего цвета.
Насыщенность
Насыщенность (weight) показывает толщину шрифта. Например, для гарнитуры Arial существуют такие разновидности: жирный
Насыщенность
Насыщенность (weight) показывает толщину шрифта. Например, для гарнитуры Arial существуют такие разновидности: жирный
(black), полужирный
(bold), светлый (light) и т. д.
Размер
Размер шрифта в таблицах стилей можно определять, используя пункты ( points), пиксели (pixels), дюймы (inches), сантиметры (centimeters), миллиметры (millimeters) и пики (picas), а также используя новые единицы измерения. Для Web-дизайнеров естественно выбирать пункты или пиксели, хотя все будет зависеть от ваших вкусов.
Размер шрифта в таблицах стилей можно определять, используя пункты ( points), пиксели (pixels), дюймы (inches), сантиметры (centimeters), миллиметры (millimeters) и пики (picas), а также используя новые единицы измерения. Для Web-дизайнеров естественно выбирать пункты или пиксели, хотя все будет зависеть от ваших вкусов.
