CSS

Разметочные тэги

Для создания структуры страницы CSS использует тэги <div> и <span>. По сути - это одно и тоже, только <span> располагается в строках, а <div> - в блоках. Для привязки стиля к конкретному элементу страницы используют два способа: первый - по уникальному номеру id (в этом случае на странице может присутствовать только один такой элемент) и второй - по классу class (элементов одного класса на странице может быть сколько угодно). Продолжим модернизацию пример а. В таблицу стилей добавим блочный элемент, назначим ему уникальный id, пусть это будет box, зададим ему цвет - чтобы был заметен:

Обратили внимание на то, как обозначен блок в таблице стилей? И как он определен в самом тексте? # - показывет, что элемент определяется по id, в тексте мы обязаны поставить тэг <div id=box> перед началом блокового элемента и закрыть его тэгом </div> после окончания. На странице это выглядит так. В таблице стилей можно задать ширину и высоту блока, в пикселях или в процентах от ширины и высоты окна обозревателя, например:

Блок приобрел ширину. Можно указать и высоту блока, а если не указывать, то блок будет растягиваться по высоте текста, как в примере. Блок можно поместить в любом месте экрана, добавив в его стиль строку

position:absolute; top: 40px; left:30%;

absolute покажет обозревателю, что элемент позиционируется абсолютно по отношению к элементу, в который он вписан, в данном примере - в окне обозревателя. Положение задается определением координат любого из углов (блок-то прямоугольный), здесь - для левого верхнего угла. Блок можно обвести рамкой с использованием стиля

border:2px solid #ff0;

2рх - толщина рамки, solid - рамка сплошная (есть и другие варианты), последнее - это цвет в сокращенном виде. Добавим:

Смотрим. Ну, а если мы хотим записать стих в стандартном виде (как в книжке), то уберем рамку в примере (это можно сделать, задав ее ширину, равной 0рх) и изменим цвет блока на белый (#ffffff или, сокращенно, #fff - обозреватели это понимают). Вот так. А теперь посмотрим, что можно делать со ссылками .

Рейтинг@Mail.ru