Чертёж девятый, половина вторая: CSS, оформление блока

Сегодня мы поработаем с очень интересными, иногда полезными, но опасными (прежде всего передозировкой) возможностями CSS. Чтобы лучше с ними (с возможностями) ознакомиться, мы шагнём далеко за эту опасную границу, при этом наша страничка приобретёт довольно дикий вид. Поэтому, чтобы после не тратить время на её «причёсывание», проведём все эксперименты с копией нашей главной странички.

  • Создай копию файла glav.htm:
    • открой его в Kate;
    • выполни команду Файл → Сохранить как…;
    • измени имя файла на glav-proba.htm;
    • нажми Сохранить.
  • Допиши в тег <MARQUEE> выделенный текст:
    <MARQUEE behavior="alternate" style="position:absolute; left:0; top:150;">Заходите ко мне
 в гости</MARQUEE>
    и посмотри результат.

Что мы сделали? Во-первых, мы применили третий способ стилевого оформления — строчнóй (его ещё называют inline-стиль). Задаётся он атрибутом style любого тега. При этом всё, что заключено в этот тег (не важно, текст это, графика или то и другое вместе), становится блоком. И к этому блоку применяется описанное в атрибуте style оформление.

В связи с эти небольшое замечание: если строчной стиль требуется применить к тексту, который нельзя окружить каким-либо тегом, например, одно слово или даже букву, применяют специальный тег <SPAN></SPAN> с тем же атрибутом style. К большой же части страницы применяется тег <DIV></DIV>.

Во-вторых, мы использовали новые параметры:

position — способ позиционирования блока, может принимать значения absolute (координаты блока отсчитываются от левого верхнего угла окна браузера) и relative (координаты отсчитываются относительно предыдущего блока);

left и top — координаты блока, задающие расстояние слева и сверху.

Таким образом, мы расположили бегущую строку на расстоянии 150 точек от верхнего края окна. При этом совершенно неважно, что там уже что-то находится, так что мы добились невозможного в HTML эффекта — наложения одного объекта на другой.

  • Продолжаем эксперименты:
    • немного измени тот же тег (не забывай каждый раз смотреть, что получилось):
      • <MARQUEE behavior="alternate" width="200%" style="position:absolute; left:-50%;
 top:80%;">Заходите ко мне в гости</MARQUEE>
    • новое добавление:
      • <MARQUEE behavior="alternate" width="200%" style="position:absolute; left:-50%;
 top:80%;" class="bol">Заходите ко мне в гости</MARQUEE>

В первом «эксперименте» мы задали ширину бегущей строки 200% (две ширины окна) и сместили её на 50% влево. Так что, теперь строка время от времени скрывается справа и слева на пол-экрана. Кроме того, мы расположили её по вертикали на расстоянии 80% от верхней границы окна. Попробуй изменить размеры окна браузера и убедись, что заданные соотношения сохраняются.

Во втором «эксперименте» мы применили к тегу <MARQUEE> созданный нами ранее класс bol (увеличенный размер шрифта).

А теперь представь, что нам жизненно необходимо задать для бегущей строки какой-нибудь особенный цвет, например, синий. Причём хочется описать его с помощью CSS, вдруг он ещё где-нибудь понадобится. Что делать? Создать ещё один класс нельзя — мы не можем к одному блоку применить стили двух классов.

Для таких целей в CSS существует ещё одно понятие — идентификатор. Чем он отличается от класса? Да ничем, кроме названия (id вместо class) и значка (# вместо .). И, стоит отметить, что идентификаторы имеют более высокий приоритет, чем классы (то есть, если одно и то же свойство по-разному описано в классе и идентификаторе, то действовать будет свойство идентификатора).

    • опишем идентификатор, задающий необходимый цвет. Его можно описать в том же стилевом файле my_style.css, но раз уж мы взялись экспериментировать, то попробуем использовать одновременно все три способа подключения стилей. Итак, считаем, что новый идентификатор нужен будет только на главной страничке, поэтому описываем его в теге <STYLE> раздела <HEAD>:
      • <HEAD>
	<TITLE>Моя домашняя страничка</TITLE>
	<LINK rel="stylesheet" type="text/css" href="my_style.css">
	<STYLE type=text/css>
		#blue{	color=#4488ff;
 			font-weight:bolder;
 		}
	</STYLE>
</HEAD>
    • и, как всегда, чуть-чуть изменяем тег <MARQUEE>:
      • <MARQUEE behavior="alternate" width="200%" style="position:absolute; left:-50%;
 top:80%;" class="bol" id="blue">Заходите ко мне в гости</MARQUEE>

Мы создали идентификатор blue, задав для него не только цвет, но и «вес» шрифта:

font-weight:bolder; — пожирнее полужирного, а ещё значения могут быть bold (полужирный), lighter («полутонкий», тоньше обычного).

Применили же мы этот идентификатор к бегущей строке атрибутом id="blue".

  • Как говаривал добряк Карлсон, «нам полагается ещё пошалить!», поэтому шалим дальше:
    • сделаем блоком фотографию друзей и поместим её левее и выше (не забывай просматривать результат после каждого пункта):
      • <IMG usemap="#karta" src="images/drug.jpg" align="right" width="395" height="194"
 alt="Мои друзья" style="position:absolute; left:100; top:60;">
  • Если ты думаешь, что на этом наши «шалости» закончились, ты глубоко ошибаешься. Мы только начали, поэтому, если устал, немного отдохни, и продолжаем:
    • превратим оба списка в единый блок, окружив их предназначенным для таких целей тегом <DIV>:
      • <DIV>
<P>Я люблю
<OL class="sred">
	<LI>информатику
	<LI>рисовать
…
	<LI class="bol"><A href="pogrom.htm">щенок <B>Погромыч</A></B></I>.
</UL>
</DIV>
    • позиционируем блок <DIV>, ограничиваем его прямоугольником шириной 220 и высотой 150 точек, обводим рамкой:
      • <DIV style="position:absolute; left:270; top:100; width:220; height:150; overflow:auto;
 border-style:ridge;">
    • задаём для блока <DIV> фоновую картинку (используем рисунок домика — файл home.jpg):
      • <DIV style="position:absolute; left:270; top:100; width:220; height:150; overflow:auto;
 border-style:ridge; background-image:url(images/home.jpg);">
    • домики замостили всю площадь блока, а мы хотим, чтобы они повторялись только по горизонтали:
      • <DIV style="position:absolute; left:270; top:100; width:220; height:150; overflow:auto;
 border-style:ridge; background-image:url(images/home.jpg); background-repeat:repeat-x;">
    • причём не сверху, а по центру:
      • <DIV style="position:absolute; left:270; top:100; width:220; height:150; overflow:auto;
 border-style:ridge; background-image:url(images/home.jpg); background-repeat:repeat-x;
 background-position:center;">
    • да ещё и не прокручивались вместе со списком:
      • <DIV style="position:absolute; left:270; top:100; width:220; height:150; overflow:auto;
 border-style:ridge; background-image:url(images/home.jpg); background-repeat:repeat-x;
 background-position:center; background-attachment:fixed;">
  • В результате наша страничка приобрела невообразимый вид:


    а мы остановимся и подведём итоги.

Если мы можем на одном и том же месте расположить множество блоков, то встаёт естественный вопрос — а какой блок располагается выше, на переднем плане? И такой же естественный ответ — тот, который создан позже, то есть, записан в HTML-код последним. Но мы можем вмешаться и явно задать порядок расположения блоков. Для этого используется параметр z-index — чем он больше, тем ближе к нам расположен соответствующий блок.

К сожалению, этот атрибут не поддерживается многими браузерами.

Параметры width и height указывают ширину и высоту блока — в этом нет ничего нового и удивительного. Но мы можем управлять отображением содержимого блока в том случае, если его размеры превышают заданные этими параметрами. Для этого служит параметр overflow, который может принимать следующие значения: hidden — что не поместилось, обрезается; scroll — создаются вертикальная и горизонтальная полосы прокрутки; auto — полосы прокрутки создаются только в том случае, если они необходимы; visible — содержимое блока не обрезается, просто игнорируется значение параметров width и height.

Параметры border-… управляют рамкой вокруг блока:

border-color — цвет рамки;

border-width — толщина рамки;

border-style — стиль рамки, может принимать значения solid (сплошная), double (двойная), inset (вдавленная панель), outset (выпуклая панель), groove (вдавленная граница), ridge (выпуклая граница) и none (без рамки).

Для параметра background:url(…) можно задать дополнительные параметры:

no-repeat — запрещает повторения рисунка;

center, top, bottom, left, right — фоновый рисунок располагается в центре, сверху, снизу, слева, справа;

repeat-x или repeat-y — рисунок повторяется только по горизонтали или по вертикали;

fixed — рисунок-фон не прокручивается вместе с содержимым блока.

Кроме этого, стоит отметить ещё такие параметры:

margin и padding — внешние и внутренние поля блока;

float:left (или right) — обтекание блока текстом.

  • Вот теперь шалости закончились, пора вспомнить, что мы работали с копией главной страницы. Закрывай её (копию), открывай файл glav.htm и в качестве задания попробуй придать своей главной страничке вот такой вид:

И ещё три малюсеньких замечания: во-первых, все параметры, о которых мы говорили, можно применять в самых разных сочетаниях, во-вторых, совсем необязательно задавать координаты блока (параметры position, left и right), блоки могут следовать друг за другом в естественном порядке и, в-третьих, блоки можно помещать друг в друга, в этом случае абсолютные координаты будут отсчитываться от левого верхнего угла родительского блока.


Следующий урок