Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






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






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

1. Создай копию файла glav.htm:

c открой его в блокноте;

c выполни команду Файл à Сохранить как…;

c выбери в списке Тип файла строчку Все файлы;

c измени имя файла на glav-proba.htm;

c нажми Сохранить.

2. Допиши в тег < MARQUEE> выделенный текст:

< MARQUEE behavior=alternate style=" position: absolute;

left: 0; top: 150; " > Заходите ко мне в гости< /MARQUEE>

и посмотри результат.

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

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

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

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

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

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

Обрати внимание – значение атрибута style взято в кавычки (а можно в апострофы). Так поступают, если значение является составным, содержащим разделители или пробелы, чтобы браузер точно знал, где оно заканчивается.

3. Продолжаем эксперименты:

c немного измени тот же тег (не забывай каждый раз смотреть, что получилось):

< MARQUEE behavior=alternate width=200%

style=" position: absolute; left: -50%; top: 80%; " >

Заходите ко мне в гости< /MARQUEE>

c новое добавление:

< MARQUEE behavior=alternate width=200%

style=" position: absolute; left: -50%; top: 80%; "

class=bol > Заходите ко мне в гости< /MARQUEE>

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

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

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

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

c опишем идентификатор, задающий необходимый цвет. Его можно описать в том же стилевом файле 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>

c и, как всегда, чуть-чуть изменяем тег < 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.

4. Как говаривал добряк Карлсон, «нам полагается ещё пошалить!», поэтому шалим дальше:

c в графическом редакторе (вполне подойдёт Paint) нарисуй картинку размером 70х1 (!) точек – первые 10 точек красные, затем 10 оранжевых, 10 жёлтых, зелёных, голубых, синих, фиолетовых (работай при максимальном увеличении, если ещё не догадался J);

c сохрани эту картинку под именем fon_mrq.jpg в папке images;

c добавь в описание идентификатора blue ещё один параметр:

< STYLE type=text/css>

#blue{ color=#4488ff;

font-weight: bolder;

background: url(images/fon-mrq.jpg);

}

< /STYLE>

Параметр background задаёт цвет фона background: #888888 или фоновую картинку background: url(адрес_файла-картинки) для блока.

c убедись, что теперь строка бежит по радужной дорожке.

5. Если ты думаешь, что на этом наши «шалости» закончились, ты глубоко ошибаешься. Мы только начали, поэтому, если устал, отдохни, и продолжаем:

c сделаем блоком фотографию друзей и поместим её левее и выше (не забывай просматривать результат после каждого пункта):

< IMG usemap=#karta src=" images/drug.jpg" align=right

width=395 height=194 alt=" Мои друзья"

style=" position: absolute; left: 100; top: 60; " >

c фотография теперь закрывает текст, поэтому перенесём её в самый нижний слой:

< IMG usemap=#karta src=" images/drug.jpg" align=right

width=395 height=194 alt=" Мои друзья"

style=" position: absolute; left: 100; top: 60;

z-index: -1; " >

c превратим оба списка в единый блок, окружив их предназначенным для таких целей тегом < DIV>:

< DIV>

< P> Я люблю

< OL class=sred>

< LI> информатику

< LI> рисовать

...

< LI class=bol> < A href=pogrom.htm> щенок < B> Погромыч< /A> < /B> < /I>.

< /UL>

< /DIV>

c позиционируем блок < DIV>, ограничиваем его прямоугольником шириной 220 и высотой 150 точек, обводим рамкой:

< DIV style=" position: absolute; left: 270; top: 100; width: 220;

height: 150; overflow: auto; border-style: ridge; " >

c задаём для блока < DIV> фоновую картинку (используем рисунок домика – файл home.gif):

< DIV style=" position: absolute; left: 270; top: 100; width: 220;

height: 150; overflow: auto; border-style: ridge;

background: url(images/home.gif); " >

c домики замостили всю площадь блока, а мы хотим, чтобы они повторялись только по горизонтали:

< DIV style=" position: absolute; left: 270; top: 100; width: 220;

height: 150; overflow: auto; border-style: ridge;

background: url(images/home.gif) repeat-x; " >

c причём не сверху, а по центру:

< DIV style=" position: absolute; left: 270; top: 100; width: 220;

height: 150; overflow: auto; border-style: ridge;

background: url(images/home.gif) repeat-x center; " >

c да ещё и не прокручивались вместе со списком:

< DIV style=" position: absolute; left: 270; top: 100; width: 220;

height: 150; overflow: auto; border-style: ridge;

background: url(images/home.gif) repeat-x center fixed; " >

6. В результате наша страничка приобрела невообразимый вид

,

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

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

Что же означает запись z-index: -1;? Браузер присваивает всем блокам индексы по порядку, начиная с нуля, и если мы хотим поместить какой-то блок ниже всех, ему надо задать индекс -1.

Параметры 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) – обтекание блока текстом.

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

Чтобы ты лучше сориентировался, здесь приведены два вида странички при разных размерах окна браузера.

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

А теперь замечание посерьёзнее: если ты этого ещё не сделал, посмотри страничку в Netscape Navigator. Тебя постигло разочарование? Да! Довольно большую часть CSS этот браузер не понимает.

 






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.