Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология
Образование Политология Производство Психология Стандартизация Технологии


Свойства форматирования текста



Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах. Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами. На рисунке 1 показано отображение текста с установками по умолчанию и с увеличенным на 6 pt пробелом между символами:

< P STYLE=" letter-spacing: 6 pt" > Текст с увеличенным расстоянием между символами < /P>


Рис.1. Использование параметра letter-spacing

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

Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные (большие) или строчные (малые), независимо от их задания в тексте документа HTML.

Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-throgh.

Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю - при значении right и по центру - при значении center.

Предупреждение. Текст выравнивается относительно блока, содержащего элемент, а не относительно окна браузера.

Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины. Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из таблицы 1.

Таблица 1. Ключевые значения выравнивания по вертикали
Значения Результат
baseline Выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя.
middle Выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя.
sub Элемент отображается в виде нижнего индекса.
super Элемент отображается в виде верхнего индекса.
text-top Выравнивание верха элемента с верхом шрифта элемента-родителя.
text-bottom Выравнивание низа элемента с низом шрифта элемента-родителя.
top Выравнивание верха элемента с верхом самого высокого элемента строки.
bottom Выравнивание низа элемента по самому низкому элементу строки.

Значения этого свойства, заданные в виде процентов, вычисляются относительно высоты строки (свойство line-height ) самого элемента. Они поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно. Расстояние между базовыми линиями двух соседних строк (высота строки) задается установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.

Примечание. Все текстовые свойства, кроме свойств text-decoration и vertical-allign, наследуются элементами-потомками от родителей.

17. Тэги < DIV> и < SPAN>

Тэг-контейнер < DIV> находит широкое применение при создании HTML -документов. До этого момента мы рассматривали способы задания стилей для различных тэгов. Однако в некоторых случаях требуется задать определенный стиль не для конкретного тэга, а для фрагмента HTML-документа. Для решения этой задачи используется тэг < DIV>. Приведем алгоритм использования этого тэга:

  • определяем фрагмент HTML -документа, для которого нужно задать свой стиль;
  • заключаем этот фрагмент в тэг-контейнер < DIV> и задаем ему имя, пользуясь параметром ID (заметим, что вместо параметра ID можно воспользоваться параметром CLASS );
  • определяем необходимые параметры для заданного имени.

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

Приведенный пример демонстрирует такую возможность:

< HTML> < HEAD> < TITLE> Пример использования тэга DIV< /TITLE> < /HEAD> < BODY> < P> Это обычный текст.< DIV STYLE='color: blue; background-color: yellow; font-family: " Courier New" '> Это текст синего цвета на желтом фоне. Шрифт: Courier New.< /DIV> Это опять обычный текст.< /P> < /BODY> < /HTML>

Результат просмотра этого документа в браузере изображен на рисунке 1.


Рис.1. Результат просмотра HTML -документа в браузере

В этом примере второе предложение HTML -документа обрамляется тегами < DIV> и < /DIV> для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться синем цветом на желтом фоне, шрифт - Courier New.

Обратите внимание на следующие особенности использования тэга < DIV>.

  1. Фрагмент, помещенный в тэг < DIV>, всегда начинается и заканчивается новой строкой.
  2. Если при задании параметров нужно использовать кавычки, то значение свойства STYLE заключается в апострофы.

18. Тэги < DIV> и < SPAN>

Предположим, нужно получить HTML -документ, который отображался в браузере так, как показано на рисунке 1.


Рис.1. Результат просмотра HTML -документа в браузере

Здесь приведен фрагмент Delphi -приложения. Цвет фона фрагмента программы задан значением функции rgb: rgb(230, 230, 230); шрифт - Courier New; размер шрифта - 15 px.

Общие характеристики HTML -документа:

  • шрифт - Times New Roman;
  • цвет - синий;
  • цвет фона документа - значение функции rgb(219, 248, 254);
  • выравнивание - по ширине.

Кроме того, служебные слова выделены жирным шрифтом, а комментарии (символы, заключенные в фигурные скобки) - курсивом синего цвета.

Обратите внимание на то, что тексты программ размещаются в HTML -документах как предварительно отформатированный текст, поэтому разместим наш фрагмент приложения в тэге-контейнере < PRE>.

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

Текст HTML -документа может быть следующим:

< HTML> < HEAD> < TITLE> Пример использования тэга DIV< /TITLE> < STYLE> <! --#fon { color: black; background: rgb(230, 230, 230); font-family: " Courier New"; font-size: 15px; }BODY { color: blue; font-family: " Times New Roman"; text-align: justify; background: rgb(219, 248, 254); }--> < /STYLE> < /HEAD> < BODY> Это обычный текст. А дальше идет фрагмент программы.< DIV ID=fon> < PRE> type TForm1 = class(TForm) Button1: TButton; Label1: TLabel; procedure Button1Click(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form1: TForm1; < /PRE> < /DIV> < /BODY> < /HTML>

Результат просмотра этого документа в браузере приведен на рисунке 2.


Рис.2. Результат просмотра HTML -документа в браузере

Если сравнить рисунки 1 и 2, то можно сделать вывод, что они различаются только отображением служебных слов и комментариев. Реализуем классы для их отображения:

.... #comm { color: blue; font-style: italic; } #sl_sl { color: back; font-weight: bold; }....

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

Теперь осталось поместить служебные слова и комментарии в тэги < DIV> с указанием соответствующего класса, например, так:

.... < BODY> Это обычный текст. А дальше идет фрагмент программы. < DIV ID=fon> < PRE> < DIV ID=sl_sl> type< /DIV> TForm1 = < DIV ID=sl_sl> class< /DIV> (TForm)

....

Просмотр созданного документа в браузере даст не тот результат, который мы ожидали. Почему? Ведь сейчас служебные слова выделяются жирным, а комментарии отображаются курсивом синего цвета, что требовалось по условию задачи! Дело в том, что тэг < DIV> свое содержимое отображает на новой строке, а нам необходимо, чтобы фрагменты текста оставались на своих местах. Поэтому для решения этой задачи тэг < DIV> не подходит. В этом случае нужно воспользоваться тэгом < SPAN>, назначение которого то же, что и тэга < DIV>, однако он оставляет свое содержимое на месте.

Приведем полный текст HTML -документа, решающего указанную задачу.

< HTML> < HEAD> < TITLE> Пример использования тэга DIV< /TITLE> < STYLE> <! --#fon { color: black; background: rgb(230, 230, 230); font-family: " Courier New"; font-size: 15px; } #comm { color: blue; font-style: italic; }#sl_sl { color: back; font-weight: bold; } BODY { color: blue; font-family: " Times New Roman"; text-align: justify; background: rgb(219, 248, 254); }--> < /STYLE> < /HEAD> < BODY> Это обычный текст. А дальше идет фрагмент программы.< DIV ID=fon> < PRE> < SPAN ID=sl_sl> type< /SPAN> TForm1 = < SPAN ID=sl_sl> class< /SPAN> (TForm) Button1: TButton; Label1: TLabel; < SPAN ID=sl_sl> procedure< /SPAN> Button1Click(Sender: TObject); < SPAN ID=sl_sl> private< /SPAN> < SPAN ID=comm> { Private declarations }< /SPAN> < SPAN ID=sl_sl> public< /SPAN> < SPAN ID=comm> { Public declarations }< /SPAN> < SPAN ID=sl_sl> end; < /SPAN> < SPAN ID=sl_sl> var< /SPAN> Form1: TForm1; < /PRE> < /DIV> < /BODY> < /HTML>

Отображение списков

Внешним видом списков также можно управлять, используя свойства каскадных таблиц стилей. Всего таких свойств четыре, причем некоторые из них дублируют параметры тэгов < OL> и < UL>, а другие расширяют возможности отображения списков. Рассмотрим эти свойства подробнее.

Свойство list-style-type определяет стандартный тип маркера списка. Допустимые значения этого свойства перечислены в таблице 1.

Таблица 1. Значения свойства list-style-type
Значение Вид маркера
none Маркер не отображается.
disk Закрашенный кружок.
circle Не закрашенный кружок.
square Закрашенный квадрат.
decimal Арабская цифра с точкой.
lower-roman Римская строчная цифра с точкой.
upper-roman Римская прописная цифра с точкой.
lower-alpha Латинская строчная буква с точкой.
upper-alpha Латинская прописная буква с точкой.

Как видно из приведенной таблицы перечисленные значения свойства list-style-type дублируют значения параметра TYPE тэгов < OL> и < UL>.

Приведем простой пример, иллюстрирующий использование этого свойства.

< HTML> < HEAD> < TITLE> Задание маркеров списка< /TITLE> < STYLE TYPE=" text/css" > <! --OL { list-style-type: lower-roman; }--> < /STYLE> < /HEAD> < BODY> < OL> Список 1< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < OL STYLE=" list-style-type: none; " > Список 2< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < /BODY> < /HTML>

Результат просмотра этого документа в браузере приведен на рисунке 1.


Рис.1. Результат просмотра HTML -документа в браузере

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

Отображение списков

Свойство list-style-image определяет графическое изображение, которое будет использоваться в качестве маркера списка, если оно доступно. Значениями этого свойства могут быть либо none (не задается никакое изображение для маркера), либо полный или относительный адрес графического файла, задаваемый с помощью функции URL():

OL {list-style-image: url(redball.gif); }

Изменим таблицу CSS в примере из предыдущего шага, добавив в нее свойство list-style-image с нижеприведенным значением, сохраним изменения и просмотрим HTML -документ в браузере.

< HTML> < HEAD> < TITLE> Задание маркеров списка< /TITLE> < STYLE TYPE=" text/css" > <! --OL { list-style-type: lower-roman; list-style-image: url(redball.gif); }--> < /STYLE> < /HEAD> < BODY> < OL> Список 1< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < OL STYLE=" list-style-type: none; " > Список 2< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < /BODY> < /HTML>

Результат просмотра измененного HTML -документа приведен на рисунке 1.


Рис.1. Результат просмотра измененного HTML -документа в браузере

Приведенный рисунок позволяет сделать следующие выводы.

  1. Несмотря на то, что основное назначение тэга< OL> - задание нумерованного списка, его можно использовать также для создания маркированного списка.
  2. Задание графического изображения, которое будет использоваться в качестве маркера списка, отменяет действие свойстваlist-style-type. Для удаления маркеров во втором списке достаточно задать в параметре STYLE list-style-image: none;.

Свойство list-style-position определяет положение маркера в списке:

  • в составе абзаца пункта списка (значение inside ) или
  • выдвинутым влево от него (значение outside - задается по умолчанию):
< HTML> < HEAD> < TITLE> Расположение маркеров< /TITLE> < /HEAD> < BODY> < UL STYLE=" list-style-position: inside" > Список 1< LI> Первый элемент списка. Маркер в составе абзаца.< LI> Второй элемент списка. Маркер в составе абзаца.< /UL> < UL STYLE=" list-style-position: outside" > Список 2< LI> Первый элемент списка. Маркер впереди абзаца.< LI> Второй элемент списка. Маркер впереди абзаца.< /UL> < /BODY> < /HTML>

Результат просмотра этого документа в браузере изображен на рисунке 2.


Рис.2. Списки с разным расположением маркеров

Как и для большинства свойств каскадных таблиц стилей, так и для этих свойств определено свойство, в котором можно одновременно определить значения всех свойств отображения списка. Значением свойства list-style является список значений свойств list-style-type, list-style-image и list-style-position:

UL {list-style: circle url(list.gif) inside; }

В заключение отметим, что на первый взгляд может показаться излишним задавать значение circle, так как задано графическое изображение для маркера списка. Однако это не так. Значение circle будет использовано в том случае, если по каким-то причинам указанный файл не будет найден, или просмотр HTML -документа будет осуществляться при отключенной графике.

Блоки

Мы рассматривали тэги < DIV> и < SPAN>, которые позволяют выделять фрагменты HTML -документа и задавать их характеристики. В дальнейшем подобные фрагменты мы будем называть блоками. Начиная с этого шага мы рассмотрим свойства, позволяющие задавать параметры блоков.

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

В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента. Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0. Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например:

BODY {margin: 10px 20px; } /* верх и низ - 10px, право и лево - 20px. */

Приведем пример использования этого свойства.

< HTML> < HEAD> < TITLE> Форматирование поля< /TITLE> < STYLE TYPE=" text/css" > <! --P {margin: 10px 120px; border-style: solid; }--> < /STYLE> < /HEAD> < BODY> < P> Это первый блок.< P> Это второй блок.< /BODY> < /HTML>

Результат просмотра этого документа в браузере изображен на рисунке 1.


Рис.1. Использование свойства margin

Здесь задана каскадная таблица стилей для тэга абзаца < P>, причем для наглядности добавлено свойство border-style со значением solid для отображения сплошной рамки (об этом свойстве разговор пойдет позднее).

Значение 10px задает отступы по вертикали первого абзаца от рабочей области окна браузера и второго абзаца от первого. Аналогично значение 120px - это размеры отступов слева и справа от границы окна браузера.

Блоки

Имеется возможность задавать отступы от краев блока. Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Изменим каскадную таблицу стилей примера из предыдущего шага следующим образом:

< HTML> < HEAD> < TITLE> Форматирование поля< /TITLE> < STYLE TYPE=" text/css" > <! --P {margin: 10px 120px; border-style: solid; padding: 30px; }--> < /STYLE> < /HEAD> < BODY> < P> Это первый блок.< P> Это второй блок.< /BODY> < /HTML>

Результат просмотра измененного таким образом HTML -документа приведен на рисунке 1.


Рис.1. Результат просмотра измененного HTML -документа в браузере

Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Значениями этих свойств могут быть ключевые слова thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, - это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick.

Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border-bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. следующий шаг), но не задан цвет границы, то по умолчанию используется цвет самого элемента. Все предыдущие установки свойств границы не будут иметь никакого воздействия на отображение элемента, если не установлен тип границы, так как по умолчанию тип границы не определен, и она не отображается.

Блоки

Для задания типа любой из четырех частей границы применяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в таблице 1.

 

Таблица 1. Типы линий границы
Параметр Тип границы
none Граница не отображается (несмотря на значение свойства border-width).
solid Граница отображается сплошной линией.
double Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства border-width).
groove Граница отображается, как будто она вдавлена в лист (" желобок" ).
ridge Граница отображается, как будто она выдавлена из листа (" барельеф" ).
inset Весь блок элемента отображается, как будто он вдавлен в лист.
outset Весь блок элемента отображается, как будто он выдавлен из листа.

Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.

Проиллюстрируем использование перечисленных свойств. Изменим пример из предыдущего шага так, чтобы результат его просмотра в браузере был аналогичен приведенному на рисунке 1.


Рис.1. Результат просмотра измененного HTML -документа в браузере

Чтобы получить такой результат нужно задать следующие параметры у тэга < P>:


Поделиться:



Последнее изменение этой страницы: 2017-03-14; Просмотров: 746; Нарушение авторского права страницы


lektsia.com 2007 - 2024 год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! (0.048 с.)
Главная | Случайная страница | Обратная связь