Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
.special сообщает браузеру о необходимости применения стиля к единственному тегу . Создав его однажды, вы можете пользоваться им и в дальнейшем применительно к любым тегам. В при- мере (см. рис. 3.3) такой стиль применен к верхнему абзацу.Вы, вероятно, обратили внимание на точку, с которой начинается каждое назва- ние селектора класса: .copyright , .special . Это одно из нескольких правил, которые необходимо иметь в виду, именуя классы. Все названия селекторов классов должны начинаться с точки. С ее помощью браузеры находят селекторы классов в таблице стилей CSS. При именовании стилевых классов разрешается использование только букв алфавита, чисел, дефисов, знаков подчеркивания. |
72
Часть 1. Основы CSS
Название после точки всегда должно начинаться с символа — буквы алфавита.
Например,
.9lives
— неправильное имя класса, а
.crazy8
— правильное. Можно называть классы, например, именами
.copy-right и
.banner_image
, но не
.-bad или
_as_bad
Имена стилевых классов чувствительны к регистру. Например,
.SIDEBAR
и
.sidebar рассматриваются языком CSS по-разному, как различные классы.
Рис. 3.3. Селекторы классов позволяют целенаправленно изменять дизайн фрагментов веб-страниц
Классы описываются так же, как стили тегов. После названия идет блок объяв- ления, содержащий все необходимые свойства:
Глава 3. Селекторы: определение элементов стилизации
73
.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 с особым шрифтом и цветом для тегов
, и
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
HTML-теги и
В гл. 1 были кратко описаны
и
— два универсальных HTMLтега, которые однозначно указы
вают на применение класса или стиля с IDселектором.
Логическое деление страницы на такие фрагменты, как шапка, панель навигации, боковые панели, низ страницы, обеспечивает тег
. Вы можете его также использовать, чтобы охватить любой фрагмент, включающий ряд последовательных элементов веб
страницы, в том числе заголовки, маркированные списки, абзацы (программисты называют эти элемен
ты блочными, потому что они формируют логически законченный блок информационного содержимого с разрывами строк до и после такого блока). Тег
функционирует как тег абзаца: набираем открыва
ющий
, далее добавляем некоторый текст, ри
сунок или какоето другое информационное содержи
мое, а затем заканчиваем их закрывающим
74
Часть 1. Основы CSS
Тег
имеет уникальную способность включать в себя несколько блочных элементов, являясь сред
ством группировки (логотип и панель навигации или блок новостей, формирующий боковой столбец).
После группировки содержимого вебстраницы таким образом вы можете применить определенное фор
матирование исключительно к тегам, находящимся внутри этого фрагмента
, или переместить (по
зиционировать) весь отмеченный фрагмент содержи
мого в конкретное место вебстраницы, например в правый столбец. Об управлении разделами в CSS этим способом рассказывается в части 3.
Например, вы добавили на вебстраницу фотографию, у которой есть сопроводительное описание. Можно использовать
(с применением к тегу класса), чтобы объединить в группу оба элемента:
alt="Penguins getting frisky"/>
Mom, dad and me on our yearly trip to Antarctica.
В зависимости от того, как вы опишете стиль, класс
.photo может добавить декоративную рамку, цвет
ной фон и т. д. сразу ко всему блоку, включающему и фотографию, и ее описание. В части 3 книги описыва
ются еще более мощные способы применения
, включая вложенные конструкции из этих тегов.
С другой стороны,
позволяет применять классы и IDселекторы к фрагменту — части тега. С его помощью вы можете выхватить из абзаца отдельные слова и фразы
(которые часто называются линейными (inline) элемента
ми), чтобы форматировать их отдельно друг от друга.
В данном примере стилевой класс, названный
.compa- nyName
, стилизует линейные элементы
CosmoFar- mer.com
,
Disney и
ESPN
:
Welcome to
CosmoFarmer.com
, the parent company of such well-known corporations as
Disney
and
ESPN
...well, not really.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
ID-селекторы: определение элементов
веб-страниц
В языке CSS ID-селектор предназначен для идентификации уникальных частей веб- страниц, таких как шапка, панель навигации, основная информационная область содержимого и т. д. Как и при использовании селектора класса, вы создаете иденти- фикатор (ID), придумав ему название, а затем применяете его к HTML-коду своей веб-страницы. Так в чем же различие? Как описано во врезке «Информация для опытных пользователей. Специальное применение идентификаторов», ID-селекто- ры имеют дополнительное специфическое применение. Например, в веб-страницах с использованием кода JavaScript или в очень объемных страницах. Другими слова- ми, существует несколько вынужденных причин для применения ID-селекторов.
ПРИМЕЧАНИЕ
В сообществе веб-разработчиков есть тенденция к отказу от ID-селекторов в CSS. Причины этого явления требуют более глубокого знания CSS, чем то, которое может быть получено при изучении этой книги на данный момент, поэтому здесь ID-селекторы не будут слишком часто встречаться, а все подробности того, почему применение ID-селекторов нельзя признать удачным решением, будут изложены позже.
Глава 3. Селекторы: определение элементов стилизации
75
Хотя многие веб-разработчики уже не пользуются ID-селекторами так же час- то, как раньше, все же следует знать, что они собой представляют и как работают.
Применение ID-селекторов не представляет никаких сложностей. Если в селекто- рах классов перед названием ставится точка (
), то тут вначале должен быть указан символ решетки (
#
). Во всем остальном руководствуйтесь теми же правилами, что и для классов (см. выше).
Следующий пример устанавливает цвет фона, ширину и высоту элемента:
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}
Применение идентификаторов в HTML схоже с использованием классов, но требует другого атрибута с соответствующим названием — id
. Например, для при- менения показанного выше стиля к тегу
нужно написать следующий код
HTML:
Точно так же для указания, что последний абзац страницы — единственный с информацией об авторских правах, вы можете создать ID-стиль под названием
#copyright и применить его к тегу этого абзаца:
ПРИМЕЧАНИЕ
Символ решетки (#) используется только при описании стиля в таблице. При вставке же имени идентификатора в HTML-теги # указывать не нужно: .
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Специальное применение идентификаторов
У IDселекторов имеется несколько преимуществ пе
ред селекторами классов. Эти особенности фактически не имеют никакого отношения к CSS, поэтому могут вам и не понадобиться. Но если вам это интересно, рассмотрим некоторые особенности.
• Одним из простых способов для JavaScriptпрограм
мистов, позволяющих определить место и манипу
лировать частями страницы, является применение ID к элементу страницы с последующим использованием
JavaScript для ссылки на этот ID. Специалисты часто применяют идентификаторы к заполняемым элемен
там форм (например, к текстовым полям) для полу
чения имени посетителя сайта и т. д. Это позволяет
JavaScript получить доступ к полям форм и совершать с ними разные манипуляции, например, когда посе
титель щелкает кнопкой мыши на кнопке отправки формы, убеждаться в том, что поля заполнены.
• Идентификаторы также позволяют делать ссылки на определенные части вебстраниц, при этом быстро перемещаясь по ним. Если у вас есть алфавитный словарь терминов, можно использовать IDселек
тор для создания указателя по буквам алфавита.
При щелчке кнопкой мыши на букве R посетители сразу же переходят к словам, начинающимся с этой буквы. Для этого вам не придется использовать
CSS — достаточно и простого HTML. Сначала до
бавьте атрибут id в то место на странице, на кото
рое вы хотите ссылаться. Например, в указателе вы
76
Часть 1. Основы CSS
можете добавить тег
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
HTML-теги
и
В гл. 1 были кратко описаны
и
— два универсальных HTMLтега, которые однозначно указы
вают на применение класса или стиля с IDселектором.
Логическое деление страницы на такие фрагменты, как шапка, панель навигации, боковые панели, низ страницы, обеспечивает тег
. Вы можете его также использовать, чтобы охватить любой фрагмент, включающий ряд последовательных элементов веб
страницы, в том числе заголовки, маркированные списки, абзацы (программисты называют эти элемен
ты блочными, потому что они формируют логически законченный блок информационного содержимого с разрывами строк до и после такого блока). Тег
функционирует как тег абзаца: набираем открыва
ющий
, далее добавляем некоторый текст, ри
сунок или какоето другое информационное содержи
мое, а затем заканчиваем их закрывающим
74
Часть 1. Основы CSS
Тег
имеет уникальную способность включать в себя несколько блочных элементов, являясь сред
ством группировки (логотип и панель навигации или блок новостей, формирующий боковой столбец).
После группировки содержимого вебстраницы таким образом вы можете применить определенное фор
матирование исключительно к тегам, находящимся внутри этого фрагмента
, или переместить (по
зиционировать) весь отмеченный фрагмент содержи
мого в конкретное место вебстраницы, например в правый столбец. Об управлении разделами в CSS этим способом рассказывается в части 3.
Например, вы добавили на вебстраницу фотографию, у которой есть сопроводительное описание. Можно использовать
(с применением к тегу класса), чтобы объединить в группу оба элемента:
alt="Penguins getting frisky"/>
Mom, dad and me on our yearly trip to Antarctica.
В зависимости от того, как вы опишете стиль, класс
.photo может добавить декоративную рамку, цвет
ной фон и т. д. сразу ко всему блоку, включающему и фотографию, и ее описание. В части 3 книги описыва
ются еще более мощные способы применения
, включая вложенные конструкции из этих тегов.
С другой стороны,
позволяет применять классы и IDселекторы к фрагменту — части тега. С его помощью вы можете выхватить из абзаца отдельные слова и фразы
(которые часто называются линейными (inline) элемента
ми), чтобы форматировать их отдельно друг от друга.
В данном примере стилевой класс, названный
.compa- nyName
, стилизует линейные элементы
CosmoFar- mer.com
,
Disney и
ESPN
:
Welcome to
CosmoFarmer.com
, the parent company of such well-known corporations as
Disney
and
ESPN
...well, not really.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
ID-селекторы: определение элементов
веб-страниц
В языке CSS ID-селектор предназначен для идентификации уникальных частей веб- страниц, таких как шапка, панель навигации, основная информационная область содержимого и т. д. Как и при использовании селектора класса, вы создаете иденти- фикатор (ID), придумав ему название, а затем применяете его к HTML-коду своей веб-страницы. Так в чем же различие? Как описано во врезке «Информация для опытных пользователей. Специальное применение идентификаторов», ID-селекто- ры имеют дополнительное специфическое применение. Например, в веб-страницах с использованием кода JavaScript или в очень объемных страницах. Другими слова- ми, существует несколько вынужденных причин для применения ID-селекторов.
ПРИМЕЧАНИЕ
В сообществе веб-разработчиков есть тенденция к отказу от ID-селекторов в CSS. Причины этого явления требуют более глубокого знания CSS, чем то, которое может быть получено при изучении этой книги на данный момент, поэтому здесь ID-селекторы не будут слишком часто встречаться, а все подробности того, почему применение ID-селекторов нельзя признать удачным решением, будут изложены позже.
Глава 3. Селекторы: определение элементов стилизации
75
Хотя многие веб-разработчики уже не пользуются ID-селекторами так же час- то, как раньше, все же следует знать, что они собой представляют и как работают.
Применение ID-селекторов не представляет никаких сложностей. Если в селекто- рах классов перед названием ставится точка (
), то тут вначале должен быть указан символ решетки (
#
). Во всем остальном руководствуйтесь теми же правилами, что и для классов (см. выше).
Следующий пример устанавливает цвет фона, ширину и высоту элемента:
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}
Применение идентификаторов в HTML схоже с использованием классов, но требует другого атрибута с соответствующим названием — id
. Например, для при- менения показанного выше стиля к тегу
нужно написать следующий код
HTML:
Точно так же для указания, что последний абзац страницы — единственный с информацией об авторских правах, вы можете создать ID-стиль под названием
#copyright и применить его к тегу этого абзаца:
ПРИМЕЧАНИЕ
Символ решетки (#) используется только при описании стиля в таблице. При вставке же имени идентификатора в HTML-теги # указывать не нужно:
76
Часть 1. Основы CSS
можете добавить тег
В гл. 1 были кратко описаны
и
— два универсальных HTMLтега, которые однозначно указы
вают на применение класса или стиля с IDселектором.
Логическое деление страницы на такие фрагменты, как шапка, панель навигации, боковые панели, низ страницы, обеспечивает тег
. Вы можете его также использовать, чтобы охватить любой фрагмент, включающий ряд последовательных элементов веб
страницы, в том числе заголовки, маркированные списки, абзацы (программисты называют эти элемен
ты блочными, потому что они формируют логически законченный блок информационного содержимого с разрывами строк до и после такого блока). Тег
функционирует как тег абзаца: набираем открыва
ющий
, далее добавляем некоторый текст, ри
сунок или какоето другое информационное содержи
мое, а затем заканчиваем их закрывающим
74
Часть 1. Основы CSS
Тег
имеет уникальную способность включать в себя несколько блочных элементов, являясь сред
ством группировки (логотип и панель навигации или блок новостей, формирующий боковой столбец).
После группировки содержимого вебстраницы таким образом вы можете применить определенное фор
матирование исключительно к тегам, находящимся внутри этого фрагмента
, или переместить (по
зиционировать) весь отмеченный фрагмент содержи
мого в конкретное место вебстраницы, например в правый столбец. Об управлении разделами в CSS этим способом рассказывается в части 3.
Например, вы добавили на вебстраницу фотографию, у которой есть сопроводительное описание. Можно использовать
(с применением к тегу класса), чтобы объединить в группу оба элемента:
alt="Penguins getting frisky"/>
Mom, dad and me on our yearly trip to Antarctica.
В зависимости от того, как вы опишете стиль, класс
.photo может добавить декоративную рамку, цвет
ной фон и т. д. сразу ко всему блоку, включающему и фотографию, и ее описание. В части 3 книги описыва
ются еще более мощные способы применения
, включая вложенные конструкции из этих тегов.
С другой стороны,
позволяет применять классы и IDселекторы к фрагменту — части тега. С его помощью вы можете выхватить из абзаца отдельные слова и фразы
(которые часто называются линейными (inline) элемента
ми), чтобы форматировать их отдельно друг от друга.
В данном примере стилевой класс, названный
.compa- nyName
, стилизует линейные элементы
CosmoFar- mer.com
,
Disney и
ESPN
:
Welcome to
CosmoFarmer.com
, the parent company of such well-known corporations as
Disney
and
ESPN
...well, not really.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
ID-селекторы: определение элементов
веб-страниц
В языке CSS ID-селектор предназначен для идентификации уникальных частей веб- страниц, таких как шапка, панель навигации, основная информационная область содержимого и т. д. Как и при использовании селектора класса, вы создаете иденти- фикатор (ID), придумав ему название, а затем применяете его к HTML-коду своей веб-страницы. Так в чем же различие? Как описано во врезке «Информация для опытных пользователей. Специальное применение идентификаторов», ID-селекто- ры имеют дополнительное специфическое применение. Например, в веб-страницах с использованием кода JavaScript или в очень объемных страницах. Другими слова- ми, существует несколько вынужденных причин для применения ID-селекторов.
ПРИМЕЧАНИЕ
В сообществе веб-разработчиков есть тенденция к отказу от ID-селекторов в CSS. Причины этого явления требуют более глубокого знания CSS, чем то, которое может быть получено при изучении этой книги на данный момент, поэтому здесь ID-селекторы не будут слишком часто встречаться, а все подробности того, почему применение ID-селекторов нельзя признать удачным решением, будут изложены позже.
Глава 3. Селекторы: определение элементов стилизации
75
Хотя многие веб-разработчики уже не пользуются ID-селекторами так же час- то, как раньше, все же следует знать, что они собой представляют и как работают.
Применение ID-селекторов не представляет никаких сложностей. Если в селекто- рах классов перед названием ставится точка (
), то тут вначале должен быть указан символ решетки (
#
). Во всем остальном руководствуйтесь теми же правилами, что и для классов (см. выше).
Следующий пример устанавливает цвет фона, ширину и высоту элемента:
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}
Применение идентификаторов в HTML схоже с использованием классов, но требует другого атрибута с соответствующим названием — id
. Например, для при- менения показанного выше стиля к тегу
нужно написать следующий код
HTML:
Точно так же для указания, что последний абзац страницы — единственный с информацией об авторских правах, вы можете создать ID-стиль под названием
#copyright и применить его к тегу этого абзаца:
ПРИМЕЧАНИЕ
Символ решетки (#) используется только при описании стиля в таблице. При вставке же имени идентификатора в HTML-теги # указывать не нужно:
.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Специальное применение идентификаторов
У IDселекторов имеется несколько преимуществ пе
ред селекторами классов. Эти особенности фактически не имеют никакого отношения к CSS, поэтому могут вам и не понадобиться. Но если вам это интересно, рассмотрим некоторые особенности.
• Одним из простых способов для JavaScriptпрограм
мистов, позволяющих определить место и манипу
лировать частями страницы, является применение ID к элементу страницы с последующим использованием
JavaScript для ссылки на этот ID. Специалисты часто применяют идентификаторы к заполняемым элемен
там форм (например, к текстовым полям) для полу
чения имени посетителя сайта и т. д. Это позволяет
JavaScript получить доступ к полям форм и совершать с ними разные манипуляции, например, когда посе
титель щелкает кнопкой мыши на кнопке отправки формы, убеждаться в том, что поля заполнены.
• Идентификаторы также позволяют делать ссылки на определенные части вебстраниц, при этом быстро перемещаясь по ним. Если у вас есть алфавитный словарь терминов, можно использовать IDселек
тор для создания указателя по буквам алфавита.
При щелчке кнопкой мыши на букве R посетители сразу же переходят к словам, начинающимся с этой буквы. Для этого вам не придется использовать
CSS — достаточно и простого HTML. Сначала до
бавьте атрибут id в то место на странице, на кото
рое вы хотите ссылаться. Например, в указателе вы
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Специальное применение идентификаторов
У IDселекторов имеется несколько преимуществ пе
ред селекторами классов. Эти особенности фактически не имеют никакого отношения к CSS, поэтому могут вам и не понадобиться. Но если вам это интересно, рассмотрим некоторые особенности.
• Одним из простых способов для JavaScriptпрограм
мистов, позволяющих определить место и манипу
лировать частями страницы, является применение ID к элементу страницы с последующим использованием
JavaScript для ссылки на этот ID. Специалисты часто применяют идентификаторы к заполняемым элемен
там форм (например, к текстовым полям) для полу
чения имени посетителя сайта и т. д. Это позволяет
JavaScript получить доступ к полям форм и совершать с ними разные манипуляции, например, когда посе
титель щелкает кнопкой мыши на кнопке отправки формы, убеждаться в том, что поля заполнены.
• Идентификаторы также позволяют делать ссылки на определенные части вебстраниц, при этом быстро перемещаясь по ним. Если у вас есть алфавитный словарь терминов, можно использовать IDселек
тор для создания указателя по буквам алфавита.
При щелчке кнопкой мыши на букве R посетители сразу же переходят к словам, начинающимся с этой буквы. Для этого вам не придется использовать
CSS — достаточно и простого HTML. Сначала до
бавьте атрибут id в то место на странице, на кото
рое вы хотите ссылаться. Например, в указателе вы
76
Часть 1. Основы CSS
можете добавить тег