? Волшебство Знаний в Центре Внимания: Гран-при и Победители Международного Конкурса Презентаций "Галактика Презентаций" ?
С радостью объявляем, что завершился увлекательный Международный Конкурс Презентаций "Галактика Презентаций". Это было захватывающее мероприятие, где талантливые участники представили свои исследования и проекты.
? Гран-при получила работа:"Топ 10 самых Милых животных"Авторы: Стрельцов Арсений, Гвоздев Роман
Эта презентация поразила жюри своей оригинальностью, тщательной подготовкой и интересным материалом. Поздравляем Арсения и Романа с выдающимся достижением!
? Первое место заняла работа:"Манулы"Автор: Папкова Софья
Проект Софьи о "Манулах" завоевал первое место благодаря глубокому исследованию и теплому, чуткому взгляду на мир этих удивительных созданий.
? Второе место удостоилось работе:"ЛЮБИМЫЕ КОТЫ"Автор: Русин Иван
Презентация Ивана привлекла внимание своей теплотой и преданностью теме. Его любовь к котам стала настоящим открытием для зрителей.
Поздравляем всех участников конкурса с прекрасными работами! Ваш вклад в обогащение нашей Галактики Знаний неоценим. ??✨
Статья представляет уникальное исследование, посвященное влиянию дополнительных занятий физической подготовкой на гибкость у школьников. Авторы – опытные педагоги и ученые – провели анализ эффективности программы тренировок, выявив важные моменты в развитии физической активности у детей среднего школьного возраста.
Научная статья "ОПТИМИЗАЦИЯ ФИЗИЧЕСКОЙ ПОДГОТОВКИ ДЕВОЧЕК-ВОЛЕЙБОЛИСТОК В УСЛОВИЯХ ДОПОЛНИТЕЛЬНОГО ОБРАЗОВАНИЯ" была успешно внесена в электронную библиотеку Elibrary.
Авторы, в составе которых входят Красильников А.А., Шеина А.С., и Чубанова Г.Р., представляют результаты своего исследования, направленного на повышение эффективности физической подготовки девочек-волейболисток в рамках дополнительного образования.
Аннотация статьи:
В статье исследуется влияние программ физической подготовки на физическую активность и спортивные результаты девочек-волейболисток. Работа базируется на исследовании группы девушек среднего школьного возраста, активно занимающихся волейболом. Особое внимание уделяется вопросам оптимизации тренировочного процесса и его влияния на достижение выдающихся результатов в волейбольном спорте для данной возрастной категории.
Основные темы, рассмотренные в статье:
Роль скоростно-силовых упражнений в физической подготовке.
Влияние программ физической подготовки на центральную нервную систему и системы кровообращения и дыхания.
Значение дополнительного образования в достижении лучших результатов в волейбольном спорте.
Заключение и выводы:
Результаты исследования позволяют сделать выводы о значимости дополнительного образования в повышении эффективности тренировок и достижении высоких результатов в волейболе для девочек среднего школьного возраста. Эта работа может стать ценным ресурсом для тренеров, педагогов и всех, кто интересуется вопросами физической подготовки волейболисток.
Статья доступна для ознакомления в электронной библиотеке Elibrary по следующей ссылке.
Для управления видом маркера используется свойство 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. Однако базовое правило должно быть определено в первую очередь:
A {} A:link{} A:visited{} A:focus{} A:hover{} A:active{}
Такая запись полезна, если необходимо убрать используемое по умолчанию подчеркивание ссылок.
Управление поведением по умолчанию
По умолчанию, большинство браузеров задает для всех ссылок подчеркивание, а состояние фокуса клавиатуры создает вокруг ссылок рамку. Данное оформление можно заменить или вообще отключить.
Подчеркивание задается с помощью свойства text-decoration, рассмотренного в "Оформление текста с помощью CSS" . Напомним, что подчеркивание задается с помощью значения свойства 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.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 установить базовые маркеры для нумерованных и маркированных списков, а также специальные маркеры, использующие графические изображения. Также рекомендуется создать горизонтальный список и список без маркеров.
Используя псевдоклассы, предлагается оформить различные состояния ссылок с помощью различного вида подчеркиваний, а также установить индивидуальные цвета. Необходимо установить для ссылок, указывающих на ресурсы Сети, определенное графическое изображение и предусмотреть смену изображения для уже посещенной ссылки. Также необходимо предусмотреть изменения вида ссылки при наведении на нее курсора: сделать ссылку перечеркнутой и изменить цвет фона ссылки.
Одним из самых важных инструментов дизайна является точное управление свободным пространством. Любое пустое пространство вокруг элемента невольно притягивает к нему взгляд, а для текста еще и обеспечивает его оптимальное восприятие. Пустой промежуток вокруг элемента выделяет его на веб-странице и позволяет отделить один элемент от другого. Однако таблицы стилей браузера, используемые по умолчанию, не решают задачу управления свободным пространством с достаточной точностью, поэтому разработчикам часто приходится использовать поля, границы, заполнение и другие свойства компоновки 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 показано, какие поля необходимо определить и какие значения необходимо им придать.
Рис. 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, которые управляют величиной расстояния слева, справа, сверху и снизу соответственно.
Основное предназначение заполнения - создать пустое пространство вокруг содержимого блочного элемента, например, текста, чтобы он не прилегал плотно к границе элемента. Использование заполения повышает читабельность текста и улучшает внешний вид страницы. В следующем примере показано использование заполнения для оформления текста:
В данном примере создается два блока с разными характеристиками. В первом блоке вокруг текста по вертикали и горизонтали с помощью свойства 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, то фрагмент кода должен выглядеть следующим образом:
Чтобы рисунок смещался влево, а текст его окружал, необходимо определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left.
Рис. 13.4. Пример обтекания рисунка текстомСвойство clear управляет поведением последовательности всплывающих элементов документа. По умолчанию, последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс смещается в сторону. Например, в предыдущем примере текст автоматически смещается вверх вдоль изображения. Свойство clear может иметь значения left, right, both или none.
Для оформления фона в 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.
Если одновременно для элемента задан цвет фона и фоновое изображение, то цвет фона будет отображаться до тех пор, пока фоновое изображение не загрузится полностью или в случае, если изображение по какой-либо причине не доступно. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Если фоновое изображение меньше области элемента, то по умолчанию оно будет повторяться по горизонтали и по вертикали, стремясь заполнить всю выделенную область. Однако 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 фиксирует изображение, а содержимое страницы прокручивается. Например, следующий код фиксирует изображение:
Положение фонового изображения: свойство 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, того же результата можно достичь одной строкой кода:
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 ), но и некоторые структурные элементы, например, заголовки или параграфы.
При оформлении текста необходимо установить такие свойства как семейство шрифтов, размер, насыщенность и стиль, капитель и другие свойства, описанные в "Оформление текста с помощью CSS" . Данные свойства необходимо применять как к блокам текста, так и к группам символов. Слушателю предлагается поработать над цветовым оформлением текста и отдельных его символов. Выбор объектов применения данных свойств оставляется на усмотрение пользователя.
Задание потребует предварительной группировки элементов созданного HTML-документа в блоки с использованием элементов DIV и SPAN.
Большая часть сайтов, несмотря на их разнородную направленность, имеет нечто общее. Это интересная, привлекающая посетителей информация, а также интерактивная возможность пообщаться с другими людьми. И в том, и другом случае дело не обходится без текста. Именно текст служит основным составляющим практически любого сайта. Красиво и элегантно оформленный текст может лучше передать замысел автора и привлечь к себе внимание. К тому же с таким текстом приятнее работать, он лучше воспринимается, и пользователи это ценят.
Задание свойств шрифтов
Существуют тысячи шрифтов, которые предназначены для оформления текстов. Однако, число шрифтов, применяемых для набора текста на сайтах, существенно ниже. Конечно, можно задать, например, для заголовка, вычурный шрифт, установленный на компьютере разработчика. Но если такого шрифта на компьютере пользователя нет, то текст будет отображаться шрифтом, установленным в браузере по умолчанию. Получается, что труд дизайнеров и разработчиков пропал даром.
Одной из возможностей обойти эту проблему является новая концепция стандарта 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:
Таблица стилей документа представляет собой набор правил, ассоциированных с документом HTML и определяющих его отображение. Каждое правило в таблице стилей состоит из селектора и блока объявлений. Блок объявлений всегда отделяется от селектора пробелом и заключается в фигурные скобки. Селектор определяет область применения стилевого правила, а блок объявлений содержит одно или несколько объявлений, которые отделяются друг от друга точкой с запятой.
Каждое объявление включает в себя свойство и соответствующее этому свойству значение. Любое свойство является обобщенным параметром оформления и должно отделяться от значения двоеточием. Свойства могут быть достаточно разнообразны: они могут определять цвет элемента и фона, поля, заполнение, тип и размер шрифта и т.п. Набор допустимых значений для каждого конкретного свойства должен быть определен индивидуально. Правило может быть задано следующим образом:
P {font-family: arial; color: red}
В приведенном примере свойству font-family, определяющему вид шрифта, присваивается значение arial, а свойству color, определяющему цвет шрифта, – значение red. Поскольку блок объявлений соотносится с селектором P, то областью применения данного стилевого правила будут являться все элементы <P>…</P>.
Существует несколько различных селекторов, каждый из которых соответствуют различным частям разметки. Четырьмя наиболее общими селекторами являются универсальные селекторы, селекторы элементов, селекторы классов и селекторы идентификаторов.
Универсальные селекторы. Универсальные селекторы позволяют применить стилевое оформление сразу ко всем элементам на странице. Например, следующее правило устанавливает сплошную границу толщиной 1 пиксел для каждого элемента на странице:
* {border: 1px solid;}
Селекторы элементов. Для определения информации о представлении элементов HTML большинство стилевых правил используют в качестве селекторов имена этих элементов. Например,
P {font-size: 1.2em; margin: 10px 20px;}
Приведенное выше правило будет применяться ко всем элементам <P>…</P>.
Селекторы классов. Напомним, что Спецификация HTML 4.01 предусматривает для всех элементов специальный атрибут class, который позволяет особым образом отметить некоторые структурные элементы в документе, например
<P class="important">...</P>
Каскадные таблицы стилей позволяют использовать в качестве селекторов значения атрибутов class. Названия классов в селекторах предваряются точкой и указываются после имен элементов:
P.important {padding-left: 20px;}
В приведенном примере стилевое правило будет применяться только к тем элементам <P>…</P>, атрибут class которых имеет значение important.
Каскадные таблицы стилей также позволяют использовать в селекторах названия классов без указания имен элементов:
.important {padding-left: 20px;}
Подобные стилевые правила будут применяться ко всем элементам, которые имеют атрибут class с указанным значением.
Селекторы идентификаторов. Помимо классов, Спецификация HTML предусматривает для всех элементов еще один специальный атрибут id, с помощью которого любому элементу можно назначить уникальный идентификатор, например:
<DIV id="header">...</DIV>
Главное отличие идентификаторов от классов заключается в том, что каждое значение атрибута id должно быть уникальным. Идентификаторы в селекторах указываются после имен элементов и предваряются символом #:
DIV#header {width: 1000px;}
Данное стилевое правило будет применяться к единственному экземпляру элемента <DIV>…</DIV>, которому назначен атрибут id со значением header. Если в селекторе используется идентификатор без указания конкретного элемента, то такое стилевое правило будет применяться к единственному экземпляру любого элемента, значение id которого равно header:
#header {width: 1000px;}
Можно соединять несколько селекторов, чтобы определить еще более конкретные правила. Например, запись
P.warning{}
соответствует всем параграфам со значением class равным warning ;
DIV#example{}
соответствует элементу DIV со значением атрибута id равным example ;
P.info, LI.highlight{}
соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight
Группировка селекторов
Если нескольким разным селекторам необходимо сопоставить одинаковые объявления, такие селекторы можно сгруппировать в список. Имена селекторов в данном случае должны разделяться запятыми:
P, UL {font-size: 1.2em; line-height: 1.5em;}
В приведенном примере для двух элементов P и UL назначается одинаковый размер шрифта и межстрочный интервал. Синтаксис каскадных таблиц стилей позволяет легко группировать не только простейшие селекторы с именами элементов, но также и другие типы селекторов. В некоторых случаях подобная группировка позволяет значительно сократить размер CSS-файла.
Дополнительные селекторы CSS
Кроме рассмотренных выше селекторов существуют и другие, которые позволяют выбирать элементы для стилевого оформления на основе более специальных критериев. Ниже будут рассмотрены некоторые из них.
Селекторы атрибутов. Селекторы атрибутов позволяют выбирать элементы на основе содержащихся в них атрибутов. Например, можно выбрать каждый элемент IMG с атрибутом alt с помощью следующего селектора:
IMG[alt] {border: 1px solid;}
Элементы можно выбирать не только на основе содержащихся в них атрибутов, но и по значениям этих атрибутов. Следующее правило будет применяться ко всем изображениям со значением атрибута src равным image.jpg:
IMG[src="image.jpg"] {border: 1px solid;}
Селекторы потомков. Селекторы потомков используются для выбора только определенных элементов, которые являются потомками других определенных элементов. Например, следующее правило будет применяться ко всем элементам STRONG, которые являются потомками элементов H1. Другими словами, оно применяется только к тем элементам STRONG, которые находятся внутри элемента H1, и никакого промежуточного элемента между ними нет:
H1 > STRONG {color: blue;}
Селекторы нижележащих элементов. Селекторы нижележащих элементов выбирают все подходящие элементы в любом месте иерархии элементов. Рассмотрим следующий фрагмент кода HTML:
В этом фрагменте элемент DIV является предком всех других элементов: двумя его потомками являются элементы STRONG и P. Элемент P имеет один элемент-потомок - еще один STRONG. Можно использовать селектор потомков для выбора только первого элемента STRONG, находящегося непосредственно внутри DIV следующим образом:
DIV > STRONG { ... }
Если вместо этого использовать селектор нижележащих элементов, то будут выбраны оба элемента STRONG:
DIV STRONG { ... }
Селекторы смежных одноуровневых элементов. Эти селекторы позволяют выбирать определенный элемент, который следует непосредственно после другого определенного элемента на том же уровне в иерархии элементов. Например, если необходимо выбрать только элементы P, следующие непосредственно за элементами H1, можно воспользоваться следующим правилом:
H1 + P { ... }
Псевдоклассы
Псевдоклассы используются для обеспечения стилевого оформления различных состояний элементов. Наиболее часто псевдоклассы применяются для оформления состояний ссылок.
Псевдоклассы :link и :visited. Современные браузеры по-разному отображают посещенные и непосещенные ссылки. Для того, чтобы можно было применить к этим типам ссылок различные стилевые правила, в CSS предусмотрены специальные псевдоклассы :link и :visited.
a:link {color: red;} a:visited {color: green;}
В приведенном выше примере первое стилевое правило будет применяться к непосещенным ссылкам в документе, а второе - к посещенным.
Псевдоклассы :hover, :active и :focus. Стиль отображения некоторых элементов может динамически изменяться в результате определенных действий пользователя. Для этого в CSS используются псевдоклассы :hover, :active и :focus.
Псевдокласс :hover применяется к соответствующему элементу в случае, когда пользователь навел курсор мыши на этот элемент, но не активировал его щелчком мыши.
Псевдокласс :active применяется к соответствующему элементу, когда пользователь нажимает кнопку мыши и до тех пор, пока он ее не отпустит. Как правило, это довольно короткий промежуток времени.
Псевдокласс :focus применяется к соответствующему элементу, когда он получает фокус (в результате нажатия определенных клавиш).
CSS не определяет, к каким именно элементам могут применяться указанные псевдоклассы. Однако современные браузеры поддерживают их только применительно к HTML-элементам A, т.е. к ссылкам, например:
Псевдокласс :first-child. Данный псевдокласс выбирает все экземпляры элемента, который является первым элементом-потомком своего предка, поэтому, например, следующее правило выбирает первый объект списка любого вида и делает его текст жирным:
LI:first-child {font-weight: bold;}
Псевдокласс :lang. Псевдокласс :lang позволяет выбирать элементы, язык которых был задан как определенный язык с помощью атрибута lang. Например, следующий элемент
<P lang="en-US">London is a capital of Great Britan.<P>
можно было бы выбрать с помощью кода
p:lang(en-US) { ... }
Псевдоэлементы
Одним из назначений псевдоэлементов является установка стиля первой буквы или первой строки текста в заданном элементе. Чтобы легко создать буквицу в начале каждого параграфа документа, можно использовать следующее правило:
Первая буква каждого параграфа будет теперь жирной и на 200% больше остального текста параграфа.
Чтобы сделать первую строку каждого параграфа жирной, можно использовать следующее правило:
P:first-line {font-weight: bold;}
Другим применением псевдоэлементов является вставка автоматически генерируемого содержимого перед или после указанного элемента. За эти действия отвечают псевдоэлементы :before и :after соответственно. Подробно ознакомиться с особенностями применения данных пседоклассов можно в Спецификации CSS.
Комментарии
Комментарии в CSS начинаются с группы символов /* и заканчиваются символами */. Например:
/* Так выглядит комментарий в CSS */
Использование комментариев может сэкономить немало времени при поиске определенного стилевого правила в CSS-файлах. Комментарии в CSS не влияют на интерпретацию таблиц стилей браузерами. Однако не рекомендуется использовать комментарии на русском языке, т.к. в некоторых случаях использование кириллицы в CSS-комментариях может приводить к неправильной интерпретации таблиц стилей некоторыми популярными браузерами.
Включение таблиц стилей в HTML-документ
Имеется три способа задания стилей в HTML-документе. Перечислим их в порядке предпочтения.
Внешние таблицы стилей
Для подключения к документу внешней таблицы стилей (т. е. таблицы стилей, хранящейся в отдельном файле) следует поместить в заголовок документа HTML элемент LINK, например:
Внешние таблицы стилей рекомендуется использовать в том случае, когда несколько HTML-документов пользуются единой таблицей стилей.
Внутренние таблицы стилей
Для включения в документ внутренней таблицы стилей следует поместить в заголовок документа элемент STYLE. Например:
... <HEAD> <STYLE type="text/css"> H1 {text-align: center} </STYLE> </HEAD> <BODY> <H1>Этот заголовок имеет указанный выше стиль</H1> </BODY>
Внутренние таблицы стилей рекомендуется использовать в том случае, когда данная таблица стилей используется только в данном HTML-документе.
Таблицы стилей элементов
Последним способом задания стилей является определение таблицы стилей отдельного элемента путем задания его атрибута style. Например, стиль элемента H1 из предыдущего примера мог бы быть задан и так:
<H1 style="text-align: center">
Подобной практики следует избегать. Она приемлема только в том случае, когда документ HTML содержит единственный элемент с данным набором стилей.
Наследование
Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам. Наследуются не все свойства CSS: например, поля не наследуются, так как маловероятно, что элементу-потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в Спецификации CSS (http://www.w3.org/TR/CSS21/propidx.html). Однако следует помнить, что значения, заданные в виде процентных величин, не наследуются никогда.
Пусть, например, элемент H1 содержит элемент EM:
<H1>Этот заголовок <EM>очень важен</EM>!</H1>
Если элементу EM не присвоен цвет, то он унаследует цвет своего предка, т.е. элемента H1. Для задания стиля отображения элементов по умолчанию, достаточно задать стиль элемента BODY. Все остальные элементы являются потомками этих элементов, поэтому они будут наследовать их свойства.
Для свойств, которые не наследуются по умолчанию, можно определить принудительное наследование, используя ключевое слово inherit. Например, следующее правило заставит все параграфы наследовать все свойства фона от своих предков:
P {background: inherit;}
Принудительное наследование не предназначено для постоянного использования. Оно может быть полезно для отмены объявления в конфликтующем правиле. Однако данный вид наследования необходимо использовать с осторожностью, так как, например, Internet Explorer, включая версию 7, не поддерживает это ключевое слово.
Каскадирование
Сам термин CSS означает Каскадные таблицы стилей (Cascading Style Sheets), поэтому нет ничего удивительного, что каскадирование является его важной характеристикой. Это механизм, который управляет конечным результатом, когда несколько конфликтующих объявлений CSS применяется к одному элементу. Например, поверх стилевых спецификаций, примененных к какой-нибудь отдельной веб-странице, может действовать стилевой файл, общий для всех страниц веб-сайта.
Имеется три основных показателя, которые управляют порядком, в котором применяются объявления CSS. К таким показателям относятся важность, специфичность и порядок исходного кода.
Важность объявления CSS зависит от того, где оно определено. Таблицы стилей могут иметь три источника происхождения: автор, пользователь и агент пользователя.
Таблица стилей агента пользователя является встроенной таблицей стилей браузера. Каждый браузер имеет свои используемые по умолчанию правила, определяющие, как выводить различные элементы HTML, если никакой стиль не определен пользователем или создателем страницы. Типичным примером является оформление ссылок: непосещенные ссылки обычно выводятся синим цветом и подчеркнутыми.
Таблица стилей пользователя является таблицей стилей, которую определил пользователь. Не все браузеры поддерживают таблицы стилей пользователя, но они могут быть очень полезны, особенно для пользователей с некоторыми типами функциональных недостатков.
Таблица стилей автора является таблицей стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил к соответствующему документу HTML или включил в него.
Как правило, вес правил таблицы автора больше, чем вес правил таблицы пользователя, а вес правил таблиц автора и пользователя больше, чем вес правил таблицы агента пользователя.
Для того, чтобы правила пользовательской таблицы стилей могли перекрывать авторскую, CSS содержит атрибут !important. Правило пользовательской таблицы стилей, имеющее такой атрибут, имеет больший вес, чем соответствующее правило авторской таблицы стилей. Например, если в пользовательской таблице определено следующее ниже правило, то не имеет значения, что определил автор веб-страницы, и не имеет значение, какое семейство шрифтов задано по умолчанию в браузере - все будет выводиться шрифтом Comic Sans MS.
* { font-family: "Comic Sans MS" !important; }
Специфичность можно представить как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам, в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу. Если два или больше объявлений конфликтуют за данный элемент, и все они имеют одинаковую важность, то победителем в правиле будет объявление с наиболее специфичным селектором. В общем случае класс элементов является более специфичным, чем просто элемент, а идентификатор элемента более специфичен, чем класс.
Если два объявления, влияющие на один и тот же элемент, имеют одинаковую важность и специфичность, то окончательное решение зависит от порядка исходного кода. Объявление, которое появляется позже в таблицах стилей, будет выигрывать у тех, которые встречаются раньше. Например, если имеется единственная внешняя таблица стилей, то при возникновении конфликта объявления в конце файла будут переопределять объявления, которые встречаются раньше в файле. Конфликтующие объявления могут также возникать в различных таблицах стилей. В этом случае порядок, в котором присоединяются или включаются таблицы стилей, будет определять, какое объявление будет применяться.
Таблицы позволяют представить большой объем информации в компактном и наглядном виде, а также сравнивать и сопоставлять различные данные. Они часто встречаются на сайтах, где служат для представления разнообразной статистики, рейтингов, сравнения цен и т.д.
Создание таблиц
Для добавления таблицы на веб-страницу используется элемент TABLE, который указывает браузеру, что содержимое необходимо организовать в табличном виде. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы: внутри элемента <TABLE>…</TABLE> допустимо использовать такие элементы HTML, как CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TH, TD и TR.
Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов TR и TD соответственно.
Для определения строки в уже созданной таблице используется элемент TR, который позволяет браузеру организовать содержимое между тегами <TR> и </TR> в горизонтальном виде: между ними должны размещаться все данные, которые требуется поместить в одну строку. Внутри строки таблицы обычно размещаются ячейки с данными. Для определения ячейки таблицы используется элемент TD. Число элементов ТD в строке определяет число ячеек. Ячеек может быть произвольное количество, однако таблица должна содержать хотя бы одну ячейку.
Вместо элемента TD допускается использовать элемент TH. Элемент TH определяет содержимое ячейки как заголовок для каждого столбца. Это помогает не только семантически описать содержимое, но также представляет его более аккуратно в различных браузерах и устройствах. Текст в такой ячейке обычно отображается браузерами жирным шрифтом и выравнивается по центру. В остальном разницы между ячейками, созданными с использованием элементов TD и ТН, нет.
Фрагмент кода, представленного ниже, создает таблицу, состоящую из трех столбцов и четырех строк, одна из которых задает строку заголовков столбцов:
Рис. 9.1. Пример простой таблицы со строкой заголовков
Заголовок таблицы
Таблицам на странице удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML используется специальный элемент CAPTION, который помещается внутри элемента <TABLE>…</TABLE>. Удобство использования элемента CAPTION состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные ее шириной.
По умолчанию, заголовок таблицы помещается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка предусмотрен атрибут align. Однако этот атрибут помечен в Спецификации HTML 4.01 как не рекомендуемый, и с его помощью получить код, одинаково работающий в разных браузерах, довольно сложно. Для выравнивания заголовка таблицы рекомендуется использовать CSS, а именно, свойство text-align.
Добавление некоторых свойств
Тот факт, что таблицы применяются достаточно часто, обязан не только их гибкости и универсальности, но и обилию атрибутов элементов TABLE, TR и TD, управляющих различными свойствами таблицы. Рассмотрим наиболее часто используемые атрибуты подробнее.
Описание таблицы: атрибут summary
Пользователи с нормальным зрением могут сами для себя решить, стоит им изучать таблицу или нет. Быстрый взгляд на нее и на ее заголовок позволит сказать, велика ли таблица и что она содержит. Пользователи с программами для чтения с экрана не смогут этого сделать, пока разработчик не добавит к элементу TABLE атрибут summary. Этот атрибут позволяет написать более развернутое описание, чем то, которое подходит для элемента CAPTION. Содержание атрибута summary не будет отражено визуальными браузерами, поэтому можно сделать описание достаточно длинным для того, чтобы те, кто его услышат, смогли понять, что именно представлено в таблице. Данный атрибут рекомендуется использовать только в случае необходимости, например, для больших и сложных таблиц. Для созданной выше таблицы можно добавить описание следующим образом:
<TABLE summary="Статистика переходов с основных поисковых систем. В таблице представлены средние значения."> ... </TABLE>
Толщина рамки таблицы: атрибут border
Атрибут устанавливает толщину рамки в пикселах, т.е. использует в качестве значения любое положительное число. По умолчанию, рамка изображается трехмерной, однако вид рамки меняется в зависимости от браузера. При использовании атрибута border без аргументов, браузер отображает рамку толщиной один пиксел. Толщину рамки возможно также установить с помощью одноименного свойства CSS. Следующий фрагмент кода добавляет к таблице рамку толщиной 2 пиксела:
<TABLE border="2"> ... </TABLE>
Ширина таблицы: атрибут width
Ширину таблицы можно задать с помощью атрибута width. Ширину можно задавать в пикселах или процентах от доступного пространства. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться форматировать текст, чтобы подогнать его к заданным размерам. Если это невозможно, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Если ширина явно не указана, то она также будет вычисляться на основе содержимого таблицы. Аналогом данного атрибута является одноименное свойство CSS. В следующем примере ширина таблицы устанавливается равной 75% от ширины окна браузера:
<TABLE width="75%"> ... </TABLE>
Расстояние между ячейками таблицы: атрибут cellspacing
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет и входит в общее значение. Значением атрибута может быть любое целое положительное число. По умолчанию, атрибут cellspacing принимает значения 0 или 2, в зависимости от того, установлен атрибут border или нет. Следующий фрагмент кода устанавливает расстояние между ячейками 2 пиксела:
<TABLE cellspacing="2"> ... </TABLE>
Расстояние внутри ячеек: атрибут cellpadding
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым: он добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Добавление cellpadding позволяет улучшить читабельность текста. При отсутствии границ этот атрибут не имеет особого значения. Значение данного атрибута может быть задано в пикселах или процентах от доступного пространства и по умолчанию равно нулю. Задать расстояние между границей ячейки и ее содержимым можно следующим образом:
<TABLE cellpadding="2"> ... </TABLE>
Пример совместного применения описанных выше атрибутов представлен в следующем листинге:
Результат выполнения данного кода представлен на рисунке 9.2.
Рис. 9.2. Результат применения описанных выше атрибутовКаждая ячейка таблицы, задаваемая элементом TD или TH, тоже имеет свои атрибуты, часть из которых совпадает с атрибутами элемента TABLE. Рассмотрим наиболее часто используемые атрибуты элемента TD.
Объединение ячеек: атрибуты colspan и rowspan
Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали. Например, в первой таблице, показанной на рисунке 9.3, содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan. Пример кода представлен ниже:
Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали. Например, во второй таблице, представленной на рисунке 9.3, содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan. Такого результата можно достичь с помощью следующего фрагмента кода:
Рис. 9.3. Примеры таблиц, демонстрирующих горизонтальное и вертикальное объединение ячеек
Перенос слов в ячейках: атрибут nowrap
Добавление атрибута nowrap к элементу TD заставляет браузер отображать текст внутри ячейки без переносов. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-странице. Как следствие, появится горизонтальная полоса прокрутки, и пользоваться подобной таблицей будет неудобно. В Спецификации HTML 4.01 данный атрибут помечен как не рекомендуемый, и его применение осуждается. Для достижения аналогичной функциональности рекомендуется использовать свойство CSS white-space.
Ширина и высота ячейки: атрибуты width и height
С помощью атрибутов width и height можно задать ширину и высоту ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину. Высоту таблицы и ее ячеек браузер устанавливает сам, исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали. Применение атрибутов width и height также осуждаются в Спецификации HTML. Вместо них рекомендуется использовать одноименные свойства CSS.
В заключение этого раздела следует отметить, что официальная спецификация HTML не рекомендует все атрибуты, касающиеся оформления таблиц и ячеек. Устанавливать такие свойства таблиц и ячеек, как выравнивание самой таблицы относительно окна браузера, текста в ячейках, цвет и стиль рамки вокруг ячеек таблицы, фона и многое другое рекомендуется только с использованием свойств CSS. Подробно эти вопросы будут освещены в "Оформление таблиц с помощью CSS" .
Дополнительная структуризация таблицы
Сложные таблицы со множеством столбцов и строк возможно дополнительно структурировать, определив верхний колонтитул, тело и нижний колонтитул таблицы. В сложных таблицах использование этих элементов позволит структурировать содержимое таблицы не только для разработчика, но и для браузеров и других устройств. Для добавления данной структуры к таблице используются элементы THEAD, TBODY и TFOOT соответственно.
Элемент THEAD предназначен для хранения одной или нескольких строк, представленных вверху таблицы. Допустимо использовать не более одного элемента THEAD в пределах одной таблицы, и он должен идти в исходном коде сразу после элемента TABLE.
Элемент TBODY позволяет создавать структурные блоки внутри таблицы, к которым можно применять единое оформление через стили. Допускается применять несколько элементов TBODY внутри контейнера TABLE. Элемент TBODY не должен перекрываться с другими видами группировок строк (т.е. с TFOOT и THEAD ).
Элемент TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы, и служит для создания нижнего колонтитула таблицы. Хотя этот элемент в исходном коде должен быть определен до элемента TBODY, браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент TFOOT.
Пример использования элементов THEAD, TBODY и TFOOT, представлен в следующем ниже листинге. Результат выполнения данного кода иллюстрирует рисунок 9.4.
Рис. 9.4. Результат дополнительной структуризации таблицы
Практическое занятие 2
Целью практического занятия является закрепление материла, представленного в лекциях 8 и 9. В ходе практического занятия формируются навыки работы с таблицами и ссылками в HTML.
Слушателю предлагается оформить в виде новой веб-страницы (например, page3.html) текст, представленный в "Приложения" . В тексте слово "СССР" необходимо оформить как аббревиатуру, снабдив ее расшифровкой, т.е. указанием полной формы записи. К таблице, представленной в данной статье, необходимо добавить заголовок, соответствующий содержанию таблицы, рамку определенной толщины, задать ширину и выделить строку заголовков. Слушателю также предлагается создать несколько таблиц с различной структурой, примеры которых даны в "Приложения" .
В части работы со ссылками рекомендуется создать несколько текстовых ссылок на любимые сайты, а также различные ресурсы Сети (документ Microsoft Word, графический файл и т.д.). В HTML-документе page2.html, созданном на первом практическом занятии, необходимо создать несколько закладок (т.е. ссылок на различные места того же документа) и организовать переходы к этим закладкам. Например, переходы можно организовать на различные законы, после которых можно предусмотреть ссылку, возвращающую пользователя к началу страницы.
Хотя HTML содержит большое количество средств для форматирования текста и структурирования документов, его основной особенностью является возможность создания гипертекстовых документов. Гипертекстовыми являются документы, которые содержат гиперссылки на другие ресурсы сети Интернет. Особенность гиперссылки заключается в том, что она может указывать не только на другой HTML-документ или любой другой ресурс (текстовые файлы, файлы PDF, изображения, звуковые файлы и т.д.), но и на определенный раздел текущего HTML-документа.
Текст гиперссылки, как правило, помечается подчеркиванием и цветом, чтобы его было легко визуально отличить от обычного текста. При наведении курсора мыши на ссылку, курсор превращается в "руку", а в статусной строке браузера отображается путь к ресурсу, на который указывает ссылка.
Любая ссылка на веб-странице может находиться в одном из следующих пяти состояний:
непосещенная ссылка (link). Такое состояние характерно для ссылок, которые еще не открывали. По умолчанию, непосещенные ссылки имеют синий цвет и отображаются шрифтом с подчеркиванием;
активная ссылка (active). Ссылка помечается как активная в момент ее открытия, т.е. в тот короткий промежуток времени между нажатием на ссылку и началом загрузки нового документа. В некоторых браузерах этот стиль применяется, когда ссылка открыта в другом окне или вкладке. Цвет такой ссылки по умолчанию красный;
посещенная ссылка (visited). Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию;
фокус (focus). Ссылка находится "в фокусе", когда, например, она выделена с помощью клавиатуры пользователя. Браузер Internet Explorer не поддерживает в настоящее время состояние focus, и использует вместо него состояние active;
под указателем (hover). Состояние применяется, когда пользователь удерживает над ссылкой указатель мыши.
Следует помнить, что различные состояния ссылок в различных браузерах реализуются и оформляются по-разному.
Создание гиперссылок
Любой строковый элемент или изображение можно превратить в гиперссылку. Для этого необходимо сообщить браузеру, какой элемент является ссылкой, а также указать адрес ресурса, на который следует сделать ссылку. Оба эти действия выполняются с помощью элемента A.
Элемент A имеет несколько атрибутов, главным из которых являются href, задающий адрес ресурса, на который указывает ссылка. Адрес ссылки может быть абсолютным и относительным. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сервера применяются относительные адреса. Ниже представлены некоторые примеры создания ссылок:
Иногда оказывается полезным организовать ссылки не на другие HTML-документы, а на определенные места того же самого документа. Подобные ссылки еще называют закладками. Вначале следует задать в соответствующем месте HTML-документа закладку и установить ее имя с помощью атрибута name элемента A. Имя ссылки на закладку начинается с символа #, после чего идет название закладки. Можно также делать ссылку на закладку, находящуюся на другой веб-странице и даже другом сайте. Для этого в адресе ссылки надо указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <A name=..> и </A> текст писать необязательно, т.к. требуется лишь указать местоположение перехода по ссылке.
Приведенный фрагмент кода создает закладку и ссылку на нее:
<A name="top"></A> ... <A href="#top">Вверх!</A>
Ссылкой может быть не только строковый элемент, но и изображение. Изображение в этом случае надо поместить между тегами <A href=...> и </A>, как показано в примере:
Атрибут href элемента A задает путь к документу, на который указывает ссылка, а атрибут src элемента IMG - путь к графическому файлу, который используется в качестве ссылки.
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Можно воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется свойство border cо значением none. На рисунке 8.1 представлены текстовая и графическая ссылки.
Рис. 8.1. Вид текстовой и графической ссылок в браузере
Как и большинство элементов HTML, элемент A может иметь атрибут title, который представляет некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа.
Создание навигационного меню
Отличительной особенностью веб-сайтов является нелинейность их содержимого. А для перемещения и ориентации в этом нелинейном пространстве служит навигационная система сайта. Основными инструментами для создания навигационной системы в HTML являются ссылки, закладки и списки. Чтобы показать пользователю, что закладки и ссылки выполняют функцию навигационного меню, а не являются случайным набором ссылок, их необходимо структурировать и стилистически оформить. Если порядок страниц не имеет значения, можно использовать неупорядоченный список, как показано в примере ниже:
Если порядок, в котором посетители просматривают все документы, важен, то необходимо использовать упорядоченный список. Если, например, имеется онлайновый курс, состоящий из нескольких лекций, и учащиеся должны изучать его в определенном порядке, то можно было бы использовать упорядоченный список. Использование списков для создания меню очень удобно, т.к. весь код HTML содержится в одном элементе списка, что позволяет использовать CSS для различного оформления каждого элемента. Кроме того, списки могут быть вложенными, что позволяет легко создавать несколько уровней иерархии навигации. Даже без какого-либо стилевого оформления списка, представление в браузере кода HTML имеет смысл, и посетителю легче понять, что эти ссылки объединены и составляют одну логическую единицу.
Различные типы меню
Существует несколько типов меню. Большинство из них можно создавать с помощью списков. Меню, созданные на основе списков, чаще всего применяются для организации навигации по странице и по сайту, контекстной навигации, для организации схемы сайта и нумерации страниц. Ниже приведено краткое описание различных типов меню.
Примером организации навигации по странице может служить оглавление для одной страницы со ссылками, указывающими на различные разделы страницы.
Навигация по сайту является наиболее распространенным типом меню, в том или ином виде присутствующим практически на каждом сайте. Это меню для всего сайта, со ссылками, указывающими на различные страницы на этом сайте. Данное меню представляет пользователю как доступные варианты перехода, так и иерархию сайта. Важным вопросом при организации навигации по сайту является вопрос выделения текущего документа в меню, чтобы создать у пользователя ощущение присутствия в определенном месте.
Одно из золотых правил разработки и навигации в Интернете состоит в том, что текущий документ никогда не должен ссылаться на себя самого, однако должен явно отличаться от других записей в меню. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту.
Если пользователю предлагается ссылка, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. По этой причине ссылка на текущую страницу никогда не должна присутствовать в меню ссылок. Данную ссылку лучше удалить или деактивировать.
Контекстная навигация представляет собой список ссылок, которые указывают на HTML-документы, связанные с темой просматриваемой страницы. Контекстные меню являются ссылками, которые создаются на основе содержимого текущего документа, и предлагают дополнительную информацию, связанную с текущей страницей. Классическим примером являются ссылки на связанные статьи, которые можно видеть в начале новостных лент.
Схема сайта является схемой всех страниц сайта или основных разделов крупных сайтов. Она позволяет посетителям сайта получить представление обо всей структуре сайта и быстро перейти в требуемое место, даже если оно находится где-то в иерархии страниц. Как схема сайта, наряду с поиском по сайту, дает возможность пользователю быстро и эффективно перемещаться по сайту.
Нумерация страниц необходима для организации быстрого перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска, такими, как поисковые системы Яндекс, Google и т.п. Нумерация страниц отличается от других типов навигации тем, что она обычно соединяется с тем же документом, но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Меню нумерации страниц позволяют посетителям просматривать множество данных без потери представления о том, где они находятся.
Карты-изображения
Для организации большинства навигационных меню вполне достаточно использовать упорядоченные или неупорядоченные списки. Существуют, однако, ситуации, которые могут потребовать другие методы организации меню.
Одним из таких методов являются клиентские карты-изображения. Карты-изображения превращают изображение в меню, задавая в нем интерактивные области, которые можно соединить с различными документами. Например, следующий ниже код превращает изображение легендарной ливерпульской четверки в меню, на котором можно щелкать мышью.
Рис. 8.2. Изображения участников группы "Beatles" являются ссылками
Любое изображение можно превратить в меню, определяя карту с различными областями, называемыми также горячими точками. Для указания браузеру на то, что изображение является картой, используется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается элементом MAP. Значение атрибута name данного элемента должно соответствовать имени в usemap. Для задания активной области, являющейся ссылкой на документ HTML, используется элемент AREA.
Каждая область должна иметь несколько атрибутов.
Атрибут href определяет URL-адрес ресурса, с которым должна соединяться ссылка.
Атрибут shape определяет форму активной области. Область может быть задана в виде окружности (значение circle ), прямоугольника (значение rect ) или многоугольника (значение poly ).
Атрибут coords определяет координаты в изображении, которые должны стать горячими точками. Значения координат отсчитываются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей необходимо определить только верхний левый и нижний правый углы; для окружностей необходимо определить центр окружности и радиус; для многоугольников необходимо предоставить наиболее полный список всех угловых точек.
Использование карт-изображений наглядней, чем обычные текстовые ссылки, и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.
Практическое занятие 3
Целью практического занятия является закрепление материала лекций 7 и 8. В ходе практического занятия слушатель осваивает основные приемы организации навигации на сайте.
Слушателю предлагается организовать навигацию по странице page2.html и создаваемому сайту с помощью списков и ссылок. В качестве навигации по странице page2.html можно создать иерархическое меню, содержащее разделы "Дела конструкторские" и "Дела машинные" с соответствующими подразделами, позволяющее пользователю перемещаться не только к данным разделам, но и к содержащимся в них законам. Для реализации навигации по сайту предлагается создать меню, позволяющее пользователю перемещаться между созданными на предыдущих практических занятиях страницами page1.html, page2.html и page3.html. Для реализации навигации по сайту предлагается также создать карту ссылок. Изображение-основа карты ссылок может быть создано в любом графическом редакторе.
