Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
 Скачать 23.7 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
< < ]3десь располагается контент страницы Шаг 3: Определение текстовых элементов ПРИМЕЧАНИЕ До появления спецификации HTML5 синтаксис, используемый для указания набора символов в элементе meta, был значительно сложнее. Если бы выписали документ на языке HTML 4.01 или XHTML, элемент meta выглядел бы так http- equiv="content-type" content="text/html; Польза элемента Для каждого документа, элемент title не только необходим, но и очень полезен. Заголовок документа — это то, что отображается в списке Закладок или в Избранном пользователя, а также на вкладках в браузере. Кроме того, описательные заголовки документа — ключевой инструмент повышения доступности, так как они — первое, что человек видит при использовании программ экранного доступа. Поисковые системы также в значительной степени зависят от заголовков документов. Поэтому важно обеспечить содержательные и описательные заголовки для всех ваших документов и избегать расплывчатых заголовков, таких как Добро пожаловать или Моя страница. Также можно ограничить длину заголовков документа, чтобы они могли уместиться в области заголовка браузера. Другим удачным приемом будет поместить вначале часть заголовка, содержащую более определенную информацию (например, расположить описание страницы перед названием компании, чтобы заголовок документа был виден, когда в окне браузера открыто сразу несколько вкладок Также в разделе заголовка обязателен элемент title. В соответствии со спецификацией HTML, каждый документ должен содержать описательное название Наконец, элемент body тело) содержит весь контент, который мы хотим отобразить в окне браузера. Готовы ли вы добавить некоторую структуру к главной странице бистро Черный гусь»? Откройте документ index.html и перейдите к упражнению О --------------- << ! DOCTYPE html> ___________ < © - е © < < ]3десь располагается контент страницы Шаг 3: Определение текстовых элементов УПРАЖНЕНИЕ 4.2. ДОБАВЛЕНИЕ ОСНОВНОЙ СТРУКТУРЫ. Откройте недавно созданный документ index.html, если он еще не открыт. Сначала добавьте объявление DOCTYPE на языке HTML5: 3. Поместите весь документ в корневой элемент HTML, добавив открывающий тег в самом начале и закрывающий тег в конце текста. Далее создадим заголовок документа, который содержит название страницы. Вставьте теги Встроенные таблицы стилей. Вы можете применять свойства и значения к одному элементу, используя в нем атрибут style, как показано ниже style=Mc Чтобы добавить несколько свойств, разделите их точкой с запятой style=,fc olor: red; margin-top: е ш" Введение Ц1> Встроенные стили применяются только к отдельному элементу, в котором они появляются. Следует избегать применения таких стилей, пока не станет совершенно необходимо переписать стили из глобальной или внешней таблицы стилей. Встроенные стили вызывают проблемы, по Комментарии в таблицах стилей Иногда полезно оставлять себе или коллегам комментарии в таблице стилей. ЯзыкСББ имеет свой собственный синтаксис комментариев, показанный здесь * здесь находятся комментарии Текст, который содержится между символами /* и */, будет игнорироваться при анализе таблицы стилей, а значит, вы можете оставлять комментарии в любом месте таблицы стилей, даже внутри правила { f o n t - s i z e : s m a l l ; / * f o n t - s i z e : l a r g e ; * / Одно из применений комментариев — для пометки разделов таблицы стилей, чтобы их было проще найти в дальнейшем, например * Стили макета или Стили нижнего колонтитула ) ПРИМЕЧАНИЕ В HTML 4.01 и XHTML 1.0/1.1 элемент style должен был содержать атрибут type, идентифицирующий контент данного элемента s t y l e В HTML5 атрибут type больше не требуется. Элемент style может также включать aTpn6yTmedia, используемый для определения конкретного устройства вывода, например, экран, печатное или портативное устройство. См. также главу Глава 11. Каскадные таблицы стилей Важные концепции УПРАЖНЕНИЕ 11.2. ПРИМЕНЕНИЕ ВСТРОЕННЫХ СТИЛЕЙ Откройте файл twenties.html независимо оттого, в каком состоянии вы его оставили в упражнении 11.1. Если вы выполнили упражнение до конца, то получили правило, применяющее красный цвет к элементам Теперь напишите встроенный стиль, который делает второй элемент h2 серым. Мы сделаем это прямо в открывающем теге, используя атрибут style, как показано ниже position:absolute;top:519px;left:225px;white-space:nowrap" > purple " > Соедините точки Ь 2 Сохраните файл и откройте его в браузере. Теперь тот заголовок становится серым, заменяя любой установленный ранее цвет. Другой заголовок второго уровня не изменился. тому что они вставляют информацию о представлении в структурную разметку. Также они затрудняют внесение изменений, потому что надо выискивать каждый атрибут style в исходном коде. Упражнение 11.2 позволяет написать встроенный стиль и увидеть, как он работает. Мы не будем больше применять встроенные стили в силу перечисленных выше причин. Важные концепции Существует несколько важных концепций, которые необходимо понять, чтобы разобраться, как работают каскадные таблицы стилей. Я собираюсь бегло ознакомить вас с этими принципами сейчас, чтобы не пришлось потом отступать от обзора свойств стилей. Безусловно, каждая из этих концепций будет рассматриваться и поясняться более подробно в следующих главах. Наследование У вас глаза такого же цвета, как и у ваших родителей Вы получили их цвет волос Их уникальную улыбку Подобно тому, как родители передают по наследству характерные черты своим детям, элементы HTML передают определенные свойства стилей содержащимся в них элементам. Обратите внимание, что в упражнении 11.1, когда мы придали стиль элементам р в виде мелкого шрифта без засечек, элемент ет во втором абзаце также стал отображаться мелким шрифтом без засечек, даже несмотря на то, что мы не создавали правила специально для него (рис. 11.5). Это потому, что элемент унаследован стили от абзаца, в котором он находится. Текст без стиля Текст с примененным правилом стилей Элемент е т наследует стили, примененные к аозаду. р {font-size: small; font-family: sans-serif;} Элемент em [Наследует] стили, примененные к абзацу Выделенный текстовый элемент (ет) отображается мелким шрифтом без засечек, хотя у него нет собственного правила стилей. Он наследует стили от абзаца, в котором содержится. Р и с . 11.5. Элемент ет наследует стили, примененные к абзацу Структура документа Здесь важно понимать структуру вашего документа. Как я уже ранее отмечала, H TM документы имеют неявную структуру или иерархию. Например образец статьи, с которой мы упражнялись, имеет корневой элемент html, который содержит раздел заголовка (head) и тело (body) страницы, a body содержит элементы заголовка и абзаца. Несколько абзацев, в свою очередь, содержат встроенные элементы, такие как изо- Часть III. Правила CSS для представления Важные концепции бражения (img) и выделенный текст (еш). Вы можете наглядно представить структуру перевернутого дерева, разветвляющегося от корня, как показано на рис. Рис. 11.6. Древовидная структура документа twenties.html Родительские и дочерние элементы Дерево документа становится генеалогическим, когда появляются направления связей между элементами. Все элементы, содержащиеся внутри исходного, называются потомками Например все элементы hi, h2, реши документа на рис. 11.6 — потомки элемента Элемент, который полностью содержится внутри другого (без промежуточных уровней иерархии, называют дочерним элементом (ребенком И наоборот, содержащий его элемент называется родительским Например, элемент ет является дочерним по отношению кр, а элемент р — родительским по отношению к ет. Все элементы, лежащие выше конкретного элемента по иерархии — его предшествующие элементы (предки Два элемента с одними тем же родителем — элементы одного уровня (сестры Все это может казаться оторванным от практики, но пригодится при написании CSS-селекторов. Перемещение по дереву сверху вниз Когда выпишете стиль, основанный на шрифтах, используя элемент р в качестве селектора, правило применяется ко всем абзацам документа также, как и ко встроенным текстовым элементам, которые они содержат. Ранее на рис. 11.5 мы видели доказательство наследования элементом ет свойства стилей, примененного к его родителю р. Рис. 11.7 демонстрирует, что происходит, на основе схемы структуры документа. Обратите внимание, что элемент img исключен, так как свойства, связанные со шрифтом, не применяются к изображениям. Обратите внимание, я сказала определенные свойства наследуются. Это важно отметить, потому что некоторые свойства таблицы стилей наследуются, а некоторые нет. Свойства, связанные с форматированием текста, — размер шрифта, цвета, стилей и т. д. — передаются по наследству Важные концепции СОВЕТ ПО Когда вы изучаете новое свойство, хорошо бы отмечать, является ли оно наследником. Наследование указывается для каждого свойства, перечисленного в этой книге. Как правило, наследование отвечает вашим ожиданиям. ПРЕДУПРЕЖДЕНИЕ Таблица стилей браузера может замещать стили, заданные в элементе body, так что будьте готовы к появлению неожиданных стилей. А вот такие, как границы, поля, фонит. д, которые оказывают воздействие на очерченную границей область вокруг элемента, по наследству не передаются. Если подумать, то это не лишено смысла. Например, если вы помещаете границу вокруг абзаца, то вряд ли захотите, чтобы граница была также вокруг каждого встроенного элемента (такого как em, strong или а, содержащегося в нем. р { f o n t -s i z e : sm all; fo n t -f a m ily : s a n s -s e r if Рис. 11.7. Определенные свойства, примененные к элементам p, наследуются их дочерними элементами Можно выгодно использовать наследование при написании таблиц стилей. Например, если вы хотите, чтобы все текстовые элементы внешне отображались шрифтом Verdana, можете написать отдельные правила стилей для каждого элемента в документе и установить свойство f ont- f асе в значение Verdana. Лучшим способом будет написать одно правило стилей, которое применяет свойство f ont-face к содержимому элемента body, и позволить всем текстовым элементам, входящим в body, унаследовать этот стиль (рис. Если вы примените свойство, связанное со шрифтом, к телу элемента, оно перейдет по наследству ко всем текстовым элементам в документе (обратите внимание, что свойства шрифта не применяются к элементу img, поэтому он исключен { f o n t -s i z e : sm all; f o n t -f a m ily : s a n s -s e r if Рис. 11.8. Все элементы в документе наследуют определенные свойства, примененные к элементу b o d Часть III. Правила CSS для представления Важные концепции Любое свойство, примененное к конкретному элементу, заменит у него значения, унаследованные для этого свойства. Возвращаясь к примеру со статьей, мы могли определить, что элемент еш должен отображаться шрифтом с засечками, и это отменило бы унаследованный параметр шрифта без засечек. Конфликтующие стили каскад Никогда не задумывались, почему таблицы стилей называются каскадными CSS позволяет вам применять несколько таблиц стилей к одному и тому же документу, что означает неизбежное возникновение конфликтов. Например, что должен делать браузер, если импортированная в документ таблица стилей устанавливает красный цвет для элемента hi, а глобальная таблица стилей имеет правило, делающее элементы hi фиолетовыми? Люди, которые разработали спецификацию таблиц стилей, предвидели эту проблему и разработали иерархическую систему, присваивающую разный вес разным источникам информации о стиле. Каскад имеет отношение к тому, что происходит, когда несколько источников информации о стиле конкурируют за управление элементами на странице информация о стиле передается вниз по дереву до тех пор, пока не заменится командой стилей с большим весом. Например, если вы не применяете никакой информации о стиле к веб странице, она будет отображена в соответствии с внутренней таблицей стилей браузера (это называется отображением по умолчанию, или, согласно консорциуму Всемирной паутины W 3C — таблицей стилей пользовательского агента Однако если верстальщик веб-страницы задал для документа таблицу стилей таблицу стилей верстальщика, то она имеет больший веси отменяет стили браузера. Единственное исключение — если пользователь пометил стиль как важный, в этом случае данный стиль перевешивает все остальные (см. врезку Назначение приоритета»). Источник таблицы стилей — это иерархия, определяющая, какой стиль является приоритетным. Как вы уже уяснили, существуют три способа присоединения информации о стиле к исходному документу, и они также имеют каскадный порядок. Вообще, чем ближе таблица стилей к содержимому, тем больший весей присваивается. Глобальные таблицы стилей, которые появляются напрямую в документе в элементе s t y l e , имеют больший вес, чем внешние таблицы стилей. В примере, начинающем этот раздел, элементы h i в конечном счете окрашивались фиолетовым цветом, согласно глобальной таблице стилей, а не красным, как определялось во внешнем файле .css, имеющем меньший вес. Встроенные стили имеют больший вес, чем глобальные таблицы стилей, потому что они ближе к контенту. Именно этот эффект мы наблюдали в упражнении Для предотвращения замены конкретного правила, вы можете назначить ему важность при помощи индикатора ! important, как объясняется во врезке Назначение приоритета Важные концепции Врезка Иерархия таблиц стилей предоставляет обзор каскадного порядка от общего к частному. Когда два правила водной таблице стилей вступают в конфликт, для определения приоритетного используется селектор соответствующего типа. Специфичность Как только подходящая таблица стилей выбрана, в ней все еще могут быть конфликты поэтому каскадирование продолжается на уровне правил. Когда два правила водной таблице стилей конфликтуют, для определения победителя используется селектор соответствующего типа. Чем специфичнее селектор, тем больший вес ему присваивается для замены конфликтующих определений. Пока еще рано рассматривать специфичность, потому что мы просмотрели только один тип селектора (к тому же наименее специфичный. Сейчас просто возьмите на заметку термин специфичность и принцип замены одних селекторов другими. Мы вернемся к ним в главе 12, когда в вашем арсенале будет больше типов селекторов. - Назначение приоритета Если вы хотите, чтобы правило не было заменено более поздним конфликтующим, вставьте индикатор ! important сразу после значения свойства перед точкой с запятой. Например, чтобы абзац отображался всегда синим цветом, используйте правило: р {color: blue Даже если позднее браузер встретит в документе встроенный стиль который должен заменить действующую по всему документу таблицу стилей) вроде этого: <р position:absolute;top:785px;left:523px;white-space:nowrap" > тот абзац по-прежнему будет отображаться синим цветом, потому что правило с индикатором ! important не может быть заменено в таблице стилей верстальщика. Единственный вариант, при котором состоится замена если конфликтующее правило в пользовательской таблице стилей также было помечено как ! important. Этого следует избегать, чтобы специальные требования пользователей, такие как крупный шрифт для слабовидящих, никогда не заменялись. Основываясь на предыдущих примерах, если таблица стилей читателя включает в себя правило: р {color: текст останется синим, потому что все стили верстальщика (даже те, которые не помечены индикатором ! important) имеют преимущество над стилями читателя. Однако если конфликтующий пользовательский стиль помечен индикатором ! important, вроде этого: р {color: black абзацы станут отображаться черным цветом, и их нельзя будет заменить никаким стилем, предоставленным верстальщиком. ч________________________________________________________________ Часть III. Правила CSS для представления Важные концепции /" N Иерархия таблиц стилей Информация о стиле может поступать от разных источников, перечисленных ниже, от общего к частному. Пункты, находящиеся ниже по списку, отменяют пункты, находящиеся выше: • Настройки по умолчанию браузера • Пользовательские настройки стилей (установленные в браузере как таблица стилей клиента») • Связанная внешняя таблица стилей (добавленная при помощи элемента Импортируемые таблицы стилей (добавленные при помощи функции @ Глобальные таблицы стилей (добавляемые при помощи элемента Информация о встроенном стиле (добавленная в открывающий тег при помощи атрибута Любое правило стилей, помеченное верстальщиком индикатором Любое правило, помеченное пользователем индикатором ч Очередность правил Наконец, если возникают конфликты внутри правил стилей, имеющих одинаковый вес, побеждает то, которое указано последним. Например возьмем три правила type="text/css"> р { color: red; } р { color: blue; } p { color: green; В данном сценарии текст абзаца будет отображаться зеленым цветом из-за последнего правила в этой таблице стилей. Другими словами, то правило, которое располагается ближе всего к контенту документа, заменяет те, что определены до него. Тоже самое происходит, когда конфликтующие стили встречаются водном наборе определений: В результате получится зеленый цвет, потому что последнее опреде- таблицы стилей, перечисленные ление отменяет два предыдущих. Когда вы имеете дело со сложными позднее в исходном коде, имеют свойствами, легко случайно отменить предыдущие определения прави- преимущество над теми, что пере-  перейти в каталог файлов | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |