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;}
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.
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.
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 установить базовые маркеры для нумерованных и маркированных списков, а также специальные маркеры, использующие графические изображения. Также рекомендуется создать горизонтальный список и список без маркеров.
Используя псевдоклассы, предлагается оформить различные состояния ссылок с помощью различного вида подчеркиваний, а также установить индивидуальные цвета. Необходимо установить для ссылок, указывающих на ресурсы Сети, определенное графическое изображение и предусмотреть смену изображения для уже посещенной ссылки. Также необходимо предусмотреть изменения вида ссылки при наведении на нее курсора: сделать ссылку перечеркнутой и изменить цвет фона ссылки.
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 таблице оформление, добавляя ко всей таблице и ячейкам индивидуальное оформление, включающее толщину и стиль границы, заполнение и выравнивание текста в ячейках, высоту и ширину и т.д.
Слушателю рекомендуется также применить к созданной таблице основные шаблоны оформлений, описанные в лекции.
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. В случае обнаружения ошибок, разобрать их и исправить.
Традиционно авторское право понимается в различных значениях. В частности, можно говорить об авторском праве в объективном смысле и об авторском праве в субъективном смысле.
Авторское право в объективном смысле – это совокупность норм гражданского права, регулирующих отношения по признанию авторства и охране произведений науки, литературы и искусства, установлению режима их использования, наделению их авторов имущественными и неимущественными правами, защите прав автора и других правообладателей[1].
В юридической литературе относительно авторского права в объективном смысле указывают на то, что «авторское право есть часть (подотрасль) единого гражданского права»[2]. В свою очередь подотрасль гражданского права – это «крупные блоки близких по своему содержанию норм, которые регулируют обширные группы однородных и взаимосвязанных отношений»[3]. В силу этого следует уточнить, что авторское право не является подотраслью гражданского права, а составляет институт такой подотрасли как «Право интеллектуальной собственности», которая также включает смежные права, патентное право, права на селекционные достижения, на топологии интегральных микросхем, на средства индивидуализации юридических лиц, товаров, работ, услуг и предприятий, и т.д.
Также для правильного понимания регулирования и защиты авторских правоотношений надо указать на то, что соответствующие вопросы раскрываются не только нормами гражданско-правового характера. Нормы, направленные на охрану прав и законных интересов авторов и иных правообладателей, содержаться в Конституции РФ, Уголовном кодексе РФ, Кодексе РФ об административных правонарушениях. В силу этого можно говорить о комплексном характере авторского права в объективном смысле. Однако без сомнения основная роль в регулировании авторских правоотношений отведена гражданскому праву. В силу этого на рассматриваемые отношения распространяют свое действие общие положения гражданского права (о сделках, о сроках, общие положения об обязательствах и договорах и т.д.).
Предмет авторского права в объективном смысле составляют авторские правоотношения как общественные отношения, урегулированные нормами авторского права, складывающиеся между правообладателями и прочими лицами по поводу использования (иногда – и создания) объектов авторского права[4].
В структуре авторского правоотношения можно выделить три элемента:
1) субъекты – авторы, их правопреемники, иные правообладатели (в частности, работодатели), организации по коллективному управлению авторскими правами и т.д.;
2) объекты – произведения науки, литературы, искусства;
3) содержание – совокупность прав и обязанностей субъектов авторских правоотношений, главенствующее место среди которых занимают права автора. Именно такие права и принято называть авторским правом в субъективном смысле. Соответственно, авторское право в субъективном смысле – это совокупность субъективных прав, возникающих у автора в связи с созданием конкретного произведения литературы, науки и искусства.
Помимо двух указанных проявлений авторского права оно понимается также как учебная дисциплина и как наука, речь о которых пойдет ниже в соответствующих параграфах.
Суть авторского права «заключается в охране формы произведения, а не его существа, так как форма имеет приоритет в авторском праве, но из этого не следует безразличное отношение права к содержательной стороне объекта, без которой его существование невозможно»[5].
Институт авторского права часто объединяют со смежными правами. На законодательном уровне это нашло свое отражение в принятии и действии Закона РФ от 09.07.1993 г. № 5351-1 «Об авторском праве и смежных правах»[6]. А. П. Сергеев такой подход объяснял «теснейшей зависимостью возникновения и осуществления смежных прав от прав авторов творческих произведений»[7].
Для правильного восприятия норм авторского права изначально целесообразно учитывать следующие основополагающие правила авторского права.
1. Общий смысл и назначение норм, входящих в авторское право, – защита прав и законных интересов тех, кто создал авторское произведение, и тех, кто имеет определенные имущественные права на него. По существу авторское право провозглашает принцип свободы творчества и свободы распоряжения его результатами – только автор вправе определять их содержание и направленность.
2. Авторские права презюмируются и для их возникновения по общему правилу не требуется специальных регистрационных процедур, как, например, это предусмотрено для приобретения права собственности на недвижимое имущество или прав на изобретение. Или иначе – авторские права возникают в силу факта создания произведения.
3. Авторское право исходит из того, что после создания произведения только его творец определяет судьбу произведения. Автор может вообще не использовать созданное произведение, но если оно используется, то изначально исключительное право на распоряжение произведением принадлежит именно автору. В соответствии с п. 4 ст. 1235 ГК РФ ничтожными признаются условия договоров о передаче авторских прав, ограничивающие право гражданина создавать результаты интеллектуальной деятельности определенного рода или в определенной области интеллектуальной деятельности либо отчуждать исключительное право на такие результаты другим лицам.
Однако автор вправе уступить свое исключительное право по договору об отчуждении такого права или предоставить определенные возможности по использованию произведения в рамках лицензионного договора. Неимущественные же права, связанные с личностью автора, переданы быть не могут никогда и никому.
4. Свобода творчества сочетается с определенными ограничениями для создания гармоничного баланса интересов творца и общества. Это проявляется в общерегулятивных функциях государства, установлении таких правил, как дозволение использовать произведение в личных целях без согласия автора (ст. 1274-1279 ГК РФ), переход произведений при определенных обстоятельствах в общественное достояние (ст. 1281 ГК РФ) и т.п.
5. Все произведения, в том числе и созданные отечественными авторами, объективно имеют общемировой (транснациональный) характер. Закон учитывает данное обстоятельство, и поэтому непременным компонентом правового регулирования в авторском праве являются нормы, посвященные авторским правоотношениям с участием иностранцев (иностранных организаций), отношениям по защите прав российских авторов за рубежом и т.д. В авторском праве также необычайно велика роль международных конвенций и договоров (см. гл. 2), при изложении правил о сфере действия норм законодатель обычно указывает и особенности применения их к отношениям, осложненным «иностранным элементом».
6. Авторское право по общему правилу охраняет и защищает не существо (содержание) соответствующих идей, решений, мыслей, а лишь их внешнюю форму. Поэтому оно не распространяется на идеи, концепции, принципы, методы, процессы, системы, способы, решения технических, организационных и иных задач, открытия, факты, языки программирования (п. 5 ст. 1259 ГК РФ).
Функции авторского права – это целевое назначение авторского права и наличие в его составе необходимых правовых средств, способных обеспечить достижение поставленных целей.
Анализ юридической литературы позволяет нам выделить следующие функции авторского права:
1) обеспечительная функция проявляется в двух моментах:
во-первых, авторское право обеспечивает признание авторства и охрану произведений науки, литературы и искусства с момента их воплощения в объективной форме, наделяя автора комплексом личных неимущественных и имущественных прав;
во-вторых, авторское право создает условия для широкого использования произведений в интересах общества, «предоставляя доступ к сокровищам мировой культуры»;
2) стимулирующая функция заключается в том, что авторское право способствует созданию условий для занятия творческим трудом, а также использованию полученных произведений, в частности, для получения доходов;
3) защитная функция состоит в том, что, с одной стороны, законом закреплено правило, что неправообладатели «не могут использовать соответствующие результат интеллектуальной деятельности или средство индивидуализации без согласия правообладателя, за исключением случаев, предусмотренных ГК РФ. Использование результата интеллектуальной деятельности или средства индивидуализации, если такое использование осуществляется без согласия правообладателя, является незаконным и влечет ответственность, установленную ГК РФ, другими законами, за исключением случаев, когда использование результата интеллектуальной деятельности или средства индивидуализации лицами иными, чем правообладатель, без его согласия допускается ГК РФ», с другой стороны, автор и иной правообладатель могут обратиться в компетентные государственные органы для принудительной защиты своих нарушенных прав.
Принципы авторского права – это основные начала, наиболее общие руководящие положения авторского права, определяющие основные направления авторско-правового регулирования и имеющие в силу их законодательного закрепления общеобязательный характер.
Значение принципов заключаются в следующем. Во-первых, они определяют общее направление регулирования авторских правоотношений. Принципы пронизывают содержание всей системы авторского права, предопределяют всю юрисдикционную деятельность и воплощаются в субъективных правах и обязанностях участников авторских правоотношений.
Во-вторых, принципы авторского права являются средством устранения пробелов в праве при применении такого способа как аналогия права. Кроме того, опора на принципы авторского права позволяет правильно толковать и применять на практике нормы, регулирующие авторские правоотношения.
Принципы авторского права, в отличие от принципов гражданского права в целом (ст. 1 ГК РФ), не закреплены в конкретной статье ГК РФ. Вместе их можно вывести из анализа действующего законодательства.
В силу закрепления в законе принципы авторского права обладают общеобязательным характером.
А. П. Сергеев выделил четыре принципа авторского права: принцип свободы творчества; принцип сочетания личных интересов автора с интересами общества; принцип неотчуждаемости личных неимущественных прав автора; принцип свободы авторского договора[8].
Принцип свободы творчества. В соответствии с п. 1 ст. 44 Конституции РФ «каждому гарантируется свобода литературного, художественного, научного, технического и других видов творчества, преподавания. Интеллектуальная собственность охраняется законом». При этом п. 5 ст. 29 закрепляет запрет цензуры, то есть требование от редакции средства массовой информации со стороны должностных лиц, государственных органов, организаций, учреждений или общественных объединений предварительно согласовывать сообщения и материалы (кроме случаев, когда должностное лицо является автором или интервьюируемым), а равно наложение запрета на распространение сообщений и материалов, их отдельных частей[9].
Проявлением рассматриваемого принципа является то, что законодатель не ограничивает круг охраняемых произведений и охраняет любые результаты творческой деятельности, существующие в объективной форме, независимо от их назначения, достоинств и способа выражения. Более того, авторы свободны в выборе «темы, сюжета, жанра и формы воплощения создаваемых ими понятий или художественных образов, а также самостоятельно решают вопросы о выпуске своего произведения в свет, придании произведению окончательной формы и т. п.»
Принцип сочетания личных интересов автора с интересами общества. В основе авторского права лежит признанное за автором монопольное право на использование созданного им произведения. Однако надо учитывать, что многие результаты творческой деятельности являются движущей силой и основным фактором экономического, технологического, общественного, социального, научного и культурного развития общества. Соответственно неограниченная монополия автора на произведение может служить тормозом в эволюции соответствующих общественных отношений. Промышленное развитие многих стран показало, что монополии являются сдерживающим фактором экономического и общественного развития и допустимы только в отношении в отношении необнародованных произведений. Если же произведение с согласия автора стало доступно для всеобщего сведения, его права на произведение не могут быть столь обширными, чтобы полностью игнорировать интересы других граждан и общества в целом.
Общество в равной степени заинтересовано как в свободном доступе к творческим произведениям своих членов, так и в том, чтобы создаваемые произведения эффективно охранялись нормами авторского права. Сочетание личных интересов автора с интересами общества проявляется в том, что, с одной стороны законодатель закрепил широкий круг личных и имущественных авторских прав, запрет на несанкционированное автором использование произведения, а, с другой стороны, установил случаи, когда произведения могут свободно использоваться указанными в законе лицами и способами.
Принцип неотчуждаемости личных неимущественных прав автора. В соответствии с п. 1 ст. 1265 ГК РФ право авторства и право автора на имя как самые важные из личных неимущественных авторских прав неотчуждаемы и непередаваемы, т.е. не могут перейти к другим лицам. В связи с этим право авторства и право автора на имя не переходят по наследству. Однако надо заметить, что некоторые личные неимущественные права автора не подлежат отчуждению при его жизни, но могут реализовываться иными лицами после его смерти. Например, право на обнародование произведения, не осуществленное при жизни автора, может быть исполнено после его смерти лицом, обладающим исключительным правом на произведение, если обнародование не противоречит воле автора произведения, определенно выраженной им в письменной форме (в завещании, письмах, дневниках и тому подобном) (п. 3 ст. 1268 ГК РФ).
Принцип свободы договоров, заключаемых в сфере интеллектуальной деятельности является частным случаем принципа свободы договора, закрепленного в ст. 421 ГК РФ. Данный принцип проявляется в том, что субъекты авторского права свободны в заключении договора, в выборе контрагента договора, условий договора и т.д.
Помимо рассмотренных принципов авторского права можно выделить территориальный и национальный принципы охраны авторских прав. Территориальный принцип предоставления охраны заключается в том, что охрана произведению предоставляется, если произведение впервые опубликовано (может быть обнародовано) или если не опубликовано, но находится на территории государства, где испрашивается охрана. Изначально Бернская конвенция применяла только этот принцип, но с 1964 г. стал применяться принцип гражданства (национальный). Он заключается в том, что произведения гражданина определенной страны охраняются в стране, гражданином которой он является, независимо от места обнародования произведения.
Правила территориального действия авторского права сводятся к тому, что авторское право распространяется на произведения, обнародованные или необнародованные, но находящиеся в какой-либо объективной форме:
1. На территории РФ – признается за авторами (их правопреемниками) независимо от их гражданства. При этом произведение также считается впервые обнародованным путем опубликования в Российской Федерации, если в течение тридцати дней после даты первого опубликования за пределами территории Российской Федерации оно было опубликовано на территории Российской Федерации.
2. За пределами территории РФ – признается за авторами, являющимися гражданами РФ (их правопреемниками).
3. За пределами территории РФ – признается на территории РФ за авторами (их правопреемниками) – гражданами других государств в соответствии с международными договорами Российской Федерации. В данной ситуации необходимо учитывать несколько моментов:
3.1. Автор произведения (иной первоначальный правообладатель) определяется по закону государства, на территории которого имел место юридический факт, послуживший основанием для приобретения авторских прав.
3.2. Произведения, в отношении которых осуществляется защита,
а) не должны в стране своего происхождения перейти в общественное достояние;
б) в стране происхождения произведения не истек установленный в такой стране срок действия исключительного права на эти произведения;
в) не должны перейти в общественное достояние в Российской Федерации вследствие истечения предусмотренного гражданским законодательством срока действия исключительного права на них.
3.3. При предоставлении охраны в соответствии с международными договорами Российской Федерации срок действия исключительного права на эти произведения на территории Российской Федерации не может превышать срок действия исключительного права, установленного в стране происхождения произведения.
В России авторские правоотношения регулируются актами национального законодательства и международными договорами Российской Федерации.
К актам национального авторского законодательства можно отнести следующие нормативно-правовые акты.
1. Конституция Российской Федерации[10] в ст. 44 гарантирует каждому свободу литературного, художественного, научного, технического и других видов творчества, преподавания, закрепляя «Интеллектуальная собственность охраняется законом».
В соответствии с п. «о» ст. 71 Конституции РФ правовое регулирование интеллектуальной собственности относится к ведению Российской Федерации. Следовательно, законы, охраняющие интеллектуальную собственность, должны приниматься на федеральном уровне.
2. Гражданский кодекс Российской Федерации[11] и принятые в соответствии с ним иные федеральные законы.
В основном авторские правоотношения урегулированы главами 69 и 70 части четвертой ГК РФ, которая была введена в действие с 1 января 2008 г. Федеральным законом от 18 декабря 2006 г. № 231-ФЗ «О введении в действие части четвертой Гражданского кодекса Российской Федерации»[12]. В соответствии со ст. 5 указанного закона часть четвертая ГК РФ применяется;
· к правоотношениям, возникшим после введения ее в действие;
· по правоотношениям, возникшим до введения в действие части четвертой, – к тем правам и обязанностям, которые возникнут после введения ее в действие.
Права на результаты интеллектуальной деятельности и приравненные к ним средства индивидуализации, охраняемые на день введения в действие части четвертой Кодекса, продолжают охраняться в соответствии с правилами части четвертой Кодекса.
Отдельные положения авторско-правового регулирования имеют место в других частях ГК РФ. В частности, в части второй ГК РФ – это статья 2 «Отношения, регулируемые гражданским законодательством», статья 128 «Виды объектов гражданских прав»; в части третьей глава 53 «Доверительное управление имуществом», глава 55 «Простое товарищество», глава 59 «Обязательства вследствие причинения вреда», § 1 «Общие положения о возмещении вреда». При наследовании авторских прав применению подлежит часть третья ГК РФ.
В отношении федеральных законов, регулирующих вопросы авторского права, можно отметить, что на современном этапе их практически нет, т.к. все авторско-правовые нормы закреплены в части четвертой ГК РФ. Однако ряд законов регулирует отношения, соприкасающиеся с авторскими отношениями, конкретизируя их в той или иной сфере. К таким можно отнести, федеральные законы «О средствах массовой информации»[13], «Об архитектурной деятельности в Российской Федерации»[14], «О библиотечном деле»[15] «О рекламе»[16], и др.
3. Подзаконные нормативные акты и иные правовые акты, содержащие нормы авторского права, принимаются в целях формирования механизма реализации принятых федеральных законов.
Среди подзаконных нормативных актов наибольшей юридической силой обладают указы Президента РФ[17], которые могут быть приняты по любому вопросу, входящему в компетенцию Президента, кроме тех положений, когда соответствующие правоотношения регулируются только федеральным законом.
Постановления Правительства РФ, содержащие нормы гражданского права, принимаются лишь на основании и во исполнение перечисленных выше актов более высокой юридической силы и должны соответствовать ГК РФ, другим федеральным законам и указам Президента РФ. В сфере авторского права можно отметить такие постановления Правительства как «Об утверждении Правил выплаты автору вознаграждения при публичной перепродаже оригиналов произведений изобразительного искусства, авторских рукописей (автографов) литературных и музыкальных произведений»[18], «О минимальных ставках авторского вознаграждения за некоторые виды использования произведений литературы и искусства»[19] и т.д.
В случае противоречия указа Президента Российской Федерации или постановления Правительства Российской Федерации ГК РФ или иному закону, применяется ГК РФ или соответствующий закон.
Федеральные органы исполнительной власти также могут издавать акты, содержащие нормы авторского права, в случаях и в пределах, предусмотренных ГК РФ, другими законами и иными правовыми актами. Для рассматриваемой сферы правоотношений наибольшее значение имеют акты Министерства образования и науки Российской Федерации и Федеральной службы по интеллектуальной собственности, патентам и товарным знакам.
В соответствии с Постановлением Правительства РФ «Об утверждении Положения о Министерстве образования и науки Российской Федерации»[20] Министерство образования и науки Российской Федерации является федеральным органом исполнительной власти, осуществляющим функции по выработке государственной политики и нормативно-правовому регулированию в сфере интеллектуальной собственности.
Органом исполнительной власти, осуществляющим функции по охране культурного наследия, авторского права и смежных прав, по контролю и надзору в указанной сфере деятельности, а также по нормативно-правовому регулированию в сфере охраны культурного наследия, осуществления контроля и надзора в сфере авторского права и смежных прав является Федеральная служба по надзору за соблюдением законодательства в области охраны культурного наследия (Росохранкультура)[21].
Федеральная служба, в частности, осуществляет следующие полномочия:
1) принимает нормативные правовые акты в установленной сфере деятельности, в том числе, акты по вопросам обеспечения контроля и надзора в установленной сфере ведения; акты по вопросу установления формы отчета о деятельности аккредитованных государством организаций, осуществляющих коллективное управление авторскими и смежными правами;
2) осуществляет:
2.1) государственный контроль и надзор за соблюдением законодательства Российской Федерации об авторском праве и смежных правах в установленной сфере деятельности и за деятельностью аккредитованных государством организаций, осуществляющих коллективное управление авторскими и смежными правами;
2.2) государственную аккредитацию организаций, осуществляющих коллективное управление авторскими и смежными правами, и т.д.
Функции по контролю и надзору в сфере правовой охраны изобретений, полезных моделей, промышленных образцов, программ для ЭВМ, баз данных, топологий интегральных микросхем, в том числе входящих в состав единой технологии, товарных знаков, знаков обслуживания, наименований мест происхождения товаров, а также функции по контролю в сфере правовой охраны и использования результатов научно-исследовательских, опытно-конструкторских и технологических работ гражданского назначения, выполняемых за счет средств федерального бюджета осуществляет Федеральная служба по интеллектуальной собственности, патентам и товарным знакам[22].
Служба осуществляет контроль и надзор в сфере правовой охраны и использования объектов интеллектуальной собственности, патентов и товарных знаков и результатов интеллектуальной деятельности, вовлекаемых в экономический и гражданско-правовой оборот.
По отдельным вопросам, связанным с реализацией авторских и смежных прав, принятием дополнительных мер для защиты правообладателей, реализацией специально возложенных полномочий в области авторских и смежных прав издаются нормативные правовые актыи иные документы министерстви иных федеральных органов исполнительной власти,в частности:
· приказ Минкультуры России от 19 февраля 2008 г. № 30 «О Типовом уставе аккредитованной организации по управлению правами на коллективной основе», утвердивший также Общие методические рекомендации по применению Типового устава аккредитованной организации по управлению правами на коллективной основе;
· приказ Росохранкультуры от 23.10.2008 № 92 «Об утверждении Положения об аккредитационной комиссии»[23];
· распоряжение ГТК РФ от 27 мая 1999 г. № 01-14/632 «Об усилении контроля за перемещением товаров, содержащих объекты интеллектуальной собственности»[24];
· письмо Роснотребнадзора от 5 апреля 2005 г. № 0100/2416-05-32 «О проведении контрольно-надзорных мероприятий, направленных на нераспространение контрафактных аудиовизуальных произведений и фонограмм»[25].
Не является источником гражданского, а следовательно, и авторского права судебная и арбитражная практика, так как судебные учреждения не обладают нормотворческими функциями и не создают нормы права, а лишь дают толкования по их применению[26]. Вместе с тем постановления и разъяснения Пленумов Верховного Суда Российской Федерации и Высшего Арбитражного Суда Российской Федерации имеют важное практическое значение. В сфере авторских правоотношений можно отметить следующие акты:
· информационное письмо Президиума Высшего Арбитражного Суда РФ от 13 декабря 2007 г. № 122 «Обзор практики рассмотрения арбитражными судами дел, связанных с применением законодательства об авторском праве и смежных правах»[27];
· постановление Пленума Верховного Суда РФ от 19 июня 2006 г. № 15 «О вопросах, возникших у судов при рассмотрении гражданских дел, связанных с применением законодательства об авторском праве и смежных правах»[28];
· Постановление Пленума Верховного Суда РФ от 26 апреля 2007 г. № 14 «О практике рассмотрения судами уголовных дел о нарушении авторских, смежных, изобретательских и патентных прав, а также о незаконном использовании товарного знака»[29].
Существенное значение для авторских правоотношений имеют нормы международного права. В настоящее время Российская Федерация является участницей следующих международных договоров в сфере авторского права:
· Бернская конвенция об охране литературных и художественных произведений 1886 г.[30];
· Конвенция об учреждении Всемирной организации интеллектуальной собственности (ВОИС) 1967 г.[31];
· Всемирная (Женевская) конвенция об авторском праве[32];
· Договор ВОИС об авторском праве 1996 г. (ДАП);
· Соглашение стран СНГ о сотрудничестве в области охраны авторского права и смежных прав 1993 г.;
· двусторонние соглашения с Австрией, Арменией, Болгарией, Венгрией, Кубой, Малагасийской Республикой, Польшей, Словакией, Чехией, Швецией, часть из которых заключена еще в период существования СССР.
Пункт 2 ст.7 ГК РФ устанавливает, что «если международным договором, в котором участвует Российская Федерация, установлены иные правила, чем те, которые установлены гражданским законодательством, то применяются правила международного договора».
Согласно ст. 1256 ГК РФ при предоставлении на территории Российской Федерации охраны произведению в соответствии с международными договорами Российской Федерации, автор произведения или иной первоначальный правообладатель определяется по закону государства, на территории которого имел место юридический факт, послуживший основанием для приобретения авторских прав.
Предоставление на территории Российской Федерации охраны произведениям в соответствии с международными договорами Российской Федерации осуществляется в отношении произведений, не перешедших в общественное достояние в стране происхождения произведения вследствие истечения установленного в такой стране срока действия исключительного права на эти произведения и не перешедших в общественное достояние в Российской Федерации вследствие истечения предусмотренного Кодексом срока действия исключительного права на них. При предоставлении охраны произведениям в соответствии с международными договорами Российской Федерации срок действия исключительного права на эти произведения на территории Российской Федерации не может превышать срок действия исключительного права, установленного в стране происхождения произведения.
[1] Гражданское право: Учебник. Том 1 / Отв. ред. Е. А. Суханов. М., 2003. С. 638.
[2] Хохлов В.А. Авторское право: Законодательство, теория, практика. М., 2008. С. 6.
[3] Гражданское право: Учебник. Том I / Под ред. О. Н. Садикова. М., 2006. ИПС «КонсультантПлюс».
[4] Хохлов В.А. Указ. соч. С. 6.
[5] Макагонова Н.В. Авторское право. М., 1999. С. 74.
[6] Закон РФ от 09.07.1993 № 5351-1 «Об авторском праве и смежных правах» // Ведомости СНД и ВС РФ. 1993. № 32. Ст. 1242. Далее – Закон об авторском праве.
[7] Гражданское право. Том 3 / Под ред. А.П. Сергеева, Ю.К. Толстого. М., 1999. С. 95.
[8] Гражданское право. Том 3. Учебник / под ред. А.П. Сергеева, Ю.К. Толстого. М., 1999. С. 95 – 97.
[9] Закон РФ от 27.12.1991 № 2124-1 «О средствах массовой информации» // Российская газета. № 32. 1992.
[10] Конституция Российской Федерации, принята всенародным голосованием 12.12.1993. С учетом поправок, внесенных Законами РФ о поправках к Конституции РФ от 30.12.2008 № 6-ФКЗ, от 30.12.2008 № 7-ФКЗ // СЗ РФ. 2009. № 4. Ст. 445.
[11] Гражданский кодекс Российской Федерации (часть первая) от 30.11.1994 № 51-ФЗ // СЗ РФ. 1994. № 32. Ст. 3301; Гражданский кодекс Российской Федерации (часть вторая) от 26.01.1996 № 14-ФЗ // СЗ РФ. 1996. № 5. Ст. 410; Гражданский кодекс Российской Федерации (часть третья) от 26.11.2001 № 146-ФЗ // СЗ РФ. 2001. № 49. Ст. 4552; Гражданский кодекс Российской Федерации (часть четвертая) от 18.12.2006 № 230-ФЗ // СЗ РФ. 2006. № 52 (1 ч.). Ст. 5496. Дале – ГК РФ.
[12] Федеральный закон от 18.12.2006 № 231-ФЗ «О введении в действие части четвертой Гражданского кодекса Российской Федерации» // СЗ РФ. 2006. № 52 (1 ч.). Ст. 5497. Далее – Закон о введении в действие части четвертой ГК РФ.
[13] Закон РФ от 27.12.1991 № 2124-1 «О средствах массовой информации» // Российская газета. № 32. 08.02.1992.
[14] Федеральный закон от 17.11.1995 № 169-ФЗ «Об архитектурной деятельности в Российской Федерации» // СЗ РФ. 1995. № 47. Ст. 4473.
[15] Федеральный закон от 29.12.1994 № 78-ФЗ «О библиотечном деле» // СЗ РФ. 1995. № 1. Ст. 2.
[16] Федеральный закон от 13.03.2006 № 38-ФЗ «О рекламе» // СЗ РФ. 2006. № 12. Ст. 1232.
[17] См., например, Указ Президента РФ от 5 декабря 1998 г. № 1471 «О мерах по реализации прав авторов произведений, исполнителей и производителей фонограмм на вознаграждение за воспроизведение в личных целях аудиовизуального произведения или звукозаписи произведения» // СЗ РФ. 1998. № 49. Ст. 6016.
[18] Постановление Правительства РФ от 19.04.2008 № 285 «Об утверждении Правил выплаты автору вознаграждения при публичной перепродаже оригиналов произведений изобразительного искусства, авторских рукописей (автографов) литературных и музыкальных произведений» // СЗ РФ. 2008. № 17. Ст. 1880.
[19] Постановление Правительства РФ от 21.03.1994 № 218 «О минимальных ставках авторского вознаграждения за некоторые виды использования произведений литературы и искусства» // СЗ РФ. 1994. № 13. Ст. 994.
[20] Постановление Правительства РФ от 15.06.2004 № 280 «Об утверждении Положения о Министерстве образования и науки Российской Федерации» // СЗ РФ. 2004. № 25. Ст. 2562.
[21] Постановление Правительства РФ от 29.05.2008 № 407 «О Федеральной службе по надзору за соблюдением законодательства в области охраны культурного наследия» // СЗ РФ. 2008. № 22. Ст. 2584.
[22] Постановление Правительства РФ от 16.06.2004 № 299 «Об утверждении Положения о Федеральной службе по интеллектуальной собственности, патентам и товарным знакам» // СЗ РФ. 2004. № 26. Ст. 2668.
[23] Приказ Росохранкультуры от 23.10.2008 № 92 «Об утверждении Положения об аккредитационной комиссии» // Российская газета. № 241. 25.11.2008.
[24] Распоряжение ГТК РФ от 27.05.1999 N 01-14/632 «Об усилении контроля за перемещением товаров, содержащих объекты интеллектуальной собственности» // Таможенный вестник. № 13. 1999.
[25] Письмо Роспотребнадзора от 05.04.2005 № 0100/2416-05-32 «О проведении контрольно-надзорных мероприятий, направленных на нераспространение контрафактных аудиовизуальных произведений и фонограмм» // ИПС «КонсультантПлюс».
[26] Калмыков Ю.Х. Вопросы применения гражданско-правовых норм. Саратов, 1976. С. 31 – 45.
[27] Вестник ВАС РФ. 2008. № 2.
[28] Российская газета. № 137. 28.06.2006.
[29] Российская газета. № 95. 05.05.2007.
[30] Бернская конвенция по охране литературных и художественных произведений, заключена в г. Берне 09.09.1886 / Бюллетень международных договоров. 2003. № 9. С. 3 – 34.
Конвенция вступила в силу для России 13.03.1995.
[31] Конвенция, учреждающая Всемирную организацию интеллектуальной собственности. Заключена в г. Стокгольме 14.07.1967 // ИПС «КонсультантПлюс». Конвенция вступила в силу для СССР 26.04.1970.
[32] Всемирная конвенция об авторском праве. Заключена в г. Женеве 06.09.1952 // Собрание постановлений Правительства СССР. Отдел второй. 1973. № 24. Ст. 139. Конвенция вступила в силу для России 27.05.1973.
В системе 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. Данное свойство может принимать четыре значения:
Рис. 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;}
Рис. 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.
Рис. 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.
Рис. 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. В качестве аргументов данного свойства могут выступать любые комбинации трех значений, определяющих стиль маркеров, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.
Оформление ссылок
Существует несколько общих правил, которые разработчик должен учитывать при создании веб-страниц. Эти правила основываются на ожиданиях пользователей относительно оформления и действия ссылок:
Рис. 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 установить базовые маркеры для нумерованных и маркированных списков, а также специальные маркеры, использующие графические изображения. Также рекомендуется создать горизонтальный список и список без маркеров.
Используя псевдоклассы, предлагается оформить различные состояния ссылок с помощью различного вида подчеркиваний, а также установить индивидуальные цвета. Необходимо установить для ссылок, указывающих на ресурсы Сети, определенное графическое изображение и предусмотреть смену изображения для уже посещенной ссылки. Также необходимо предусмотреть изменения вида ссылки при наведении на нее курсора: сделать ссылку перечеркнутой и изменить цвет фона ссылки.
Рис. 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 таблице оформление, добавляя ко всей таблице и ячейкам индивидуальное оформление, включающее толщину и стиль границы, заполнение и выравнивание текста в ячейках, высоту и ширину и т.д.
Слушателю рекомендуется также применить к созданной таблице основные шаблоны оформлений, описанные в лекции.
Рис. 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. В случае обнаружения ошибок, разобрать их и исправить.