Пример использования стилевых описаний |
Изначально язык HTML разрабатывался как средство структурной разметки документов, но постепенно в нем появлялись средства визуального форматирования. Язык написания отчётных форм в программе СБиС++ основан на языке HTML, поэтому в первую очередь он необходим для структурирования текста отчёта.
Поддержка технологии каскадных таблиц стилей позволяет отделить описание оформления от определения структуры. Эта технология предоставляет целый ряд новых возможностей при форматировании отчётов. По этому рекомендуется не использовать "устаревшие" теги <b>, <u>, <i>, <strike> и <font>. В этом примере будет показано, как можно избежать употребления "устаревших" тегов при помощи технологии стилевых таблиц.
Рассмотрим отчётную форму, в которой для визуального форматирования используются теги и их параметры.
<html>
<head>
<title>
форматирование с помощью тегов
</title>
</head>
<body>
<p border=1px>
<font face="Tahoma" size=14pt
align=center>хотим вывести этот абзац в рамке шрифтом Tahoma
размером 14pt и выровнить по центру.</font>
</p>
<p border=1px>
<FONT face="Tahoma"
size=10pt>Этот абзац тоже будет в рамке, но используем шрифт
размера 10pt.</font>
</p>
<p border=1px>
<font face="Tahoma"
size=10pt>данный абзац похож на предыдущий, но одно его слово
будет выделено <b>жирным</b> шрифтом.</font>
</p>
</body>
</html>
Получился код перегруженный тегами и параметрами. Он будет выглядеть намного проще и понятнее после внедрения стилевых описаний. К тому же появится гораздо больше возможностей для форматирования, например, изменение цвета текста/рамки или рамка вокруг нескольких абзацев.
Для разбиения отчёта на области с одинаковыми условиями отображения следует использовать элементы <div> и <span>. Если требуется определить форматирование для довольно большой области отчёта (например, несколько абзацев), воспользуйтесь тегом <div>. Если же форматирование распространяется не несколько слов или даже символов, выделите их в элемент <span>.
Перепишем представленный выше пример согласно сделанным замечаниям:
<html>
<head>
<title>пример стилевых
описаний</title>
</head>
<body>
<div style="border: 1px solid black;
font-family: Tahoma; font-size: 10pt;">
<!-- все абзацы будут в одной рамке. -->
<p style="font-size: 14pt;
text-align: center">хотим вывести этот абзац шрифтом Tahoma
размером 14pt и выровнить по центру.</p>
<p >этот абзац будет в той же
рамке, но используем шрифт размера 10pt.</p>
<p>данный абзац похож на
предыдущий, но одно его слово будет выделено <span
style="font-weight: bold">жирным</span>
шрифтом.</p>
</div>
</body>
</html>