Логика» – курс лекций

E-mail: moscowcrossclub@gmail.com

Интернет-Университет Информационных Технологий

http://www.INTUIT.ru

Лекции по современным веб-технологиям

11. Лекция: Оформление текста с помощью CSS: версия для печати и PDA В лекции рассматриваются основные свойства CSS, позволяющие управлять стилем, размером, семейством, гарнитурой шрифта, а также свойства, отвечающие за выравнивания и отступы текста, регулировки просвета и высоты строки.

Большая часть сайтов, несмотря на их разнородную направленность, имеет нечто общее. Это интересная, привлекающая посетителей информация, а также интерактивная возможность пообщаться с другими людьми. И в том, и другом случае дело не обходится без текста. Именно текст служит основным составляющим практически любого сайта. Красиво и элегантно оформленный текст может лучше передать замысел автора и привлечь к себе внимание. К тому же с таким текстом приятнее работать, он лучше воспринимается, и пользователи это ценят. Задание свойств шрифтов Существуют тысячи шрифтов, которые предназначены для оформления текстов. Однако, число шрифтов, применяемых для набора текста на сайтах, существенно ниже. Конечно, можно задать, например, для заголовка, вычурный шрифт, установленный на компьютере разработчика. Но если такого шрифта на компьютере пользователя нет, то текст будет отображаться шрифтом, установленным в браузере по умолчанию. Получается, что труд дизайнеров и разработчиков пропал даром. Одной из возможностей обойти эту проблему является новая концепция стандарта CSS2. В основе новой концепции лежит понятие загружаемых шрифтов, т.е. шрифтов, отсутствующих на компьютере пользователя, но доступных для загрузки из сети Интернет. В дополнение к этому CSS2 предусматривает наличие базы данных о шрифтах, содержащей их разнообразные характеристики и позволяющей по мере необходимости синтезировать недостающие шрифты на основе шрифтов, доступных обозревателю. Однако, несмотря на то, что CSS поддерживает эту возможность, в реальности она используется очень редко, т.к. далеко не все браузеры поддерживают данную технологию, а пользователи не любят загружать лишнюю информацию. Поэтому самым распространенным способом гарантировать правильное отображение шрифтов в браузере пользователя является использование стандартных шрифтов, встроенных в браузер и операционную систему. Семейство шрифтов: свойство font-family Свойство font-family используется для задания списка имен семейств шрифтов для отображения содержимого элемента. Список шрифтов может включать одно или несколько названий, разделенных запятыми. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в двойные или одинарные кавычки. Гарнитуры должны указываться в порядке возрастающей вероятности доступности или предпочтения. В качестве защиты от отказа значение свойства font-family всегда должно заканчиваться ключевым словом, ссылающимся на родовое имя шрифта. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания. Например, следующее ниже свойство следует понимать как указание браузеру пользователя использовать шрифт Verdana; если его нет, то использовать шрифт Arial; если его нет, то использовать родовой шрифт sans-serif: font-family: Verdana, Arial, sans-serif; Такой список необходим, поскольку разработчику заранее не известно, какие именно шрифты установлены на компьютерах пользователей. Имя семейства шрифтов может быть задано как название семейства шрифтов (например, Times New Roman, Arial и т.д.) или как родовое имя. Родовые имена шрифтов были разработаны на тот случай, если на компьютере пользователя не установлен ни один из шрифтов, заданных разработчиком. В этом случае браузер использует родовой шрифт, начертание которого напоминает шрифт, который планировал использовать разработчик. Спецификацией определено пять родовых имен, изображения которых представлены на рисунке 11.1.

Рис. 11.1. Пример различных семейств шрифтов Т.к. список шрифтов на компьютерах пользователей может сильно различаться в зависимости от операционной системы и собственных предпочтений, необходимо пользоваться наиболее распространенными шрифтами, к которым относятся Arial, Comic Sans MS, Courier, Courier New, Lucida Console, Tahoma, Times, Times New Roman, Trebuchet MS, Verdana. Однако следует помнить, что шрифты с одинаковыми именами в разных браузерах и системах могут незначительно отличаться друг от друга по форме или по размеру. Размер шрифтов: свойство font-size Размер шрифта может быть установлен несколькими способами. Набор констант хх-small, x-small, small, medium, large, x-large, xx-large задает размер, который называется абсолютным. По правде говоря, он не совсем абсолютный, поскольку зависит от настроек браузера и операционной системы. На рисунке 11.2 представлены варианты размеров шрифтов, соответствующих данным константам.

Рис. 11.2. Пример использования различных значений свойства font-size Другой набор констант larger, smaller устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента. Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ех (высота символа х), пункты (pt), пикселы (рх), проценты (%) и др. При использовании процентной записи за 100% принимается размер шрифта родительского элемента. Если размер шрифта задается в пунктах или пикселах, то изменить эту величину с помощью специальной опции браузера "Размер шрифта" нельзя. Если шрифт установлен слишком мелким, то исправить этот недостаток пользователю простыми средствами не удастся. Поэтому лучше использовать другие единицы размеров шрифта, например, проценты. Насыщенность шрифтов: свойство font-weight Насыщенность шрифта (или жирность) управляется с помощью свойства font-weight. Значениями этого свойства могут быть ключевые слова bold, bolder, lighter и normal, которые устанавливают полужирное, жирное, светлое и нормальное начертание шрифта. Также можно использовать условные единицы от 100 до 900 с шагом 100, причем чем больше значение, тем выше жирность. Установленное по умолчанию нормальное начертание шрифта эквивалентно значению 400, а стандартный полужирный текст - 700. Задание насыщенности шрифта может выглядеть следующим образом: P {font-weight: 900;} Стиль шрифта: свойство font-style Свойство font-style определяет начертание шрифта как обычное, курсивное или наклонное. Данным начертаниям соответствуют значения свойства normal, italic и oblique. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа. Капитель: свойство font-variant Капителью называется текст, набранный прописными буквами уменьшенного размера. Для создания такого эффекта используется свойство font-variant со значением small-caps. Особенность капители заключается в том, что заглавные и строчные буквы при ее использовании сохраняются. Браузер Internet Explorer до шестой версии отображает текст неправильно, заменяя все символы прописными. Остальные браузеры преобразуют символы вполне корректно.

Рис. 11.3. Пример использования различных значений свойств font-weight, font-style и font-variant Задание свойств текста Преобразование текста: свойство text-transform Обычно создатель сайта сам решает, какие буквы будут прописными, а какие строчными, исходя из правил правописания и собственных предпочтений. Тем не менее, процесс изменения регистров символов можно автоматизировать, используя свойство text-transform. Данное свойство может принимать четыре значения:

none - текст пишется без изменений;
capitalize - каждое слово будет начинаться с заглавного символа;
lowercase - все символы становятся строчными (нижний регистр);
uppercase - все символы становятся прописными (верхний регистр).

Например, следующее правило указывает, что заголовок H1 должен выводиться прописными буквами: H1 {text-transform: uppercase;} Автоматическое изменение регистра символов удобно задавать для аббревиатур, названий элементов, заголовков и других элементов текста, где требуется писать прописными или строчными символами. Украшение текста: свойство text-decoration Свойство text-decoration позволяет задать тексту дополнительное оформление. Значениями данного свойства являются константы none, underline, overline, line-through и blink, позволяющие отобразить обычный текст, провести линию над, под или через текст, а также сделать текст мигающим. Пример использования различных значений данного свойства приведен на рисунке 11.4.

Рис. 11.4. Пример использования различных значений свойства text-decoration Наиболее распространенным применением свойства text-decoration является изменение используемого по умолчанию подчеркивания ссылок. Например, следующее правило указывает, что ссылки должны подчеркиваться: A:link {text-decoration: underline;} Интервал между словами: свойство word-spacing Чтобы задать интервал между словами в тексте, используется свойство word-spacing. Значения данного свойства можно задать с помощью ключевого слова normal, которое используется по умолчанию и задает стандартный интервал для текущего шрифта. Для задания интервала в дополнение к стандартному можно указать значение в любых доступных единицах CSS, причем значение может быть и отрицательным. Так, следующее правило увеличивает интервал между словами в заголовке H1 на 1em: H1 {word-spacing: 1em;} Выравнивание текста: свойство text-align Выравниванием называется размещение левого или правого края блока текста вдоль невидимой вертикальной линии. Для выравнивания текста используется свойство text-align. Допустимыми значениями данного свойства являются left, right, center и justify, задающие выравнивание по левому краю, по правому краю, по центру и по ширине соответственно. Следующее правило устанавливает выравнивание по центру всех элементов, содержащихся в элементе DIV: DIV {text-align: center;} Интерлиньяж: свойство line-height Интерлиньяжем называется расстояние между базовыми линиями близких друг к другу строк. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и автоматически определяется браузером. Но это значение может быть изменено с помощью свойства line-height. Заданное по умолчанию значение normal заставляет браузер вычислять расстояние между строками автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. В качестве значений данного свойства допустимо также использовать любые единицы длины, принятые в CSS. Разрешается также использовать процентную запись, причем в этом случае за 100% принимается высота шрифта. Отрицательное значение межстрочного расстояния не допускается. Интервал между буквами: свойство letter-spacing Браузер автоматически подбирает интервалы между символами, исходя из размера и типа шрифта. В некоторых случаях необходимо подкорректировать расстояние между буквами. Для управления межбуквенным интервалом используется свойство letter-spacing. В качестве значений данного свойства могут использоваться любые единицы длины, принятые в CSS, однако рекомендуется использовать относительные единицы, основанные на размере шрифта (em и ех). В отличие от межстрочного интервала, свойство letter-spacing допускает использование отрицательного значения, однако в этом случае надо убедиться, что сохраняется читабельность текста. Следующее правило увеличивает интервал между символами в заголовке H1 на 0.5em: H1 {letter-spacing: 0.5em;}

http://www.INTUIT.ru

Лекции по современным веб-технологиям

12. Лекция: Цвет и фоновые изображения CSS: версия для печати и PDA В лекции рассматриваются основные свойства, управляющие цветом и характеристиками фона на веб-страницах.

Для оформления фона в CSS предусмотрено несколько свойств, позволяющих задавать цвет фона, фоновое изображение, позиционирование и укладку фонового изображения и многое другое. Однако, перед тем, как описывать основные свойства CSS для работы с фоном, опишем способ задания цвета переднего плана или цвета текста элемента. Управление цветом переднего плана: свойство color Цвет текста задается свойством color. Значения данного свойства можно задавать несколькими способами. Можно задать явное название цвета (например, red, yellow и др.), указать шестнадцатеричное значение или значение RGB. Шестнадцатеричное значение состоит из символа #, за которым следует шесть символов. Первая пара указывает уровень красного цвета, а вторая и третья – уровни зеленого и синего цветов соответственно, например, #FF0000. Можно определить цвет, используя значения уровня красной, зеленой и синей составляющей в десятичном исчислении, например, RGB(49, 151, 116). Также можно задавать цвет в процентном отношении. Например, следующее свойство делает все заголовки документа красными, а для задания свойства используется шестнадцатеричное значение: H1 {color: #FF0000;} Некоторые программы позволяют выбрать оттенок цвета, а затем определить его шестнадцатеричное или RGB-значение, как это показано на рисунке 12.1.

Рис. 12.1. Пример выбора значения цвета в программе Adobe Photoshop Далее представлены основные свойства CSS, предназначенные для оформления фона элемента. Управление цветом фона: свойство background-color Для описания цвета фона элемента используется свойство background-color. Для изменения цвета фона всей веб-страницы свойство background-color нужно применить к элементуBODY. Это свойство можно применять и к другим элементам, в том числе к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам BODY и H1: BODY {background-color: #8798C3;} H1 {color: #1A284D; background-color: #4F659E;} Результат применения данных правил представлен на рисунке 12.2.

Рис. 12.2. Применение цвета фона для элементов BODY и H1 Применение фонового изображения: свойство background-image Свойство background-image позволяет установить фоновое изображение или графический образ для элемента. В качестве значения данного свойства используется путь к графическому файлу, который указывается внутри конструкции url(). Например, следующее свойство задает в качестве фона страницы графическое изображение image.jpg: BODY {background-image: url("image.jpg")} Когда фоновое изображение не требуется, аргумент может принимать значение none. Если одновременно для элемента задан цвет фона и фоновое изображение, то цвет фона будет отображаться до тех пор, пока фоновое изображение не загрузится полностью или в случае, если изображение по какой-либо причине не доступно. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Повторение фонового изображения: свойство background-repeat Если фоновое изображение меньше области элемента, то по умолчанию оно будет повторяться по горизонтали и по вертикали, стремясь заполнить всю выделенную область. Однако CSS представляет возможность управлять повторением фонового изображения, т.е. выбрать, в каком направлении оно должно повторяться. Данный выбор можно осуществить с помощью свойства background-repeat, которое может принимать значения repeat-x, repeat-y и repeat, которое соответствуют повторению изображения по горизонтали, по вертикали и в обоих направлениях соответственно. Еще одно значение no-repeat является значением, которое требуется использовать, чтобы изображение не повторялось. Например, горизонтальное повторение изображения может быть определено с помощью следующего свойства: BODY {background-image: url("image.jpg"); background-repeat: repeat-x;} Результат применения данного свойства представлен на рисунке 12.3.

Рис. 12.3. Повторение фонового рисунка по горизонтали Присоединение: свойство background-attachment Свойство background-attachment определяет, фиксируется ли фоновый рисунок или прокручивается вместе с содержимым страницы. Данное свойство имеет два значения scroll иfixed. Значением по умолчанию является scroll, которое заставляет фоновое изображение прокручиваться вместе с содержимым элемента. Значение fixed фиксирует изображение, а содержимое страницы прокручивается. Например, следующий код фиксирует изображение: BODY { background-color: #FFCC66; background-image: url("image.jpg"); background-repeat: no-repeat; background-attachment: fixed; } Положение фонового изображения: свойство background-position По умолчанию, фоновый рисунок располагается в левом верхнем углу экрана. Свойство background-position позволяет располагать фоновое изображение в любом месте. Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение 200px 200px располагает фоновый рисунок на 200 пикселей слева и на 200 пикселей сверху в окне браузера. Координаты можно указывать в процентах от ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо использовать символьные константы top, bottom, center, left и right. На рисунке 12.4 представлена иллюстрация использования различных координат. В данном примере фоновое изображение располагается в правом нижнем углу: BODY { background-image: url("image.jpg"); background-position: right bottom; }

Рис. 12.4. Различные примеры позиций фонового изображения, использующие ключевые слова, проценты и пиксели Свойство background С помощью свойства background можно объединить несколько свойств и записывать стили в сокращённом виде, что облегчает чтение таблиц. Например, приведенные ниже строки позволяют установить цвет фона, фоновое изображение, вид повторения, присоединение и позицию изображения: background-color: #FFCC66; background-image: url("image.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right top; Используя свойство background, того же результата можно достичь одной строкой кода: background: #FFCC66 url("image.jpg") no-repeat fixed right top; Для обеспечения межбраузерной совместимости и для организации и обслуживания таблицы стилей при объединении отдельных свойств фона в группу рекомендуется размещать свойства в следующем порядке: background-color, background-image, background-repeat, background-attachment, background-position. Если какое-либо свойство отсутствует, то оно автоматически получает значение по умолчанию. Например, в приведенном ниже примере не заданы свойства background-attachment иbackground-position: background: #FFCC66 url("image.jpg") no-repeat; Поэтому этим свойствам будут присвоены значения по умолчанию - scroll и top left. Практическое занятие 4 Целью занятия является закрепление материала лекций 11 и 12. В ходе практического занятия слушатель осваивает основные приемы оформления текстов с использованием CSS, а также методы работы с фоном и фоновыми изображениями. Слушателю предлагается оформить созданные на предыдущих практических занятиях страницы, добавив цвет фона и фоновое изображение. Для фонового изображения необходимо предусмотреть такие свойства как направление повторения фонового изображения и поведение изображения при прокрутке. Также будет полезно оформить фоном не только саму страницу (т.е. элемент BODY), но и некоторые структурные элементы, например, заголовки или параграфы. При оформлении текста необходимо установить такие свойства как семейство шрифтов, размер, насыщенность и стиль, капитель и другие свойства, описанные в лекции 11. Данные свойства необходимо применять как к блокам текста, так и к группам символов. Слушателю предлагается поработать над цветовым оформлением текста и отдельных его символов. Выбор объектов применения данных свойств оставляется на усмотрение пользователя. Задание потребует предварительной группировки элементов созданного HTML-документа в блоки с использованием элементов DIV и SPAN.

http://www.INTUIT.ru

Лекции по современным веб-технологиям

13. Лекция: Модель компоновки CSS: версия для печати и PDA В лекции вводится понятие модели компоновки CSS (боксовой модели) и рассматриваются основные ее возможности. Рассматриваются свойства CSS, которые управляют компоновкой элементов HTML, определяют их границы, поля, заполнение, ширину, высоту и др.

Модель компоновки CSS Одним из самых важных инструментов дизайна является точное управление свободным пространством. Любое пустое пространство вокруг элемента невольно притягивает к нему взгляд, а для текста еще и обеспечивает его оптимальное восприятие. Пустой промежуток вокруг элемента выделяет его на веб-странице и позволяет отделить один элемент от другого. Однако таблицы стилей браузера, используемые по умолчанию, не решают задачу управления свободным пространством с достаточной точностью, поэтому разработчикам часто приходится использовать поля, границы, заполнение и другие свойства компоновки CSS. Все свойства компоновки CSS объединены в модель компоновки CSS, которая также называется боксовой моделью. Боксовая модель имеет детальные опции для определения полей, границ, заполнения и содержимого каждого элемента. Однако прежде чем рассматривать свойства для оформления боксов, необходимо немного поговорить о них самих. Документ HTML состоит из множества перемешанных элементов. Когда такой документ изображается на экране компьютера или печатается на бумаге, эти элементы генерируют прямоугольные боксы. По умолчанию, встроенная таблица стилей в браузере заставляет элементы HTML блочного уровня (такие, как P и DIV) генерировать блочные боксы, в то время как строковые элементы (такие, как STRONG и SPAN) генерируют строковые боксы. Типом генерируемого бокса можно управлять, используя свойство display, которое будет рассмотрено ниже. На рисунке показано, как построена боксовая модель:

Рис. 13.1. Иллюстрация различных частей бокса элемента, помеченных соответствующими свойствами CSS Поля элемента: свойство margin Для управления значениями полей элементов предназначено свойство margin. Это универсальный параметр, в зависимости от числа значений, он устанавливает поля со всех сторон элемента или для каждой его стороны отдельно. Например, указание одного значения задаст равные поля вокруг элемента. Допустимые значения обычно определяют в единицах измерения px или em (пикселях или em). В таблицах стилей, предназначенных для печати, в качестве единиц измерения можно использовать дюймы (in), сантиметры (cm) или пункты pt (пункты). Для задания полей с разных сторон элемента предназначены производные от свойства margin - margin-left, margin-right, margin-top и margin-bottom, задающие значения левого, правого, верхнего и нижнего поля соответственно. Например, ниже представлен пример задания полей документа, т.е. элемента BODY . На рисунке 13.2 показано, какие поля необходимо определить и какие значения необходимо им придать. BODY { margin-top: 100px; margin-right: 70px; margin-bottom: 40px; margin-left: 40px; } Это же правило можно записать в следующем виде: BODY {margin: 100px 70px 40px 40px;}

Рис. 13.2. Иллюстрация применения свойства margin Таким же образом можно установить поля почти для любого элемента. Например, можно определить поля для всех параграфов на веб-странице: P {margin: 5px 50px 5px 50px;} Добавление границы: свойства border, border-width, border-style и border-color Границы имеют разнообразное применение, например, как декоративный элемент или для отделения двух объектов. Для задания границ применяется несколько способов, один из которых основан на использовании свойства border и его производных. Это свойство позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения разделяются пробелами и могут идти в любом порядке. Браузер сам определит, какое значение соответствует нужному атрибуту: P {border: 2px solid black;} Данное правило позволяет создать вокруг прямоугольной области сплошную рамку черного цвета толщиной 2 пиксела. Первый аргумент в данном случае определяет толщину, второй - тип линии, а третий - ее цвет. Когда значение в border отсутствует, выводимый элемент будет использовать значения по умолчанию: толщина границы будет определяться браузером, стиль границы будет solid, а цвет границы будет совпадать с цветом, используемым для рассматриваемого элемента. Можно задать толщину, стиль и цвет любой из четырех сторон элемента, используя свойства border-top, border-bottom, border-left и border-right. Например, следующий пример создает нижнюю границу для элемента H1 в виде красной сплошной линии толщиной 1 пиксел: H1 {border-bottom: 1px solid red);} Толщину, стиль и цвет также можно задать отдельно, используя соответствующие свойства. Толщина границы: свойство border-width Это свойство задает толщину одной или нескольких сторон границы. Сокращенное свойство border-width принимает значения в той же нотации, что и сокращенное свойство margin, за исключением того, что процентные значения не поддерживаются. Например, свойство border-width может быть задано следующим образом: TD {border-width: 1px 0 0 1px;} Стиль границы: свойство border-style Свойство border-style задает стиль линии и может принимать одно из восьми значений, представленных на рисунке 13.3.

Рис. 13.3. Возможные значения свойства border-style Цвет границы: свойства border-color Для каждой границы можно задать любой цвет с помощью сокращенного свойства border-color или его уточнения. Например TD {border-color: ##FF0000;} Заполнение элемента: свойство padding Заполнение определяет внутреннее расстояние между границей и содержимым элемента. Для изменения этой характеристики предназначено свойство padding. Оно позволяет задать расстояние между границей и содержанием для всех или определенных сторон элемента. Это свойство действует аналогично margin, поэтому итоговый результат зависит от числа аргументов. Для указания расстояний от разных сторон элемента можно воспользоваться свойствами padding-left, padding-right, padding-top и padding-bottom, которые управляют величиной расстояния слева, справа, сверху и снизу соответственно. Основное предназначение заполнения - создать пустое пространство вокруг содержимого блочного элемента, например, текста, чтобы он не прилегал плотно к границе элемента. Использование заполения повышает читабельность текста и улучшает внешний вид страницы. В следующем примере показано использование заполнения для оформления текста: DIV.first {padding: 20px;} DIV.second {padding: 10px; padding-left: 50;} В данном примере создается два блока с разными характеристиками. В первом блоке вокруг текста по вертикали и горизонтали с помощью свойства padding задается одинаковое поле со значением 20 пикселов. Во втором блоке поле слева увеличено через свойство padding-left. Установка высоты и ширины элемента Установить высоту и ширину элемента можно с помощью свойств height и width соответственно. Однако при применении данных свойств существуют некоторые особенности. Например, данные свойства не могут применяться к строковым элементам HTML, таким, как, например, SPAN, STRONG или EM. Работа с потоком элементов Типы блоков: свойство display Каждый элемент в Рекомендациях HTML 4.01, который связан с основным контентом, имеет соответствующий строковый или блочный тип. Каждый тип определяет поведение компоновки по умолчанию различным образом. Например, последовательно идущие строковые элементы изображаются на общей базовой линии, в то время как блочные элементы всегда отделяются друг от друга и выводятся с предшествующим и последующим разрывом строки. Свойство display имеет три наиболее часто используемых значения - block, inline и none - два из которых имеют прямое отношение к соответствующим типам элементов. Данное свойство позволяет изменить поведение элементов (например, строковый элемент будет вести себя как блочный или наоборот). Свойство display со значением none может изменять представление данного элемента в документе. Например, с помощью следующего правила можно удалить посторонний фрагмент из заголовка: .sectionNote {display: none;} "Всплывающие" элементы: свойства float и clear Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может смещаться к правому или левому краю в окне документа (или содержащего бокса). Если необходимо, например, чтобы текст окружал рисунок, как показано на рисунке 13.4, то фрагмент кода должен выглядеть следующим образом: ... <STYLE type="text/css"> #picture { float:left; width: 130px;} </STYLE> ... <DIV id="picture"> <IMG src="Beatles.jpg" alt="The Beatles"> </DIV> <P>Far away, 80000 leagues below the sea, ... </P> ... Чтобы рисунок смещался влево, а текст его окружал, необходимо определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left.

Рис. 13.4. Пример обтекания рисунка текстом Свойство clear управляет поведением последовательности всплывающих элементов документа. По умолчанию, последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс смещается в сторону. Например, в предыдущем примере текст автоматически смещается вверх вдоль изображения. Свойство clearможет иметь значения left, right, both или none.

http://www.INTUIT.ru

Лекции по современным веб-технологиям

14. Лекция: Оформление списков и ссылок с помощью CSS: версия для печати и PDA В лекции рассматриваются основные подходы для оформления списков и ссылок средствами CSS.

Оформление списков Базовые маркеры и числа: свойство list-style-type Для управления видом маркера используется свойство list-style-type. Данное свойство применяется и к маркированному (элемент HTML UL) и нумерованному (элемент HTML OL) спискам, однако аргументы для этих двух видов списка различаются. Для маркированного списка используются аргументы circle, disc и square, которые устанавливают маркер в виде незакрашенного кружка, закрашенного кружка и квадрата соответственно. Для нумерованного списка аргументов свойства list-style-type намного больше, и с ними можно самостоятельно ознакомиться в Спецификации CSS2.1. На рисунке 14.1 представлены несколько распространенных типов маркированного и нумерованного списков. Аргумент noneустанавливает тип маркера, как у родительского элемента. По умолчанию данное свойство принимает значение disk для маркированного списка и decimal для нумерованного списка. Например, следующие правила задают для всех маркированных списков на сайте квадратные маркеры, а для нумерованных - десятичные числа: ul li {list-style-type: square;} ol li {list-style-type: decimal;}

Рис. 14.1. Распространенные стили списков Маркеры-изображения: свойство list-style-image Хотя количество значений атрибута свойства list-style-type для элемента UL, т.е. для маркированного списка, ограничено тремя, это не значит, что в распоряжении разработчика или дизайнера всего три вида маркера. CSS позволяет установить в качестве маркера любое подходящее изображение с помощью свойства list-style-image. В качестве аргумента используется относительный или абсолютный адрес графического файла, содержащего изображение, которое должно служить в качестве маркера. В следующем примере для каждого элемента списка в качестве маркера устанавливается изображение marker.png: UL {list-style-image: url("marker.png");} Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления первоначально вида маркера используется значение атрибута none, которое отменяет изображение в качестве маркера для родительского элемента. Следует заметить, что это свойство имеет ограниченные возможности позиционирования для фонового изображения и в некоторых ситуациях вообще не работает в браузере Internet Explorer. Поэтому значительно более распространенной практикой является просто задание фонового изображения в пунктах списка. Прежде всего, необходимо определить для списка отсутствие маркера и удалить поле и заполнение: UL { margin: 0; padding: 0; list-style-type: none; } Затем можно добавить фоновое изображение для каждого пункта списка, некоторое заполнение слева и снизу, чтобы сместить текст, позволяя вывести изображение, и растянуть пространство между пунктами списка: UL LI { background: #fff url("icon.gif") 0 3px no-repeat; padding: 0 0 5px 15px; } Размещение маркера: свойство list-style-position Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом. Чтобы управлять положением маркера относительно текста, применяется свойство list-style-position. Это свойство имеет два значения: outside и inside. Значение outside (значение по умолчанию) размещает маркеры за пределами текстового блока. Значение inside включает маркеры в текстовый блок и отображает их в элементе списка. Пример использования этих значений показан на рисунке 14.2.

Рис. 14.2. Варианты размещения маркера Оформление списков определений Обычно списки определений не требуют большого внимания, за исключением задания стиля DT (обычно жирный текст) и управления отступом определений: DT {font-weight: bold;} DD {margin-left: 2em;} В CSS предусмотрена возможность одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для этой цели используется свойство list-style. В качестве аргументов данного свойства могут выступать любые комбинации трех значений, определяющих стиль маркеров, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить. Оформление ссылок Существует несколько общих правил, которые разработчик должен учитывать при создании веб-страниц. Эти правила основываются на ожиданиях пользователей относительно оформления и действия ссылок:

пользователи ожидают, что ссылки отличаются от остального текста, представленного на веб-странице, и что ссылкой является именно подчеркнутый текст;
пользователи ожидают, что ссылки реагируют при наведении на них курсора и видоизменяются после того, как их посетили.

Таким образом, при оформлении ссылок разработчик должен задавать оформление для всех состояний ссылок и использовать подчеркивание только для ссылок Оформление состояния ссылок Стили ссылок всегда должны быть заданы в таблице стилей в следующем порядке: link, visited, focus, hover и active. Если стили ссылок будут размещены в другом порядке, то настройки будут переопределять друг друга, и состояния ссылок не будут работать. Для оформления различных состояний ссылок используются псевдоклассы :link, :visited, :focus, :hover и :active, которые добавляют к селектору элемента A: A:link{} A:visited{} A:focus{} A:hover{} A:active{} Если необходимо задать оформление для всех ссылок во всех состояниях, то можно оформлять непосредственно элемент A. Однако базовое правило должно быть определено в первую очередь: A {} A:link{} A:visited{} A:focus{} A:hover{} A:active{} Такая запись полезна, если необходимо убрать используемое по умолчанию подчеркивание ссылок. Управление поведением по умолчанию По умолчанию, большинство браузеров задает для всех ссылок подчеркивание, а состояние фокуса клавиатуры создает вокруг ссылок рамку. Данное оформление можно заменить или вообще отключить. Подчеркивание задается с помощью свойства text-decoration, рассмотренного в лекции 11. Напомним, что подчеркивание задается с помощью значения свойства text-decoration, равного underline: A {text-decoration: underline;} Можно отключить подчеркивание с помощью следующего правила: A {text-decoration: none;} Установленное по умолчанию подчеркивание является толстоватым и пересекает нижние выносные элементы строчных букв. Если необходимо сохранить стиль подчеркивания ссылок, но сделать подчеркивание тоньше и запретить пересечение нижних выносных элементов, можно использовать ложное подчеркивание. Прежде чем создавать ложное подчеркивание, необходимо отключить подчеркивание всех состояний ссылок: A {text-decoration: none;} Отключив заданное по умолчанию подчеркивание, можно задать свое подчеркивание с помощью свойства border-bottom: A:link {border-bottom: 1px solid #00c;} Результат применения описанных выше свойств к состоянию ссылки представлен на рисунке 14.3. Для сравнения представлена также ссылка, оформленная по умолчанию.

Рис. 14.3. Ложное подчеркивание в действии При использовании метода ложного подчеркивания необходимо следить за тем, чтобы было задано достаточно большое значение line-height, чтобы избежать наложения подчеркивания на следующую строку текста. Ложное подчеркивание позволяет создавать дизайн, в котором состояния ссылок можно отличать не только по цветам. Задавая различный стиль подчеркивания, можно гарантировать, что пользователь сможет различить состояния ссылок даже в черно-белом представлении. Изображения возле ссылок Некоторые сайты используют изображения и символы для добавления информации о своих ссылках. Например, можно использовать стрелку для указания, что ссылка позволяет перейти на внешний сайт, или применить какой-либо символ, чтобы отметить посещенные ссылки. Такие эффекты легко создаются с помощью фоновых изображений. Чтобы добавить изображение к внешним ссылкам, вначале необходимо определить принадлежность такой ссылки к некоторому классу, в приведенном ниже примере это класс external: <A href="http://www.somewhere.com /" class="external">external link</A> Затем необходимо задать фоновое изображение для этого класса: A.external { background: #fff url("arrow.gif") center right no-repeat; padding-right: 30px; } Этот пример будет применять выбранное изображение ко всем экземплярам посещенных ссылок во всех состояниях. Если необходимо выделять с помощью изображений только непосещенные внешние ссылки, то можно объединить классы и псевдоклассы состояний ссылок следующим образом: A.external:link{ background: #fff url("arrow.gif") center right no-repeat; padding-right: 30px; } Объединение классов и состояний открывает широкие возможности для ссылок, в чем слушателю предлагается убедиться самостоятельно. Практическое занятие 5 Целью практического занятия является закрепление материала лекции 14. В ходе практического занятия слушатель осваивает основные методы оформления ссылок и списков с помощью CSS. Слушателю предлагается средствами CSS установить базовые маркеры для нумерованных и маркированных списков, а также специальные маркеры, использующие графические изображения. Также рекомендуется создать горизонтальный список и список без маркеров. Используя псевдоклассы, предлагается оформить различные состояния ссылок с помощью различного вида подчеркиваний, а также установить индивидуальные цвета. Необходимо установить для ссылок, указывающих на ресурсы Сети, определенное графическое изображение и предусмотреть смену изображения для уже посещенной ссылки. Также необходимо предусмотреть изменения вида ссылки при наведении на нее курсора: сделать ссылку перечеркнутой и изменить цвет фона ссылки.

http://www.INTUIT.ru

Лекции по современным веб-технологиям

15. Лекция: Оформление таблиц с помощью CSS: версия для печати и PDA В лекции рассматриваются свойства CSS для управления основными параметрами таблицы.

Таблицы обеспечивают возможность расположения многомерных данных по строкам и столбцам. Структура и содержание таблицы описываются с помощью элементов HTML, а ее оформление задается с помощью правил CSS. Визуальное оформление таблиц состоит в задании правил отображения заголовков и ячеек таблицы, их выравнивания относительно друг друга, изображения рамок вокруг них и т.д. Далее будут рассмотрены основные приемы визуального оформления таблиц. Для дальнейшего изложения будет использоваться следующая нестилизованная таблица, представленная на рисунке 15.1.

Рис. 15.1. Нестилизованная таблица Ширина таблицы и ячеек Для определения ширины таблицы и ячеек используется свойство width, в качестве значения которого принимаются любые единицы длины, принятые в CSS (пикселы, дюймы, пункты и др.) При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента, либо окна браузера. По умолчанию, браузер использует настройку TABLE {width: auto;}, что приводит к выводу таблицы во всю ширину окна браузера. Следующие правила задают ширину таблицы в 100% доступной ширины, и ширину ячеек таблицы по 33% для каждой: TABLE {width: 100%;} TH, TD {width: 33%;} Браузеры неодинаково работают с шириной, кроме того, результат отображения зависит от используемого DOCTYPE. Так, в Internet Explorer при использовании переходного DOCTYPE или при его отсутствии, если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width. В то время, как для строгого DOCTYPE ширина формируется путем сложения значений width, padding, margin и border. Если содержимое блока не помещается в заданные размеры, оно отображается поверх. Выравнивание в таблице Часто необходимо менять установленные по умолчанию настройки выравнивания текста в таблице. CSS позволяет задавать выравнивание текста в таблице по горизонтали и вертикали. Для этой цели служат свойства text-align и vertical-align. Два данных свойства подробно описаны в лекции 13, поэтому ниже приведен лишь пример применения данных свойств к оформлению текста в ячейках таблицы: TH, TD { width: 33%; text-align: left; vertical-align: top; } Отображение границ Чтобы четко отделить содержимое одной ячейки от другой, к ним добавляются границы. За создание границ отвечает атрибут border элемента TABLE, который определяет толщину рамки. Однако, рамки, созданные с помощью данного атрибута, получаются разными по своему виду в каждом браузере. Чтобы этого избежать, рекомендуется пользоваться CSS-свойствомborder, применяя его к таблице или ее ячейкам (элементам TD или TH). Составное свойство border позволяет задать толщину, цвет и стиль границы всей таблицы и отдельных ее ячеек. Данное свойство и его производные подробно описаны в лекции 13, поэтому ниже приведен лишь пример использования данных свойств для оформления таблиц: TABLE {border: 1px solid #000;} TH, TD {border-left: 1px dashed #000;} Поскольку границы создаются для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Самым простым способом устранения указанной особенности является применение свойства border-collapse, которое устанавливает, как именно отображать границы вокруг ячеек. Данное свойство имеет два значения: collapse иseparate. Значение collapse заставляет браузер анализировать места соприкосновения ячеек в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. При использовании значенияseparate, которое устанавливается по умолчанию, вокруг каждой ячейки отображается своя собственная рамка, а в местах соприкосновения ячеек показываются сразу две линии. Различия между двумя значениями свойства border-collapse представлены на рисунке 15.2. Первая таблица соответствует границам удвоенной толщины и задается правилом TABLE { border: 1px solid #000; border-collapse: separate;} Вторая таблица соответствует схлопнувшимся границам и задается правилом TABLE { border: 1px solid #000; border-collapse: collapse;}

Рис. 15.2. Результат применения различных значений свойства border-collapse Когда задается схлопывание границ, необходимо помнить, что это может создавать проблемы, если к границам смежных ячеек были применены различные стили оформления. Схлопывание границ с различными стилями приводит к конфликтам, которые разрешаются согласно правилам разрешения конфликтов границ таблиц спецификации CSS2 (http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution). Данные правила определяют, какие стили "выигрывают" при схлопывании границ. Расстояние между ячейками CSS позволяет также увеличивать расстояния между ячейками, используя свойство border-spacing. Данное свойство задает расстояние между границами ячеек в таблице и не действует в случае, когда для таблицы установлен параметр border-collapse со значением collapse. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе - вертикальное. Следующие правило позволяет установить расстояние между границами ячеек 150 пикселей по горизонтали и 20 пикселей по вертикали: TABLE { border-collapse: separate; border-spacing: 150px 20px;} Браузер Internet Explorer до восьмой версии не обрабатывает свойство border-spacing, поэтому пользоваться данным свойством надо с осторожностью. Заполнение Для ячеек, которые имеют границу, можно добавить свободное пространство между границами ячеек и их содержимым. Для этого используется свойство padding. Данное свойство рассмотрено в лекции 13, поэтому ниже будет приведен пример применения данного свойства к оформлению ячеек: TH, TD { border: 1px solid #000; border-collapse: collapse; padding: 0.3em; } Размещение заголовка таблицы По умолчанию, заголовок таблицы размещается вверху таблицы. Однако в некоторых браузерах возможно переместить заголовок таблицы в другое место с помощью свойства caption-side. Значениями данного свойства являются top, bottom, left и right, размещающие заголовок вверху, внизу, слева или справа таблицы. В некоторых браузерах, как, например, Internet Explorer, доступны только два значения top и bottom. Следующее правило поместить заголовок таблицы под ней: CAPTION {caption-side: bottom;} Аналогичного результата можно достичь, используя свойство TABLE {caption-side: bottom;} Шаблоны таблиц К таблицам рекомендуется применять определенное оформление, что поможет не только вписать их в общий дизайн веб-страницы, но и представить информацию в более наглядном виде. Далее представлены несколько приемов оформления таблиц с помощью стилей. Простой дизайн Широко используемым вариантом дизайна для таблиц является выделение ячеек и строк с помощью фона. Так, в представленной ниже таблице заголовок таблицы выделен путем использования белого текста на темном фоне (так называемая выворотка), а для заголовков столбцов таблицы задан серый фон: TABLE { width: 100%; border: 1px solid #000; border-collapse: collapse; } TH, TD { width: 33%; text-align: left; vertical-align: top; border: 1px solid #000; padding: 0.3em; caption-side: bottom; } CAPTION { padding: 0.3em; color: #fff; background: #000; } TH { background: #eee; } Полученный результат представлен на рисунке 15.3.

Рис. 15.3. Таблица с простым дизайном Разметка "зебры" Для удобного представления данных в таблице можно сделать строки таблицы чередующимися, чтобы цвет фона четных и нечетных строк различался. Такая разметка обычно называется "зеброй". Хотя и существуют сомнения в отношении того, насколько данная разметка действительно облегчает восприятие информации, она является популярным стилем оформления. Пример использования данного оформления представлен на рисунке 15.4.

Рис. 15.4. Таблица с разметкой "зебры" Для изменения цвета фона у определенных строк прежде всего необходимо ввести классы для четных и нечетных строк: ... <TABLE> <TR class="odd"> ... <TR class="even"> ... </TABLE> Затем необходимо добавить селектор для задания фона всех ячеек в строках, относящихся к заданным классам, например: .odd th, .odd td {background: #eee;} Неполные сетки Для представления некоторых данных хорошо подходят менее структурированные таблицы. Простым вариантом является удаление вертикальных границ и заливки фона заголовка таблицы, как показано на рисунке 15.5.

Рис. 15.5. Таблица с границами только на внешних краях и по нижнему краю каждой ячейки Код CSS для этого представления может иметь следующий вид: TABLE { width: 100%; border: 1px solid #999; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } CAPTION, TD, TH { padding: 0.3em; } TH, TD { border-bottom: 1px solid #999; width: 25%; } Можно удалить все границы, за исключением верхней и нижней, чтобы определить только основное содержимое таблицы. Пример такого оформления представлен на рисунке 15.6.

Рис. 15.6. Таблица с границами только вверху и внизу тела таблицы Код CSS для такой таблицы будет следующим: TABLE { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } CAPTION, TD, TH { padding: 0.3em; } TBODY { border-top: 1px solid #000; border-bottom: 1px solid #000; } TBODY TH, TFOOT TH { border: 0; } TFOOT { text-align: center; color: #555; font-size: 0.8em; } Практическое занятие 6 Целью практического занятия является закрепление материала лекции 15. В ходе практического занятия слушатель осваивает основные приемы оформления таблиц с помощью CSS. Слушателю рекомендуется последовательно применить к созданной на практическом занятии 2 таблице оформление, добавляя ко всей таблице и ячейкам индивидуальное оформление, включающее толщину и стиль границы, заполнение и выравнивание текста в ячейках, высоту и ширину и т.д. Слушателю рекомендуется также применить к созданной таблице основные шаблоны оформлений, описанные в лекции.

http://www.INTUIT.ru

Лекции по современным веб-технологиям

16. Лекция: Позиционирование в CSS : версия для печати и PDA В лекции рассматриваются основные виды позиционирования элементов на странице, а также возможности CSS по созданию слоев.

Прежде чем рассматривать позиционирование, в двух словах напомним, что с точки зрения боксовой модели каждый элемент HTML представляет собой прямоугольник (бокс), для которого можно задать такие параметры как поля, границы и заполнения. Позиционирование определяет, где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя. При помощи позиционирования можно разместить любой элемент точно в нужном месте страницы. Вместе со всплывающими элементами, рассмотренными в лекции 13, позиционирование дает большие возможности для создания оригинального дизайна. В основе позиционирования лежит представление окна браузера как системы координат. Любой бокс возможно расположить в этой системе координат где угодно. Например, представленное ниже правило позволяет расположить заголовок на расстоянии 100 пикселей от верхней границы документа и на 200 пикселей от левой границы документа: H1 { position:absolute; top: 100px; left: 200px; } Результат выполнения данного кода представлен на рисунке 16.1.

Рис. 16.1. Пример позиционирования заголовка Из приведенного примера понятно, что для позиционирования элементов используется свойство position. Свойство position имеет четыре значения static, relative, absolute и fixed, которые определяют тип позиционирования и влияют на расположение элемента. Статическое позиционирование Значение static свойства position используется по умолчанию. Любой элемент со статическим позиционированием находится в общем потоке документа. Правила для его размещения определяются боксовой моделью. Блочные и строковые элементы размещаются по разным правилам, четко определенным в Спецификации CSS2.1. По умолчанию, блочные боксы выкладываются вертикально сверху вниз в порядке появления их в разметке. Каждый бокс обычно занимает всю ширину документа и имеет разрыв строки перед и после себя. Вертикальное расстояние между двумя блочными боксами управляется свойством margin-bottom первого блока и свойством margin-top второго бокса, причем вертикальные поля между двумя последовательными блочными боксами будут перекрываться таким образом, что расстояние между ними будет определяться не суммой двух полей, а большим из них. Строковые боксы выстраиваются по горизонтали в том порядке, в котором они появляются в разметке, переходя на новую строку, только если исчерпано доступное горизонтальное пространство. В зависимости от свойства direction, строковые боксы будут располагаться либо слева направо (direction: ltr), либо справа налево (direction: rtl). Множество строковых боксов, которые составляют строку на экране, заключаются еще в один прямоугольник, называемый линейным боксом. Линейные боксы выкладываются вертикально в своих предках блочного уровня без дополнительного пробела между ними. Высотой линейных боксов можно управлять с помощью свойства line-height. Для строковых боксов нельзя определить размеры и вертикальные поля. Относительное позиционирование Элемент со значением свойства position, равным relative, сначала размещается по правилам статического позиционирования. Но затем сгенерированный бокс смещается относительно своего положения в потоке, согласно значениям свойств top, bottom, left и right. Но при этом из потока он не исключается, а продолжает занимать там свое место. То есть сдвигается со своего места он только визуально, а положение всех боксов вокруг него никак не меняется. Это означает, что смещенный бокс может перекрывать боксы других элементов, так как они по-прежнему действуют, как если бы относительно позиционированный элемент остался там, где он должен был быть перед применением позиционирования. Как пример относительного позиционирования, попробуем сместить текст, заключенный в элемент <SPAN>…</SPAN> относительно его начального положения на странице с помощью следующего фрагмента кода: SPAN { position: relative; top: 10px; left: 10px; background-color: lime; } ... <P> В представленном <SPAN>фрагменте</SPAN> текста некоторые слова находятся не на своем месте и перекрывают другие слова.</P> Результат выполнения данного кода представлен на рисунке 16.2. Блок теперь перекрывает следующую строку текста, а на его прежнем месте появилось пустое пространство.

Рис. 16.2. Пример относительно позиционирования Абсолютное и фиксированное позиционирование Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают размещаться следующие боксы. Считается, что бокс исключается из потока. Для абсолютного позиционирования элемента свойство position должно принимать значение absolute. А для задания положения размещения блока используются значения left, right,top и bottom. Все четыре свойства можно использовать одновременно для определения расстояния от каждого края позиционируемого элемента до соответствующего края браузера или родительского блока. Можно определить также позицию одного из углов абсолютно позиционируемого (например, используя top и left), а затем определить размеры бокса, используяwidth и height. Представленный ниже код позволяет разместить четыре бокса в разных углах HTML-документа: div#yellow1 { position:absolute; top: 10px; left: 10px; } div# yellow2 { position:absolute; top: 50px; right: 50px; } div# yellow3 { position:absolute; bottom: 10px; right: 10px; } div#yellow4 { position:absolute; bottom: 10px; left: 10px; } Результат применения описанных выше свойств представлен на рисунке 16.3.

Рис. 16.3. Пример абсолютного позиционирования Фиксированное позиционирование действует подобно абсолютному, однако элемент с фиксированным позиционированием всегда располагается только относительно окна браузера и никогда не смещается при прокручивании веб-страницы. Отметим, что Internet Explorer версии 6 и более ранних версий не поддерживает фиксированное позиционирование. Третье измерение веб-страницы Страница сайта двумерна: для нее заданы ширина и высота. CSS позволяет добавить к веб-станице глубину (третье измерение) с помощью свойства z-index. Данное свойство позволяет создавать слои и располагать одни элементы поверх других. Для создания слоев необходимо для каждого элемента задать значение свойства z-index, которое является своеобразным порядковым номером слоя, в котором находится данный элемент. Это значение может быть целым числом (которое может быть отрицательным) или одним из ключевых слов auto или inherit. Значением по умолчанию является auto или 0. Элемент с большим значением свойства z-index перекрывает элемент с меньшим значением данного свойства. Ниже представлен код, располагающий игральные карты в порядке возрастания. Результат выполнения данного кода представлен на рисунке 16.4. div#card1 { position:absolute; top: 50px; left: 150px; z-index: 1; } div#card2 { position:absolute; top: 70px; left: 170px; z-index: 2; } div#card3 { position:absolute; top: 90px; left: 190px; z-index: 3; }

Рис. 16.4. Пример использования свойства z-index Практическое занятие 7 Целью практического занятия является закрепление материала лекций 13 и 16. В ходе практического занятия слушатель осваивает основные свойства CSS, отвечающие за управление размещением структурных блоков и их содержимого. Слушателю необходимо, используя свойства, управляющие компоновкой и позиционированием элементов, облагородить вид созданных веб-страниц: установить расстояния между блоками, оформить их границами, установить высоту и ширину блоков, обтекание графических изображений на странице текстом, используя "всплывающие" элементы, и т.д. С помощью различных типов позиционирования предлагается реализовать виды разметки веб-страниц, представленных в Приложении 5. Практическое занятие 8 Целью практического занятия является освоение способов проверки HTML-документов и CSS-кодов. Слушателю предлагается проверить созданные на предыдущих практических занятиях веб-страницы с помощью валидаторов W3C MarkUp Validator и W3C CSS Validator. В случае обнаружения ошибок, разобрать их и исправить.