| Каждый CSS-стиль имеет две основные части: селектор и блок объявления , который, в свою очередь, содержит форматирующие свойства — цвет, размер шрифта текста и т. д. Они относятся лишь к оформлению. Волшебство CSS заключается как раз в самых первых символах, начинающих определение любого стиля, — селекторах Селекторы типов: дизайн страницы Селекторы типов (иногда называют селекторами тегов) являются весьма эффективным средством проектирования дизайна веб-страниц, поскольку определяют стиль всех экземпляров конкретного HTML-элемента. С их помощью можно быстро изменять дизайн веб-страницы с небольшими усилиями. Например, если надо отформатировать все абзацы текста, используя шрифт одного начертания, размера, а также цвета, то вам просто нужно создать стиль с селектором p (применительно к тегу ). Он переопределяет, каким образом браузер отобразит отдельно взятый тег (в данном случае ). Селекторы исключительно просто определить в CSS-стилях, так как они наследуют название форматируемых элементов — p, h1, table, img и т. д. Например, CSS-стиль с селектором h2, приведенным ниже, определяет представление каждого заголовка второго уровня страницы. h2 { font-family:"Century Gothic", "Gill Sans", sans-serif; color:#000000; margin-bottom:0; } Селектор тега воздействует на все экземпляры указанного элемента веб-страницы Однако и здесь имеются свои недостатки. Как сделать, чтобы не все абзацы веб-страницы выглядели одинаково? Простыми селекторами типов этого добиться не удастся, потому что они не предоставляют достаточную информацию браузеру. Например, нужно задать различия между элементом p, выделенным определенным цветом и кеглем, и элементом p, который вы хотите оставить написанным шрифтом черного цвета. CSS предоставляет сразу несколько способов решения данной проблемы, самый простой из которых — селекторы классов. Селекторы классов: точное управление Если вы хотите, чтобы какие-то элементы выглядели не так, как другие родственные им элементы той же веб-страницы, например, хотите задать для одного или двух рисунков красную рамку, оставив все остальные изображения нестилизованными, то можете использовать селектор классов. Если вы привыкли работать со стилями в программах для редактирования текста, таких как Microsoft Word, то селекторы классов покажутся вам хорошо знакомыми. Вы создаете селектор, назначая ему имя, а затем применяете его лишь к тем тегам HTML, которые хотите отформатировать. Например, вы можете создать класс .copyright и с его помощью выделить абзац, содержащий информацию об авторских правах, не затрагивая остальные абзацы. Селекторы классов позволяют указать конкретный элемент веб-страницы, независимо от тегов. Предположим, вы хотите отформатировать одно или несколько слов абзаца. В данном случае применяется форматирование не ко всему тегу , а лишь к фрагменту абзаца. Таким образом, вам нужно использовать селектор класса для выделения определенного текста. Можно применить изменения к множеству элементов, входящих в различные HTML-теги. Например, вы можете придать какому-то абзацу и заголовку второго уровня (тег ) одинаковый стиль, как показано на рис. 3.3. В отличие от селекторов типов, которые ограничивают вас существующими на веб-странице HTML-тегами, с помощью этого метода вы можете создать любое количество селекторов классов и поместить их в выбранное место. ПРИМЕЧАНИЕ Вы можете стилизовать один экземпляр заголовка (Wet Sod is Heavy Sod). Селектор класса .special сообщает браузеру о необходимости применения стиля к единственному тегу . Создав его однажды, вы можете пользоваться им и в дальнейшем применительно к любым тегам. Если вы хотите применить селектор класса всего к нескольким словам текста, содержащегося в произвольном теге HTML-кода , то используйте тег . Все названия селекторов классов должны начинаться с точки. С ее помощью браузеры находят селекторы классов в таблице стилей CSS. При именовании стилевых классов разрешается использование только букв алфавита, чисел, дефисов, знаков подчеркивания. Название после точки всегда должно начинаться с символа — буквы алфавита. Например, .9lives — неправильное имя класса, а .crazy8 — правильное. Можно называть классы, например, именами . copy-right и .banner_image, но не .-bad или _as_bad. Имена стилевых классов чувствительны к регистру. Например, .SIDEBAR и .sidebar рассматриваются языком CSS по-разному, как различные классы. Селекторы классов позволяют целенаправленно изменять дизайн фрагментов веб-страниц Классы описываются так же, как стили тегов. После названия идет блок объявления, содержащий все необходимые свойства: .special { color:#FF0000; font-family:"Monotype Corsiva"; } Поскольку стили тегов распространяются на все типы веб-страницы, их достаточно определить в заголовке, и они начинают работать. Форматируемые HTML-теги уже вписаны в веб-страницу. Чтобы воспользоваться преимуществами, которые обеспечивают стилевые классы, требуется выполнить еще несколько действий: использование селекторов классов — двухступенчатый процесс. После того как вы создали класс, необходимо указать, где вы хотите его применить. Для этого добавьте атрибут class к HTML-тегу, который нужно стилизовать. Допустим, вы создали класс .special с целью выделения определенных элементов веб-страницы. Чтобы применить этот стиль к абзацу, добавьте атрибут class к тегу таким образом:
ПРИМЕЧАНИЕ Вы не должны набирать точку перед именем класса в коде HTML (в атрибуте class). Она требуется только в названии селектора таблицы стилей. Таким образом, когда браузер сталкивается с этим тегом, он знает, что правила форматирования, содержащиеся в стиле .special, необходимо применить к данному тексту. Вы можете также использовать класс только в части абзаца или заголовка, добавив . Например, чтобы выделить только одно слово в абзаце, применяя стиль .special, можно написать следующее: Welcome to Café Soylent Green, the restaurant with something a little different. Создав класс, можно применить его практически к любому тегу веб-страницы. Вообще, вы можете применять один и тот же класс к разным тегам, создав, к примеру, стиль .special с особым шрифтом и цветом для тегов , и | 
6 058
9 806 
