, стиль элементов форм и т. д. Возможно, вы хотите, чтобы на главной (домашней) странице
выглядел отлично от того, как он отображен на остальных. Например, был выделен крупным полужирным шрифтом
126 Часть 1. Основы CSS или шрифтом меньшего размера, чтобы вместить больший объем информации. Дру- гими словами, вы все еще хотите использовать большинство стилей файла styles.css , но необходимо отменить несколько атрибутов отдельных тегов (
, и т. д.). Рис. 5.4. Можно придать большую значимость стилевому классу, добавив перед ним идентификатор Один из способов сделать так заключается в простом создании внутренней таб- лицы, содержащей стили, которые вы хотите отменить и переопределить. Предпо- ложим, в файле styles.css имеется следующий стиль: h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #000; } Вы хотите, чтобы заголовок
главной веб-страницы был отображен крупным шрифтом красного цвета. Просто добавьте во внутреннюю таблицу следующий стиль: h1 { font-size: 36px; color: red; } В данном случае к тегу
главной страницы сайта будет применен шрифт Arial (из внешней таблицы стилей), но в то же время он будет окрашен в красный цвет и будет иметь размер 36 пикселов (эти параметры определены во внутренней таблице стилей).
Глава 5. Управление сложной структурой стилей: каскадность 127 СОВЕТ Убедитесь, что вы присоединяете внешнюю таблицу стилей перед внутренней в разделе HTML-за- головка . Это гарантирует, что нужные стили будут иметь преимущество в тех случаях, где значимость одинаковая. Другой метод заключается в создании еще одной внешней таблицы. Например, таблицы home.css , которую нужно будет присоединить к главной веб-странице в до- полнение к styles.css . Файл home.css будет содержать стили styles.css , которые вы хотите переопределить. Для правильной работы файл home.css должен быть при- соединен после styles.css в HTML-коде главной веб-страницы:
СОВЕТ Еще один способ выполнить точную постраничную стилизацию веб-страниц основан на использо- вании различных имен класса для тега веб-страниц разного содержания. Например, чтобы изменить дизайн отдельных веб-страниц, применяются идентификаторы .review, .story, .home, а за- тем создаются производные селекторы. Эта методика рассматривалась в гл. 3. Как избежать войн значимости Как уже упоминалось, теперь многие веб-дизайнеры предпочитают вместо ID-се- лекторов использовать классы. Одна из причин состоит в том, что ID-селекторы обладают очень большой значимостью, в силу чего для их отмены требуется более высокая значимость. Зачастую это приводит к войнам значимости, при которых таблицы стилей загружаются с излишне пространными и сложными селекторами. Суть этой проблемы проще объяснить на примере. Предположим, что в вашей стра- нице есть следующий фрагмент кода HTML:
A paragraph Another paragraph A special paragraph
Вы решили, что нужно сделать текст абзаца внутри div -контейнера article крас- ным, и создали следующий селектор потомка: #article p { color: red; } Но затем вам захотелось, чтобы текст одного абзаца с классом special был си- ним. Если просто создать селектор класса, вы не получите желаемого результата. .special { color: blue; } Как уже говорилось, когда определяется, какое из свойств нужно применить к тегу, веб-браузер использует для разрешения стилевых конфликтов простую ма- тематическую формулу: браузеры дают ID-селектору значение 100, селектору клас- са — значение 10, а селектору тега —значение 1. Поскольку селектор #article p со- ставлен из одного идентификатора и одного элемента (суммарный показатель
128 Часть 1. Основы CSS значимости —101), он заменяет собой простой стиль класса, заставляя вас из- менить селектор: #article .special {color: blue; } К сожалению, это изменение является причиной возникновения еще двух про- блем. Во-первых, селектор становится длиннее, и во-вторых, теперь этот синий цвет применяется, только когда класс special появляется внутри какого-нибудь элемен- та с идентификатором article . Другими словами, если вы скопируете HTML-код A special paragraph и вставите его в какое-нибудь другое место страницы, текст уже не будет синим. То есть использование идентификаторов делает селекторы не только длиннее, но и бесполезнее. А теперь посмотрим, что получится, если просто заменить все идентификаторы классами. Предыдущий код HTML приобретет следующий вид:
A paragraph Another paragraph A special paragraph
И код CSS можно заменить следующим: .article p { color: red; } p.special { color: blue; } Первый стиль — .article p — является селектором потомка с показателем зна- чимости 11. Второй стиль p.special также имеет показатель 11 (один тег и один класс) и означает «применить следующие свойства к любому абзацу с классом special ». Теперь, если вырезать этот код HTML и вставить его в какое-нибудь другое место страницы, вы получите синий текст, обусловленный стилем, к чему, собственно, мы и стремились. Это только один из примеров, но не составит особого труда найти таблицы сти- лей с абсурдно длинными селекторами вроде #home #article #sidebar #legal p и #home #article #sidebar #legal p.special По сути, использовать идентификаторы нет никакого смысла. Они не дают ни- чего, что нельзя было бы получить с применением простого селектора класса или селектора тега, а их высокая значимость может только привести к ненужному усложнению таблиц стилей. ПРИМЕЧАНИЕ Более подробные аргументы, почему нужно избегать применения селекторов идентификатора, из- ложены на странице http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class. Начинаем с чистого листа Как было сказано ранее, браузеры применяют к тегам собственные стили: напри- мер, теги
Скачать 20.28 Mb.