Lorem ipsurn dolor sit amet, consectetuer adipiscing elit, sed tio ·
tincidunt ut laoreet dolore magna aliquam erat \'olutpat. Ut \\'15:
nostrud exerci tation uВamcorper suscipit loЬortis aisl ut aliqur,,
DW autem \"el eum iriure dolor in hendrerit in vulputate Ye.Jit "':
[EJ:'Done
class="speclal"
Рис. 3 .2 .Селекторы классов riоэволяют целенаnравленно иэменять диэайн
фрагментов веб-страниц ·
О Название после точки всегдадолжно начинаться с символа - буквы алфавита.
Например, . 91 i ves - неправильное имя класса, а . crazy8 - правильное. Можно
называть классы , например, именами .copy -right и .banner _image, но не . -bad или
as bad.
О Имена стилевых классов чувствительны к регистру. Например, . S IDEBAR и . s i debar
рассматривается языком CSS по-разному, как различные классы .
. specia1 {
со 1 о г: #FFOOOO: .
font-family :"Monotype Corsiva":
ID-селекторы: определение элементов веб-страниц 67
Классы описы,!Заются так же, как стили тегов. После названия идет блок объявления,
содержащий все необходимые свойства:
.specia1 {
co1or:#FFOOOO:
font-fami1y:"Monotype Corsiva":
Поскольку стили тегов распространяются на все типы веб-страницы, их достаточно
определить в заголовке, и они начинают работать. Форматируемые НТМLтеги
уже вписаны в веб-страницу. Чтобы воспользоваться преимуществами, которые
обеспечивают стилевые классы, требуется выполнить еще несколько действий:
использование селекторов классов - двухступенчатый процесс. После того как вы
создали класс, надо указать, где вы хотите его применить. Для этого добавьте атрибут
с1 ass к НТМL-тегу, который нужно стилизовать.
Допустим, вы создали класс . spec i а 1 с целью выделения определенных элементо
в веб-страницы. Чтобы применить этот стиль к абзацу, добавьте атрибут с 1 а s s
к тегу <р>, как показано ниже:
<р c1ass="specia1">
~РИМЕЧАНИЕ -----------------------Вы
не должны набирать точку перед именем класса в коде HTML (в атрибуте class). Она требуется
только в названии селектора таблицы стилей.
Таким образом, когда браузер сталкивается с этим тегом, он знает, что правила
форматирования, содержащиеся в стиле . speci а 1, необходимо применить к данному
тексту. Вы можете также использовать класс только в части абзаца или заголовка,
добавив <span>, как описано ниже.
Создав класс, можно применить его практически к любому тегу веб-страницы.
Вообще, вы можете применять один и тот же класс к разным тегам, создав, к примеру,
стиль. specia1 с особым шрифтом и цветомдля тегов <h2>, <р> и <u1>. Однако,
хотя классы и предоставляют почти безграничные возможности форматирования,
все-таки они не всегда являются верным инструментом CSS для создания дизайна
веб-страницы. Иногда лучше пользоваться ID-селектором, который позволяет
определить форматирующие правила для их однократного применения на странице.
ID-селекторы: определение элементов
веб-страниц
В языке CSS ID-селектор предназначен для идентификации уникальных частей
веб-страниц, таких как шапка, паиель навигации, основная информационная об.1асть
содержимого и т. д. Как и при использовании селектора класса, вы создаете
идентификатор (ID), придумав ему название, а затем применяете его к НТМL-коду
своей веб-страницы. Так в чем же различие? Как описано во врезке <<Бриллиант
без огранки~. ID-селекторы имеют донолнительное специфическое применение.
68Глава 3. Селекторы: определение элемекrов стилизации
Например, в веб-страницах с использованием кoдajavaScript или в очень объемных
страницах.
Другими словами, существует несколько вынужденных причин для использования
10-селекторов.
Чтобы точно _________________решить, что использовать- классы или идентификаторы, - следуйте
основным правилам.
О Для стиля, используемого неодщжратно, применяют классы. Если на веб-странице
есть несколько рисунков, то необходимо·применить селектор класса (например,
задающий такой стилевой эффект, как рамка) к каждому из тегов <img>,
которые вы хотите отформатировать. ·
О Пользуйтесь идентификаторами, когда необходимо определить раз.целы небстраницы,
которые встречаются один раз . Если их дизайн основан на CSS, то
часто используются 10-селекторы, чтобы определить такие уникальные части,
как боковые меню, низ страницы. В части 3 настоящей книги описывается использование
этого метода.
О Примите во внимание то, что решить конфликты стилей позволяет использование
!О-селекторов, которым браузеры придают больший приоритет, чем классовым.
Например, когда попадаются два различных стиля, относящихся к одному
и тому же тегу, но определяющих, допустим, различный цвет фона. В этом
случае применяется свойство стиля с !О-селектором, как имеющее более высокий
приоритет (см . гл . 5).
ПРИМЕЧАНИЕ-----------------------------------------------Каждый
идентификатор стиля должен относиться к определенному НТМL-теrу. Хотя, если будет
применен один и тот же идентификатор для двух или более тегов на одной веб-странице, это не
будет причиной аварийного завершения работы. Большинство браузеров правильно обрабатывает
сss-код стиля с таким ID-селектором. Однако НТМL-код вашей веб-страницы не пройдет синтаксическую
nроверку nравильносrи (валидацию), и дизайнеры по nроектированию не смогут понять,
что от них требуется.
БРИЛЛИАНТ БЕЗ ОГРАНКИ
НТМL-теrи <div>и <span>
В гл. 1 были кра11<о олисаны <di v> и <span> - два
универсальных НТМL-тега, которые однозначно указывают
на nрименение класса или стиля с !О-селектором.
Логическое деление страницы на такие фрагменты,
как шаnка, nанель навигации, боковые меню, низ
страницы, обесnечивает тег <div>. Вы можете его
также исnользовать, чтобы охватить любой фрагмент,
включающий ряд nоследовательных элементов вебстраницы,
в том числе заголовки, маркированные
сnиски, абзацы (программисты называют :ни эnемен-
ты блочными, nотому что они формируют логически
законченный блок информационного содержимого
с разрывами строк до и после такого блока). Тег <di v>
функционирует как тег абзаца: набираем открывающий
<div>, далее добавляем некоторый текст, рисунок
или какое-то другое информационное содержимое,
а 3атем заканчиваем их закрывающим</ d1 v>.
Тег <di v> имеет уникальную сnособность включать
в себя несколько блочных элементов, являясь средством
групnировки (логотип м nанель навигации или
блок новостей, формирующий боковой столбец}.
10-селекrоры: оnределение элементов веб-страниц 69
БРИЛЛИАНТ БЕЗ ОГРАНКИ
После группировки содержимото веб-страницы таким
образом вы можете л рименить определенное форматирование
исключительно к тегам, находящимся
внутри этого фрагмента <div>, или nереместить (nозиционировать)
весь отмеченный фрагмент содержимого
в конкретное место веб-страницы, наnример
в nравый столбец. Об управлении разделами в CSS
этим способом рассказывается в части 3 настоящей
книги.
Например, вы добавили на веб-страницу фотографию,
у которой есть сопроводительное описание. Их можно
заключить в <di v> (с применением ктеrу класса), чтобы
объединиТ~? в груnпу оба элемента:
<div class•"photo">
<i~WJ src-"ho lidays. jpg"
alt="Penguins getting frisky"/>
<р>Моm. dad and те on our yearly tr1p
to Antarctica.</p>
</diV>
В зависимости от тоrо, как вы опишете стиль, класс
. photo может добавить декоративную рамку, цветной
фон и т. д. сразу ко всему блоку, включающему и фотографию,
и ее описание. В части 3 книги описываются
еще более мощные способы nрименения <di v>, включая
вложенные конструкции из этих тегов.
С другой стороны, <span> nозволяет nрименять классы
и !О-селекторы к фрагменту- части тега. С его
nомощью вы можете выхватить из абзаца отдельные
слова и фразы (которые часто называются встроенными
(inline) элементами), чтобы форматировать их
отдельно друг от друга.
В данном примере стилевой класс, который назван
. companyName, стилизует встроенные элементы
Cosmofarmer com, D1 sney и ESPN:
<p>Welcome to <span clas~"companyName">
Cosmofarmer.com</span> the parent
company·of such well-known corporations
as <span class-"companyName">Disney
</span> and <span class•"companyName">
ESPN</span> .. . well. not really .
</р>
Использование ID-селекторов не представляет никаких сложностей. Если в селекторах
классов перед названием ставится точка ( . ),то тут вначале должен быть
указан символ решетки(#). Во всем остальном руководствуйтесЪ теми же правилами,
что и для классов (см. выше) .
Следующий пример устанавливает цвет фона, ширину и въ~соту элемента:
#Ьanner {
Ьackground: #ССОООО;
height: ЗООрх;
width : 720рх:
Применеине идентификаторов в HTML схоже с использованием классов, но
требует другого атрибута с соответствующим названием - i d. Для указания, что
последний абзац страницы - единственный с информацией об авторских правах,
вы можете создать ID-ст~лъ под названием #copyri ght и применитъ его к тегу этого
абзаца:
<р id="copyright">
ПРИМЕЧАНИЕ-----------------------------------------------СимЕЮл
решетки (#) используется только при описании стиля в таблице. При вставке же имени
идентификатора в НТМL-теги # укаэыватъ не нужно: <div ld="ьanner">.
70Глава 3. Селекторы: оnределение элементов сrилизации
. ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Сnециальное nрименение идентификаторов
У !О-селекторов имеется несколько преимуществ nеред
селекторами классов. Эти особенности фактически
не имеют никакого отношения к CSS, поэтому могут
вам и не nонадобиться.
8 JаvаSсriрt-nрограммировании !О-селекторы исnользуются
для определения местонахождения и уnравления
фрагментами веб-страниц. Сnециалисты часто
nрименяют идентификаторы к заnолняемым элементам
форм (например, текстовые поля) для nолучения
имени nосетителя сайта и т. д. Это nозволяет JavaScript
nолучить достуn к nолям форм, проверить их содержимое.
Идентификаторы также позволяют делать ссылки на
оnределенные части веб-страниц, nри этом быстро
nеремещаясь по ним. Если у вас есть алфавитнь1й ело-
Стилизация групп тегов
варь терминов, можно исnользовать !О-селектор для
создания указателя по буквам алфавита. При щелчке
кноnкой мыши на букве R nосетители сразу же nереходит
к словам, начинающимся с этой буквы. Для
этого вам не nридется исnользовать CSS- достаточ·
но и nростого HTML. Сначала добавьте атрибут 1d в то
место на странице, на которое вы хотите ссылаться.
Наnример, в указателе вы можете добавить тег <h2>
с очередной буквой из алфавита. Добавьте соответствующий
1d к каждому тегу <h2>: <h2 i d=' R >R</
h2>. Чтобы создать ссылку в HTML, добавьте символ
решетки и имя идентификатора в конец адреса URLindex
htm1#R. Эта ссылка указывает неnосредственно
на элементе #R страницы 1 ndex. htm 1 (исnользование
идентификатора таким способом оказывает действие,
аналогичное nрименению якорного тега <а> в языке
HTML: <а name•"R">R</a>).
Иногда необходимо быстро применить одинаковое форматирование сразу к нескольким
различным элементам веб-страницы. Например, нужно, чтобы все заголовки
имели один и тот же цвет и шрифт. Создание отдельного стиля для каждого
заголовка определенного уровня - слишком объемная работа. А если вы потом
захотите изменить цвет всех заголовков одновременно, то придется все обновлять.
Для решения этой задачи лучше использовать групповые селекторы, которые позволяют
при менить стиль, описав его лишь один раз, одновременно ко всем элементам.
Создание групповых селекторов
Для работы с группой селекторов создайте список, в котором один селектор отделен
от другого запятыми. Таким образом , получаем:
hl, h2. hЗ. h4. h5. hб { color : #F lCDЗЗ: }
Здесь приведены только селекторы типов, но можно использовать любые виды
(или их сочетание). Например, стиль с групповым селектором, который определяет
одинаковый цвет шрифта для <hl>, <р> и любых других, принадлежащих классу
. copyright, а также тегу с идентификатором #banner.
hl. р. . copyri ght . #banner { со 1 or: #FlCDЗЗ: }
Стилизация вложенных тегов 71
ПРИМЕЧАНИЕ-------------------------------------------------Если
вам нужно применить к нескольким элементам веб-страницы одинаковые и в то же время
несколько различные форматирующие свойства, то можете создать групповой селектор с общими
командами и отдельные стили с уникальным форматированием для каждого индивидуального элемента.
Другими словами, два (или больше) стиля могут форматировать один и тот же тег. Это
и является мощной особенностью языка CSS (информацию по этой теме см. в гл. 5).
Универсальный селектор
Групповые селекторы можно рассматривать как подручное средство для применения
одинаковых свойств различных элементов. CSS предоставляет универсмъный
селектор *для выборки всех тегов веб-страницы. Например, если вы хотите, чтобы
все отображалось полужирным шрифтом, нужно добавить следующий код:
а. р. img. hl. h2. hЗ. h4. h5 ...... { font-weight: bold: }
Использование символа * - более быстрый способ сообщить CSS о выборке
всех НТМL-тегов веб-страницы:
* { font-weight: bold: }
Кроме того, вы можете использовать универсальный селектор в составе селектора
потомков: применяете стиль ко всем тегам-потомкам, подчиненным определенному
элементу веб-страницы. Например, #banner * выбирает все теги внутри
элемента, имеющего идентификатор #banner (более подробно о селекторах потомков
вы узнаете чуть позже).
Универсальный селектор не определен как тип тегов, поэтому трудно описать
его воздействие на НТМL-теги сайта. По этой причине дизайнеры со стажем используют
для форматирования различных элементов такую особенность языка
CSS, как наследование. Она описана в следующей главе.
Стилизация вложенных тегов
Выбор типа селекторов обусловлен в каждом случае конкретной целью. Селекторы
типов можно быстро и просто создать, но они придают всем экземплярам стилизуемого
элемента одинаковый внешний вид. Это бывает необходимо, например,
если нужно, чтобы все заголовки второго уровня вашей вебсстраницы выглядели
одинаково. Классовые и !О-селекторы обеспечивают большую гибкость независимой
стилизации отдельно взятых элементов страницы. Однако создание нового
СSS-стиля всякий раз, когда требуется изменить шрифт лишь одного заголовка,
отнимает гораздо больше времени, требует большего обЪема работы и применения
кода CSS и HTML. Все, что нужно в этом случае, - объединить простоту использования
селекторов типов с точностью селекторов классов и идентификаторов.
В CSS можно определять наследуемые селекторы. Ими пользуются для того,
чтобы единообразно отформатировать целый набор тегов, но только когда они
расположены в определенном контексте- фрагменте веб-страницы. Их работу
72Глава 3. Селекторы: оnределение элементое стилизации
можно описать так: 4Нужно отформатировать все элементы А, находящиеся на
паиели управления. С остальными такими элементами ничего не нужно делать•.
Наследуемые селекторы позволяют форматировать теrи в зависимости от их
связей с другими тегами. Чтобы разобраться, как они работают, придется немного
покопаться в языке HTML.
Понимание работы наследуемых селекторов поможет получить представление
о функционировании других типов, работа которых описана далее.
ПРИМЕЧАНИЕ-----------------------------------------------Наследуемые
селекторы могут nокаэаться немного запутанными на первый взгляд, однако это одна
иэ наиболее важных техник для эффективного и точноrо nрименения CSS. запаситесь терnением,
и вы скоро освоите их.
Дерево HTML
Код HTML, на котором написана любая веб-страница, похож на генеалогическое
дерево. Первый используемый НТМL-тег - <html>- похож на главного прародителя
всех остальных. Из него выходят <head> и <body>, следовательно, <html> является
предком (прародителем) названных тегов.
Тег, расположенный ВНУ!J>И другого,- его потомок. Ter <title> в следующем
примере - потомок <head>:
<html>
<head>
<title>Пpocтoй докунент</titlе>
</head>
<body>
<hl>Зaroлoвoк</hl>
<р>Абзац с <strоng>важнын </strong>тeкcтoн.</p>
</body>
</html>
Представленный выше НТМL-код можно изобразить в виде схемы (рис. 3.3).
Здесь показаны отношения между тегами веб-страницы . Сначала идет <html>; от
неrо ответвляются два раздела, представленные <head> и <body>. Они содержат
и другие, которые, в свою очередь, могут включать еще теrи . Таким образом, рассматривая,
какие из них являются вложенными, можно схематически изобразить
любую веб-страницу.
Рис. 3.3. НТМL состоит и3 вложенных тегов, которые nредставляют собой
своего рода генеалогическое дерево
Стилизация вложенных тегов 73
СхеМ'Ы в форме дерева помогают выяснить и проследить, как CSS ~видит~ взаимодействие
элементов веб-страницы. Функционирование многих селекторов, описанных
в настоящей главе, включая наследуемые, основывается на их родственных
отношениях. Рассмотрим самые важные из них.
О Предок. Как описано в начале данного раздела, НТМL-элемент, который заключает
в себе другие элементы, - это предок. На рис. 3.3 это <htm l >, в то время
как <body>- предок для всех содержащихся в нем тегов: <hl>, <р>, <strong>.
О Потомок. Элемент, расположенный внутри одного или более типов, - потомок.
На рис. 3.3 <body> - потомок <htm l >, в то время как <р> - потомок одновремеюю
и для <body>, и для <html >.
О Родительский элемент. Он связан с другими элементами более низкого уровня
и находится выше на дереве. На рис. 3.3 <htm l > является родительским только
для <head> и <body>. Тег <р> - родительский по отношению к <strong>.
О Дочер101й элемент. Элемент, непосредственно подчиненный другому элементу
более высокого уровня, является дочерним. На рис. 3.3 оба тега- <hl> и <р>дочерние
по отношению к <body>, но <strong> не является дочерним для <body>,
так как он расположен непосредственно внутри <р>.
О Сестр101ский элемент. Элементы, являющиеся дочерними для одного и того же
родительского тега, называются сестринским.и или элементами одного уровня.
На рис. 3.3 они расположены рядом друг с другом. Теги <head> и <body>- элементы
одного уровня, как и <hl> и <р>.
На этом в CSS ~родственные отношения>> заканчиваются.
Со~аниесепекторовпотомков
Селекторы потомков позволяют использовать дерево HTML, форматируя теги
по-разному, в зависимости от того, где они расположены. Например, на веб-странице
имеется <h 1> и вы хотите выделить слово внутри этого заголовка с помощью
тега <strong>. Проблема в том, что большинство браузеров отобразит все это полужирным
шрифтом, поэтому всякий, кто просматривает веб-страницу, не сможет
увидеть разницы между выделенным словом и другими частями заголовка. Создание
селектора тега - не очень хорошее решение: так вы измените цвет всех
вхождений тега <strong> веб-страницы. Селектор же потомков позволит вам изменить
цвет тега только в том случае, если он расположен внутри заголовка первого
уровня.
Решение проблемы выглядит следующим образом:
hl strong { color: red: }
В данном случае любой текст тега <strong>, находящегося внутри тera.<hl>, будет
выделен красным цветом, но на другие экземпляры веб-страницы этот стиль не
повлияет. Вы могли добиться того же результата, создав класс стиля, например
. Stro"ngHeader. Но в таком случае понадобилось бы вносить изменения в HTML,
добавляя новый класс к тегу <strong> внутри заголовка. Подход, основанный на
наследуемых селекторах, позволяет обойтись без лишней работы при создании
стилей.
74Глава З. Селекторы: определение элемекrое сrмлизации
Селекторы nотомков стилизуют вложенные элементы веб-страницы, следуя
тем же правилам. которым подчиняются теги-предки и теги-потомки в дереве
HTML.
Вы со:щаете селектор nотомков, объединяя селекторы вместе (согласно ветви
дерева, которую нужно отформатировать), помещая самого старшего предка слева,
а форматируемый тег- справа. На рис. 3.4 обратите внимание на три ссылки
(<а>) - элементы маркированного списка, и еще одну, расположенную внутри аб:
iаца. Чтобы отформатировать их иначе, вы можете создать стиль с селектором
nотомков:
l i а { font-family: Aria1:}
вое BaSIC Web Pag~
