Книга css3 3е издание Серия Бестселлеры OReilly

Название	Книга css3 3е издание Серия Бестселлеры OReilly
Анкор	TheBigBookofCSS33rdedition.pdf
Дата	08.08.2018
Размер	20.28 Mb.
Формат файла
Имя файла	TheBigBookofCSS33rdedition.pdf
Тип	Книга #22630
страница	58 из 62

1 ... 54 55 56 57 58 59 60 61 62

, то вы могли бы легко пропустить тег
и просто добавить класс к неупорядоченному списку:
. Можно также заключить тег

в HTML5-тег

, и применить класс к это- му тегу.
Как только вы идентифицируете каждый тег

на странице, будет очень легко использовать селектор потомков, нацеленный на элементы внутри конкрет- ного тега

. Скажем, вы хотите создать уникальный вид для каждой ссылки в приведенном коде. Вы создаете селектор потомков следующим образом:
.storyNav a {
color: red;
background-color: #ccc;
}
Теперь ссылки будут выделены красным цветом на светло-сером фоне, но толь- ко когда они находятся внутри другого тега, к которому применяется класс storyNav
Если вы хотите добавить другую ссылку (например, на страницу page4.html
) к этому списку, вам не нужно обращаться к HTML-коду, чтобы отформатировать ее, как другие ссылки. Браузер все обрабатывает автоматически, когда применяет селектор потомков.
Форматирование других элементов внутри этого тега

— просто вопрос создания селектора потомков, начинающегося с имени класса (
.storyNav
), за кото- рым следует пробел и имя элемента, стиль которого вы хотите разработать. Чтобы отформатировать тег

, появляющийся внутри

, создайте селектор потом- ков
.storyNav h2
Идентифицируйте содержимое тега
Поскольку селекторы потомков обеспечивают такое специфическое определение стилей, вы можете легко создать стили, которые не только относятся к одной кон- кретной области страницы, но и применяются исключительно к определенным ти- пам страниц на вашем сайте. Скажем, вы хотите разработать тег

для домашней страницы не так, как для остальных страниц сайта. Простой способ разграничения тегов

для домашней страницы — добавить атрибуты class к ее тегу

:

Вы можете разработать стиль тега

домашней страницы, используя селектор потомков:
.home h1
. Таким же образом можно создавать различное форматирование для любого тега конкретной страницы вашего сайта (рис. 17.6). Один из подходов —

562
Часть 4. CSS для продвинутых идентифицировать раздел сайта, в котором находится каждая страница. Скажем, ваш сайт разделен на четыре раздела: новости, события, статьи и ссылки. На каждой стра- нице внутри раздела добавьте или class
, или id к тегу

. Так, каждая страница в разделе новостей могла бы содержать следующий HTML-код:

, в то время как для страниц раздела событий было бы задано

На рис. 17.6, когда для тега указан класс home
, выделяется кнопка
Home
(Домой) (ввер-
ху). Измените класс на about
, и выделится кнопка
About Us
(О нас) (внизу).
СОВЕТ
Вы также можете использовать класс, чтобы идентифицировать тип разметки, который хотите установить для определенной страницы (например, с одним, двумя или тремя столбцами).
Кроме всего прочего, идентификация раздела страницы применяется для вы- деления кнопки этого раздела на навигационной панели. Выделенные кнопки дей- ствуют наподобие индикаторов, показывающих, где находится пользователь, как продемонстрировано на рис. 17.6. Если страница находится в разделе новостей вашего сайта, вы можете выделить кнопку
News
(Новости), так что посетитель моментально сможет определить раздел, который сейчас просматривает.
Рассмотрим, как можно форматировать навигационную кнопку в зависимости от того, в каком разделе сайта она находится.
1. Добавьте идентификатор к тегу

, указывающий раздел, в котором нахо- дится страница. Например,

. Сделайте то же самое для каждого раздела, чтобы у страниц в разделе новостей был следующий код:

2. Добавьте навигационную панель на страницу. Пошаговые инструкции по со- зданию навигационной панели вы найдете в разделе «Создание панелей нави- гации» гл. 9.
3. Идентифицируйте каждую ссылку навигационной панели. Для ссылки на до-
Идентифицируйте каждую ссылку навигационной панели. Для ссылки на до- машнюю страницу у вас может быть такой код:
"homeLink">Home
. Атрибут class позволяет идентифицировать ссылку как указывающую на домашнюю страницу. Повторите это для других ссылок:
= "/news/" class = "newsLink">News и т. д.
На данный момент у вас достаточно информации в HTML-коде, чтобы уникаль- ным образом отформатировать ссылку каждого раздела, используя CSS. В этом примере известно, что ссылка на домашнюю страницу вложена в тег

с атрибутом class
, равным home
, только на домашней странице.
4. Создайте селектор потомков, который позволит отформатировать ссылку каж-
Создайте селектор потомков, который позволит отформатировать ссылку каж- дого раздела по-своему. Это форматирование применяется, когда ссылка нахо- дится внутри страницы для этого раздела. Для домашней страницы в этом при- мере селектор потомков должен быть примерно таким:
.home .homeLink
Селектор форматирует ссылку
.homeLink
, только когда она находится внутри другого тега с классом, равным
.home
. В большинстве случаев нужно, чтобы вы- деленная кнопка выглядела одинаково для каждого раздела сайта, так что луч- ше использовать групповой селектор (см. раздел «Стилизация групп тегов» гл. 3), чтобы собрать вместе все селекторы потомков для каждой кнопки раздела.

Глава 17. Совершенствуем навыки работы с CSS
563
Таким образом, вы применяете одно и то же форматирование к каждой кнопке, не создавая для нее отдельные правила. Групповой селектор для выделения кнопки текущего раздела светло-желтым фоном может быть таким:
.home .homeLink,
.news .newLink,
.articles .articlesLink,
.links .linksLink {
background-color: #FBEF99;
}
Рис. 17.6. Используя селекторы потомков, можно выделить кнопку на навигационной панели, просто изменив атрибут class тега
СОВЕТ
При создании группового селектора, который включает в себя несколько селекторов потомков, указывайте каждый селектор на отдельной строке, как в этом примере. Так будет легче распознать селекторы в группе, когда придется вновь редактировать таблицу стилей.

564
Часть 4. CSS для продвинутых
Используя ту же методику, создайте дополнительные стили, определяющие раз- личные внешние виды для всех состояний ссылок: при наведении указателя мыши, щелчке кнопкой мыши и пр. (см. раздел «Выборка стилизуемых ссылок» гл. 9).
Приведенные примеры — лишь некоторые способы использования селекторов потомков. Эти селекторы могут сделать ваши таблицы стилей немного более слож- ными. У вас будут такие стили, как
.home
,
.navbar
, например, вместо простого класса
.navLink
. Настроив стили, в дальнейшем вы будете выполнять лишь небольшое фор- матирование. HTML-код, который вставляется в различные области страницы, ав- томатически форматируется совершенно по-разному. Почти как по волшебству.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Объектно-ориентированный код CSS
Объектноориентированный код CSS представляет еще один подход к организации и использованию CSS. Этот термин был придуман экспертом CSS Николь Салливан, а подход был разработан в ответ на сложность очень больших сайтов с широким разнообразием HTML
структур. На больших сайтах может быть очень раз
ный HTML, содержащий сходные типы информации.
Например, в одном месте может использоваться маркированный список для отображения имени, ин
формации и фотографии для перечня контактов. А на другой странице может применяться тег

для каждого контакта. Предположим, что нужно от
форматировать эти элементы одинаково, поскольку у них действительно одинаковый тип информации.
При использовании CSSстилей, зависящих от этого
HTML, можно столкнуться либо с дублированием сти
лей, либо с такими групповыми селекторами:
article img, li img {
/* сюда помещается форматирование */
}
Объектноориентированный код CSS рекомендует отказаться от привязки кода CSS к реальным HTML
элементам и использовать вместо них классы. То есть вы по всему коду HTML применяете классы, а затем задействуете для форматирования CSSстили классов.
При этом неважно, какие HTMLтеги используются.
Если они применяют одни и те же классы, у них будет одинаковый внешний вид.
Возможно, это похоже на ранее упоминавшуюся про
блему «тяги к классификации», и по смыслу это так и есть. Объектноориентированный код CSS требует добавления большого количества атрибутов class к вашему HTML. Если используется такая система управления контентом, как WordPress, то объем работы может быть не столь существенным — имена классов можно добавлять к файлам шаблонов. Но если каждая страница создается вручную, такой подход может до
бавить большой объем работы.
Краткое введение в объектноориентированный код CSS находится по адресу http://coding.sma shingmagazine.
com/2011/12/12/an-introductionto-object-oriented- css-oocss/
. А проект OOCSS можно найти по адресу https://github.com/stubbornella/oocss
Еще один подобный подход от Джонатана Снука
(Jonathon Snook), который называется масштаби
руемой и модуль ной архитектурой для CSS — Scalable and Modular Architecture for CSS (или SMACSS), явля
ется простым руководством для создания повторно используемых CSSкомпонентов. Дополнительные сведения об этом подходе можно получить по адресу http://smacss.com. А по адресу http://tv.adobe.
com/watch/adc-presents/smacss-introduction-to- a-scalable-andmodular-architecture-for-css/
можно также найти множество видеоподборок с дискуссия
ми, касающимися SMACSS.
Различный код CSS для Internet Explorer
Браузеры не всегда ведут себя предсказуемо. Такие браузеры, как Safari, Firefox и Internet Explorer 10, достаточно хорошо обрабатывают CSS-код и последователь-

Глава 17. Совершенствуем навыки работы с CSS
565
но и предсказуемо отображают основанные на CSS веб-страницы. Однако сделать так, чтобы ваш дизайн работал в Internet Explorer 7, 8 и даже 9, куда сложнее. Хоть эти браузеры по современным стандартам уже устарели, они все еще достаточно популярны.
Нередко создаются стили, предназначенные для устранения недостатков кон- кретных версий Internet Explorer. Ранее рассмотренное свойство zoom
, например, решает проблемы, присущие Internet Explorer 7 и более ранним версиям. Internet
Explorer 8 и более ранние версии не в состоянии правильно отформатировать
HTML5-теги. Одно из решений заключается в отправке определенного содержи- мого, такого как таблицы стилей, JavaScript и даже HTML, только для Internet
Explorer. Фактически можно нацелиться на отдельные версии Internet Explorer для отправки разного кода для каждой из них.
Можно собирать стили только для Internet Explorer в отдельном месте — ис- пользовать возможности условных комментариев (рис. 17.7). Это изобретение
Microsoft предоставляет способ вставки HTML-кода только для Internet Explorer.
Другие браузеры принимают этот код за комментарий и игнорируют его.
Условные комментарии могут даже предназначаться для различных версий браузера. Вы можете поместить все стили только для Internet Explorer 7 в отдель- ной внешней таблице стилей (такой как
Internet Explorer7_styles.css
) и использо- вать условные комментарии, чтобы связывать ее только с этим браузером. Приме- няя данный подход, вы легко сможете удалить данные стили, когда Internet Explorer 7 наконец повторит судьбу динозавров. Нужно будет просто удалить внешнюю таб- лицу стилей.
Рис. 17.7. Условные комментарии позволяют сделать так, чтобы отдельный HTML-код появлялся только в определенной версии Internet Explorer (слева). Другие браузеры просто проигнорируют код внутри комментариев (справа)
Ваши посетители, работающие в других браузерах, также находятся в выгодном положении. Когда вы используете условные комментарии, другие браузеры и во все не загружают эти внешние таблицы стилей. В результате сайт открывается и вы- полняется быстрее.

566
Часть 4. CSS для продвинутых
Вот основная структура условных комментариев:
Или, используя правило
@import
:
Этот код нацелен конкретно на Internet Explorer 7 и не будет применяться к лю- бой другой более ранней версии. Но иногда нужно включить и другие версии. На- пример, можно создать таблицу стилей, применяемую к Internet Explorer 6, 7 и 8.
В таком случае можно воспользоваться ключевым словом lte
, которое означает
«less than or equal — меньше чем или равно», следовательно, lte IE 8
означает «если это Internet Explorer 8 или более ранняя версия»:
Условные комментарии нужно добавлять после любых ссылок на таблицы сти- лей. Большинство приемов Internet Explorer стремятся переопределить стили, уже представленные в таблице стилей, — стили, которые работают для других браузе- ров. Из-за каскадности правила, определенные на странице позже, могут отменять ранее заданные стили. Чтобы убедиться в том, что ваши переопределенные, специ- фические для Internet Explorer стили успешно приняты этим браузером, добавляй- те их после любой другой таблицы стилей, присоединенной к странице.

Глава 17. Совершенствуем навыки работы с CSS
567
Рассмотрим код, который вы могли бы использовать, чтобы связать таблицу стилей для всех браузеров, таблицу стилей только для Internet Explorer 8 и табли- цу стилей для Internet Explorer версий 7 и ниже.

ПРИМЕЧАНИЕ
Для получения большей информации об условных комментариях Internet Explorer зайдите на сайт http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.

Приложения
Приложение 1.
Справочник свойств CSS
Приложение 2.
Информационные ресурсы, касающиеся CSS

1
Справочник
свойств CSS
Владение на профессиональном уровне каскадными таблицами стилей (CSS) озна- чает знание того, как использовать огромное количество свойств CSS, которые управляют внешним видом текста, изображений, таблиц и форм. Чтобы помочь вам в ваших поисках, я собрал в этом приложении свойства и их значения, которые вы будете использовать для создания собственных стилей. Этот список охватывает практически все стандартные свойства CSS 2.1 — те, которые поддерживает боль- шинство браузеров, а также ряд наиболее полезных и поддерживаемых браузерами свойств CSS3.
ПРИМЕЧАНИЕ
Самая последняя CSS-спецификация имеет довольно большой объем. Фактически, чтобы лучше справиться с разрастанием CSS, консорциум W3C разбил CSS на множество модулей — каждый модуль описывает конкретное свойство или набор родственных свойств. Чтобы получить полную информацию из первых рук, просмотрите самые последние спецификации CSS от World Wide Web
Consortium по адресу www.w3.org/Style/CSS/current-work.
Значения CSS
У каждого свойства CSS есть соответствующее ему значение. Свойство color
, ко- торое форматирует цвет шрифта, требует установки значения, чтобы определить, какой цвет вы хотите использовать. Свойство color: #FFF;
задает белый текст. Раз- ные свойства требуют указания различных значений, каждое из которых относит- ся к одной из четырех основных категорий: цвета, размеры, ключевые слова и ад- реса URL.
Цвета
Вы можете назначать цвета многим свойствам, включая свойства для шрифта, фона и границ. CSS предоставляет несколько различных способов определения цвета.
Ключевые слова. Ключевое слово, обозначающее цвет, — это просто название цвета, например white или black
(белый или черный). В настоящее время суще- ствует 17 признанных ключевых слов, обозначающих цвета: aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, orange
, purple
, red
, silver
, teal
, white и yellow
. Не- которые браузеры принимают больше ключевых слов, а CSS3 обещает предложить их еще больше в будущем (
http://www.w3.org/TR/css3-color/
). Например, рассмотрен- ная в гл. 6 цветовая схема RGBA.

570
Приложения
Значения RGB. Мониторы компьютеров определяют оттенки, используя крас- ный, зеленый и синий цвета. Эти RGB-значения могут создать почти весь спектр цветов. Практически каждый дизайн, рисунок и графическая программа позволя- ют вам определить цвета, применяя RGB, так что можно легко передавать цвет из одной из этих программ CSS-свойству. CSS представляет значения RGB несколь- кими способами.

Hex-значения. Это метод, обычно используемый в Сети для идентификации цвета. Hex-значения цветов состоят из трех двухсимвольных чисел в шестнад- цатеричной (то есть с основанием 16) системе счисления.
#FF0033
представляет
RGB-значение, составленное из красного (
FF
, что равняется 255 в десятичной системе счисления), зеленого (
00
) и синего (
33
). Символ
#
указывает CSS, что впереди следует ожидать шестнадцатеричное число, и является обязательным.
Если вы пропустите
#
, браузер не отобразит нужный цвет.
СОВЕТ
Если во всех трех значениях цифры повторяются, можно сократить Hex-значение, используя толь- ко первое число каждой пары. Например, #361 означает то же самое, что и #336611.

Проценты RGB. Вы также можете определить цвет, используя значения в про- центах, например: rgb (100%, 0%, 33%)
. Вы можете получить эти числа из про- грамм редактирования изображений и дизайна, которые могут определять цве- та, используя проценты.

Целочисленные значения. И наконец, для задания RGB-цвета можно использо- вать целочисленные значения. Формат такой же, как и для процентных значений, но для указания каждого цвета применяется число от 0 до 255: rgb (255, 0, 33)

RGBA. RGBA добавляет к смешанным цветам прозрачность. То есть можно сделать цвет, через который просматриваются расположенные ниже фоновые цвета, изображения или текст. Последним к цвету RGB добавляется значение от 0 (полная невидимость) до 1 (полная непрозрачность). Для задания цветовых составляющих можно использовать либо процентные, либо десятичные значе- ния, а для прозрачности можно применять только десятичные значения. На- пример, оба следующих объявления создают светло-серый цвет, с 50-процент- ной прозрачностью:
rgba(50%,50%,50%,.5)
rgba(122,122,122,.5)

1 ... 54 55 56 57 58 59 60 61 62