Свойство font-weight задает толщину выделяемого текста. Возможные его значения – это bold, normal, bolder (более жирный чем bold) и lighter (менее жирный чем normal).
В строке
<SPAN CLASS="dark"> Новый текст.</SPAN>
Вводится тег span. Этот тег используется для группировки. Он никак не форматирует свое содержание. Его основным назначением является применение стилей к фрагменту текста.
Аналогичным тегом является DIV, который не форматирует текст, однако при его использовании осуществляется переход на новую строку, причем текст выделяется отступами снизу и сверху.
Задание размеров элементов.
На листинге 8 (и рис.6) приведен пример на рассматриваемую тему.
Листинг 8.
<html> <head>
<STYLE TYPE="text/css">
DIV { background-color: #FFCCFF; margin-bottom: .5em }
</STYLE></head><body>
<DIV STYLE="width: 20%">"Это текст
помещенный в блок, который занимает по горизонтали 20%
от ширины окна браузера. </DIV>
<DIV STYLE="width: 80% ; text-align: center">
"Это центрированный текст, занимающий блок,
ширина которого составляет 80%
от ширины окна браузера. </DIV>
<DIV STYLE="width: 20% ; height: 30%; overflow: scroll">
"Это блок занимает только 20%
в ширину и 30% в высоту от окна браузера. Это блок занимает только 20% в ширину и 30% в высоту от окна браузераЭто блок занимает только 20% в ширину и 30% в высоту от окна браузераЭто блок занимает только 20% в ширину и 30% в высоту от окна браузераЭто блок занимает только 20% в ширину и 30% в высоту от окна браузера</DIV> </body></html>
Рис.6.
В строке
<DIV STYLE="width: 20%">Это текст
показано, как определить ширину элемента, отображаемого на экране. Здесь мы указываем, что элемент DIV должен занимать 20% от ширины окна браузера. Аналогично с помощью свойства height может быть задана высота элемента. В качестве значений этих свойств могут быть использованы относительные и абсолютные единицы измерения длины. Например, можно задать ширину элемента следующим образом:
width: 10em
При использовании такой конструкции ширина элемента будет равна размеру шрифта, умноженному на 10.
В строке
<DIV STYLE="width: 80% ; text-align: center">
применяется выравнивание текста с помощью атрибута text-align. Возможные значения данного атрибута – left, center, right, justify (выравнивание по ширине). Конструкция
margin-bottom:.5em
позволяет задать нижний отступ (до следующего элемента) рассматриваемого элемента.
Блоки и обтекание текстом.
Обычно браузер располагает текст и прочие элементы в том порядке, в котором они встречаются в HTML-файле. Тем не менее, как мы уже видели, с помощью абсолютного позиционирования можно сделать отдельные элементы независимыми от стандартного потока текста. Используя плавающие блоки, вы можете прижать один из элементов к краю экрана, и при этом текст документа будет обтекать этот плавающий элемент. Текст HTML-файла приводится на листинге 9. Отображение этого файла в окне браузера показано на рис.7.
Во фрагменте
<DIV STYLE="float:right"> Это плавающий текст. </DIV>
мы располагаем блок ( при этом окружающий текст будет обтекать этот блок) в правой части экрана. Второе свойство, которое мы задаем это - margin. Это свойство определяет расстояние между краем блока, ограничивающего этот элемент, и текстом за пределами этого элемента. Когда элементы отображаются на экране с помощью блоков, браузер окружает каждый элемент отступами, рамками и полями.
Аналогичное свойство padding – расстояние между рамкой элемента и содержимым элемента.
Листинг 9.
<html><head>
<STYLE TYPE="text/css">
DIV { background-color: #FFCCFF;
margin: 1 ;
font-size: 1.5em;
width: 35% }
</STYLE></head><body>
<DIV STYLE="float:right"> Это плавающий текст. </DIV>
<P align=justify> Это обтекающий текст, обтекающий текст,
обтекающий текст,обтекающий текст,обтекающий текст.
Это обтекающий текст, обтекающий текст, обтекающий текст,
обтекающий текст,обтекающий текст.
Это обтекающий текст, обтекающий текст, обтекающий текст,
обтекающий текст,обтекающий текст.
<DIV STYLE="float:left; padding: .5em"> Это плавающий текст.</DIV>
Это обтекающий текст, обтекающий текст,
обтекающий текст,обтекающий текст,обтекающий текст.
Это обтекающий текст, обтекающий текст, обтекающий текст,
обтекающий текст,обтекающий текст. Это обтекающий текст,
обтекающий текст, обтекающий текст,
обтекающий текст,обтекающий текст. </P>
</SPAN></body></html>
Рис.7.