Разметочные тэги
Для создания структуры страницы CSS использует тэги <div> и <span>. По сути - это одно и тоже, только <span> располагается в строках, а <div> - в блоках. Для привязки стиля к конкретному элементу страницы используют два способа: первый - по уникальному номеру id (в этом случае на странице может присутствовать только один такой элемент) и второй - по классу class (элементов одного класса на странице может быть сколько угодно). Продолжим модернизацию пример а. В таблицу стилей добавим блочный элемент, назначим ему уникальный id, пусть это будет box, зададим ему цвет - чтобы был заметен:
<HTML>
<head>
<style>
body{background:#ffffff;}
p, H3{text-align:center;}
p{font:18pt courier,serif;
color:#0ff;
}
H3{font:24pt arial,serif;
}
p:first-letter{font-size:32pt;
color:#f00;}
#box{background:#bbffff;}
</style>
<head>
<body>
<div id=box>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</div>
</body>
</HTML>
Обратили внимание на то, как обозначен блок в таблице стилей? И как он определен в самом тексте? # - показывет, что элемент определяется по id, в тексте мы обязаны поставить тэг <div id=box> перед началом блокового элемента и закрыть его тэгом </div> после окончания. На странице это выглядит так. В таблице стилей можно задать ширину и высоту блока, в пикселях или в процентах от ширины и высоты окна обозревателя, например:
<HTML>
<head>
<style>
body{background:#ffffff;}
p, H3{text-align:center;}
p{font:18pt courier,serif;
color:#0ff;
}
H3{font:24pt arial,serif;
}
p:first-letter{font-size:32pt;
color:#f00;}
#box{width:50%;
background:#bbffff;}
</style>
<head>
<body>
<div id=box>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</div>
</body>
</HTML>
Блок приобрел ширину. Можно указать и высоту блока, а если не указывать, то блок будет растягиваться по высоте текста, как в примере. Блок можно поместить в любом месте экрана, добавив в его стиль строку
position:absolute; top: 40px; left:30%;
absolute покажет обозревателю, что элемент позиционируется абсолютно по отношению к элементу, в который он вписан, в данном примере - в окне обозревателя. Положение задается определением координат любого из углов (блок-то прямоугольный), здесь - для левого верхнего угла. Блок можно обвести рамкой с использованием стиля
border:2px solid #ff0;
2рх - толщина рамки, solid - рамка сплошная (есть и другие варианты), последнее - это цвет в сокращенном виде. Добавим:
<HTML>
<head>
<style>
body{background:#ffffff;}
p, H3{text-align:center;}
p{font:18pt courier,serif;
color:#0ff;
}
H3{font:24pt arial,serif;
}
p:first-letter{font-size:32pt;
color:#f00;}
#box{position:absolute;
top:40px;
left:30%;
width:50%;
background:#bbffff;
border:2px solid #ff0;}
</style>
<head>
<body>
<div id=box>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</div>
</body>
</HTML>
Смотрим. Ну, а если мы хотим записать стих в стандартном виде (как в книжке), то уберем рамку в примере (это можно сделать, задав ее ширину, равной 0рх) и изменим цвет блока на белый (#ffffff или, сокращенно, #fff - обозреватели это понимают). Вот так. А теперь посмотрим, что можно делать со ссылками .