Форматирование произвольного фрагмента Вэб-страницы

Если надо применить стиль к произвольному фрагменту Вэб-страницы, то для этого используется тэг <DIV>. При этом форматируется фрагмент данных, независимо от принадлежности определенным дескрипторам.

Сначала надо задать определение соответствующего стиля <DIV> в тексте листа стилей - ввести служебное слово <DIV>, точку, наименование стиля и список свойств форматирования. После этого надо пометить тэгом <DIV> те области страницы, которые нужно отформатировать.

Следует иметь в виду, что те участки страницы, которые отформатированы с помощью тэга <DIV>, обрамляются пустыми строками. Поэтому помещать этот дескриптор внутри абзаца не рекомендуется, т.к. в этом случае абзац будет разбит на две части.

<STYLE>

DIV.ital{font-style:italic}

<STYLE>

...

<DIV class="ital">

Фрагмент Вэб-страницы

</DIV>

Свойства шрифта - font

font-family

font-size

font-style

font-weight

font-variant

font-family

font-family - определяет тип используемого шрифта.

Можно указывать шрифт либо по названию (Arial), либо по типу (serif).

Если шрифт задавать именем, то желательно указать несколько шрифтов, т.к. у пользователя может не оказаться нужного. Рекомендуется использовать хотя бы один из общеупотребительных, например Arial.

Тип шрифтов можно задавать следующий - monospace, serif, sans-serif, cursive, fantasy. Рекомендуется тип шрифта указывать в конце списка, тем самым обезопасив себя в случае, если ни одного из предусмотренных шрифтов не окажется в наличии.

font-size

font-size - определяет размер шрифта.

В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Можно задавать размер шрифта при помощи предопределенных констант(xx-small, x-small, small, medium, large, x-large, x-large, xx-large).

Либо при помощи относительных единиц (larger, smaller)

font-style

font-style - позволяет задавать признак курсивного начертания текста.

Допустимые значения: normal, italic, oblique

Предопределенная константа italic предназначена для выбора курсивной версии текущего шрифта, а oblique - наклонного варианта его начертания. Оба варианта одного шрифта различаются только углом наклона.

font-weight

font-weight - позволяет отобразить текст полужирным шрифтом.

Для изменения степени "жирности" текста используются следующие значения: normal, bold, bolder, lighter или числа от 100 до 900. Значение 100 соответствует самому светлому шрифту, 900 - самому жирному.

font-variant

font-variant - определение вид текста - обычный, либо написание заглавными буквами размером в строчные. Допустимые значения: normal, small-caps

Свойство color позволяет задать нужный цвет шрифта. Цвет шрифта может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

<p style="font-family:sans-serif;

font-size:larger; font-style:italic;

font-weight:600; font-variant:small-caps; color:red">

Пример использования свойства шрифта font</p>

Пример использования свойства шрифта font

Свойства текста

text-align

text-indent

text-transform

text-decoration

vertical-align

letter-spacing

line-height

list-style

text-align

text-align - принудительно задает нужный признак выравнивания текста.

Фрагмент текста, подлежащий выравниванию с помощью этого свойства, должен быть описан средствами одного из дескрипторов уровня блока (P, TABLE), которые предусматривают обрамление текста пустыми строками сверху и снизу. Допустимые значения: left (влево), right (вправо), center (по центру), justify (по ширине).

Последний режим предусматривает одновременное выравнивание строк текста относительно левого и правого полей страницы за счет увеличения интервалов между словами.

Если свойство text-align применяется по отношению к таблице, форматированию будет подвергнуто только содержимое таблицы, а ее положение на странице останется неизменным.

text-indent

text-indent - задает отступ (сдвиг вправо) для первой строки абзаца.

В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Задав отрицательное значение отступа, можно установить признак форматирования текста с выступом.

text-transform

text-transform - изменяет регистр символов фрагментов текста.

Параметр capitalize приводит к верхнему регистру первые буквы всех слов фрагментов текста.

Параметр uppercase преобразует все символы текста в верхний регистр.

Параметр lowercase преобразует все символы текста в нижний регистр.

Параметр none удаляет все признаки форматирования, приобретенные в результате наследования.

text-decoration

text-decoration - позволяет отметить линиями все фрагменты текста Вэб-страницы.

Параметр underline служит для задания параметра подчеркивания текста.

Параметр line-through служит для задания параметра зачеркивания текста.

Параметр overline служит для размещения линии над фрагментом текста.

Параметр none удаляет все признаки форматирования.

vertical-align

vertical-align - позволяет задать признак вертикального выравнивания для элемента Вэб-страницы.

Параметр baseline предписывает браузеру располагать элементы на уровне базовой линии текста (касательная линия, проходящая по нижнему краю букв, таких как "а" "о", но не "р" или "ф").

Параметр text-top выравнивает элементы относительно верхней границы последнего фрагмента текста.

Параметр text-bottom выравнивает элементы относительно нижней границы последнего фрагмента текста.

Параметр middle выравнивает элементы страницы относительно средних осей соседних объектов.

Параметр top выравнивает элементы относительно высшей точки, принадлежащей объектам, которые расположены в одной строке.

Параметр bottom выравнивает элементы относительно низшей точки, принадлежащей объектам, которые расположены в одной строке.

Параметр sub - переводит элемент в нижний регистр.

Параметр super - переводит элемент в верхний регистр.

letter-spacing

letter-spacing - задает нужный межсимвольный интервал.

В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Отрицательное значение уменьшают величину интервала между символами.

line-height

line-height - задает нужный межстрочный интервал.

Значение межстрочного интервала обычно задается в виде числового коэффициента. Чтобы получить величину интервала, надо умножить коэффициент на высоту текущего шрифта.

В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

list-style

list-style - изменяет стиль представления всех маркированных и нумерованных списков.

Для выбора маркера служат значения circle, disk, square.

Если в качестве маркера надо использовать графическое изображение, то надо применить значение url с указанием местоположения нужного файла.

Для представления нумерованного списка надо использовать значения decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i,ii,iii)upper-roman (I, II, III).

Значения inside и outside позволяют задать положение маркеров или номеров относительно текста элементов списка. Первое обеспечивает возможность обтекания маркера текстом чрезмерно длинного элемента списка. Во втором случае маркеры остаются вне текста элементов списка.

Свойство фона - background.

Свойство background позволяет снабдить графическим фоном любой элемент Вэб-страницы.

Для использования графического фона надо указать имя и местоположение файла, содержащего соответствующее изображение. Для этого служит атрибут URL.

Атрибут repeat определяет степень повторяемости фоновой картинки и может иметь следующие значения:

repeat - картинка бесконечно повторяется по горизонтали и вертикали, заполняя собой все фоновое пространство браузера;

repeat-x - картинка повторяется по горизонтали;

repeat-y - картинка повторяется по вертикали;

no-repeat - картинка не повторяется.

По умолчанию браузер пытается размножить изображение таким образом, чтобы целиком заполнить пространство.

Атрибут scroll - определяет подвижность/статичность фона:

scroll - фон перемещается вместе с содержимым страницы;

fixed - фоновая графика статична.

Свойство background -position определяет положение картинки в окне браузера (top, middle, bottom, left, center, right). При копировании изображения с целью заполнения площади элемента браузер воспринимает значение этого свойства в качестве отправной точки. Координаты начального положения изображения можно задавать в виде процентных отношений (20%), либо абсолютных значений в пикселях (15px), либо констант (top left).

Для изменения цвета фона служит свойство background-color.

Цвет фона может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

Значение transparent указывает на то, что фон является прозрачным, т.е. отсутствует.

Рамки и размеры

Пустые области вокруг элементов Вэб-страницы

Рамки

Поля

Обтекание текстом

Задание размеров

Для того, чтобы было легче понять о чем будет идти речь, можно представить, что каждый элемент Вэб-страницы заключен в невидимую прямоугольную область и окружен:

- полосами чистого пространства,

- рамкой,

- полями.