ниже на странице имеют одинаковое начертание и цвет шрифта, а также зеленую рамку вверху
(рис. 3.11).
Создание селекторов классов
Селекторы типов выполняют свои функции быстро и эффективно, но они, можно сказать, совсем неразборчивы в деталях. Что же делать, если вы хотите отформа- тировать один тег веб-страницы иным способом, чем все остальные такие теги?
Решение проблемы — использование классов.
1. Вернитесь к HTML-редактору с файлом selector_basics.html
. Добавьте вслед за последним созданным стилем еще один.
Глава 3. Селекторы: определение элементов стилизации
99
Рис. 3.11. Простой селектор типа может коренным образом преобразовать внешний вид всех вхождений форматируемого тега, быстро выполнив стилизацию текста веб-страницы
2. Щелкните кнопкой мыши после закрывающей фигурной скобки группового селектора h1
, h2
, h3
, нажмите клавишу
Enter и введите следующее:
.note {
}
Стиль назван note
(примечание) не случайно. Он соответствует своим функци- ям: выделяет абзацы, содержащие дополнительные примечания для посетите- лей вашего сайта. Создав класс один раз, вы можете применить его ко всем примечаниям веб-страницы (сайта), в данном примере — ко второму абзацу.
100 Часть 1. Основы CSS
3. Щелкните на пустой строке между открывающей
{
и закрывающей
}
фигурны- ми скобками и добавьте к стилю следующий перечень свойств:
color: #333;
border: 2px dashed #BD8110;
background-color: #FBF8A9;
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;
Большинство из этих свойств уже должны быть вам знакомы, однако background- color будет, скорее всего, новым. Как и
вытекает из его названия, оно добавляет цвет к фону элемента. Весь стиль должен иметь следующий вид:
.note {
color: #333;
border: 2px dashed #BD8110;
background-color: #FBF8A9;
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;
}
Когда вы просмотрите эту веб-страницу, то не увидите изменений. В отличие от селекторов типов, селекторы классов не возымеют никакого эффекта на веб- странице, пока стиль не будет применен к коду HTML.
4. В HTML-коде веб-страницы найдите вхождение
, текст которого начинается со слова
Note:
и находится внутри тега
. Чтобы применить стилевой класс к этому тегу, просто добавьте атрибут class
, за которым должно следовать название, в данном случае
.note
5. Щелкните кнопкой мыши сразу за буквой p тега
, нажмите
Пробел
, а дальше введите
. HTML-код теперь должен иметь такой вид (только что набранный код отмечен полужирным шрифтом):
>NOTE: Ut enim ad
Убедитесь, что не ввели атрибут так:
. Точка требуется только во время определения названия стилевого класса в таблице стилей, в HTML она не нужна. Повторите этот шаг для второго абзаца (он идет сразу над тегом
с текстом Not Me!).
ПРИМЕЧАНИЕ
Несмотря на название, которое мы дали классу, его можно применить к любым другим тегам, а не только к
. Если данное форматирование относится, например, к , то HTML-код должен выглядеть следующим образом: .
6. Сохраните файл и просмотрите веб-страницу в браузере. Абзац с примечанием красиво подсвечен на странице (рис. 3.12).
Глава 3. Селекторы: определение элементов стилизации
101Рис. 3.12. С помощью селекторов классов вы можете выполнить точное, детальное форматирование элементов веб-страницы
ПРИМЕЧАНИЕ
Если ваша веб-страница не похожа на изображенную на рис. 3.12, возможно, вы набрали какое-то свойство или его значение с ошибкой. Проверьте код по шагам. Кроме того, удостоверьтесь в том, чтобы каждая пара «свойство/значение» была завершена точкой с запятой и в самом конце оп ре- деления стиля присутствовала закрывающая фигурная скобка. Если ваш стиль не работает должным образом, то, скорее всего, в нем не хватает именно этих символов. Это самая частая ошибка.
Создание селекторов потомковНа странице selectors_basics.html вы применили класс note к двум абзацам. Каж- дый из них начинается словом
Note:
, выделенным полужирным шрифтом (на са- мом деле это слово находится внутри тега
). Но что делать, если вы хотите отформатировать эти слова еще и ярко-оранжевым цветом? Вы могли бы создать стиль для тега
, но он затронет все теги
на странице, в то время как вы хотите изменить только те, которые находятся внутри этих записей. Одним из решений было бы создание класса, например,
.noteText и применение его к каждо- му из тегов
внутри записей. Но вы наверняка забудете применить класс, если у вас много таких страниц с записями.
102
Часть 1. Основы CSS
Лучший способ решить эту проблему — создать селектор потомков, который относится только к нужным нам тегам
. К счастью, сделать это совсем не- сложно.
1. Вернитесь к HTML-редактору и файлу selector_basics.html
. Создайте новую строку для определения стиля с селектором потомков. Щелкните кнопкой мыши после закрывающей фигурной скобки стиля
.note и нажмите клавишу
Enter
2. Введите
.note strong {
. Последнее слово селектора — тег strong
— это и есть элемент, который вы хотите отформатировать. При этом стиль отформатиру- ет
только в том случае, если он расположен внутри другого тега, к ко- торому применен класс
.note
. Стиль не возымеет никакого эффекта на теги
, находящиеся, например, в тексте других абзацев, в списках или заго- ловках первого уровня.
3. Нажмите клавишу
Enter
, введите color: #FC6512;
, затем нажмите
Enter снова, чтобы создать еще одну новую строку. Закончите стиль символом закрывающей фигурной скобки.
Конечный вариант стиля должен иметь следующий вид:
.note strong {
color: #FC6512;
}
4. Сохраните таблицу и просмотрите ее в браузере. Слово
Note:
должно быть окрашено в оранжевый цвет в каждой из записей на странице.
Селекторы потомков — одно из самых мощных средств языка CSS. Профессио- нальные веб-дизайнеры используют их достаточно интенсивно для целенаправ- ленной стилизации отдельных тегов, при этом не засоряя HTML-код классами.
В книге они применяются повсеместно, поэтому у вас будет возможность получить о них более полное представление.
Создание ID-cелекторов
Вы можете применить селекторы классов ко многим элементам веб-страницы. На- пример, ранее вы создавали класс
.note и применили его к двум абзацам, хотя мог- ли бы применить и к большему количеству абзацев или даже других тегов.
ID-cелекторы выглядят и функционируют точно так же, как селекторы классов, с тем исключением, что их можно применить всего один раз. Как уже ранее упоми- налось, многие веб-дизайнеры избегают использования ID-селекторов (причины будут рассмотрены чуть позже). Но это не означает, что вы не должны знать, как их применять.
В данном примере мы создадим стиль, который устанавливает определенную ширину для основного содержимого веб-страницы, располагает его посередине окна браузера и добавляет декоративное фоновое изображение. Мы применим ID- селектор к тегу
для создания уникального дизайна страницы.
1. Вернитесь к HTML-редактору с файлом selector_basics.html
. Добавим за по- следним созданным классом
.note strong новый стиль.
2. Щелкните кнопкой мыши после закрывающей фигурной скобки предыдущего стиля, нажмите клавишу
Enter для создания новой строки и введите
#article {
Глава 3. Селекторы: определение элементов стилизации
103ID-cелекторы всегда начинаются с символа решетки
#
. Имя стиля указывает на тип веб-страницы.
В сайтах распространено проектирование разных дизайнов для различных ти- пов страниц. Например, домашняя страница выглядит не так, как страница,
рекламирующая продукцию, а та, в свою очередь, отличается от страницы, на которой ведется блог.
В данном случае вы идентифицируете эту страницу как article («статья», по аналогии с газетной статьей), создавая и применяя ID к тегу
3. Нажмите клавишу
Enter еще раз и введите следующее:
background-color: #FDF8AB;
background-image: url(images/bg_page.png);
background-repeat: repeat-y;
background-position: center top;
padding: 0;
margin: 0 auto;
width: 760px;
Эти свойства добавляют цвет для страницы, вставляют изображение в фон
(и контролируют его расположение), устраняют промежутки вокруг краев окна браузера, задают фиксированную ширину для содержимого и выравни- вают все посередине страницы (центрируют).
4. Завершите определение стиля, набрав закрывающую фигурную скобку. Весь код стиля должен выглядеть так:
#article {
background-color: #FDF8AB;
background-image: url(images/bg_page.png);
background-repeat: repeat-y;
background-position: center top;
padding: 0;
margin: 0 auto;
width: 760px;
}
Как и в примере с классом, данный стиль не будет эффективен, пока вы не при- мените его к веб-странице. Таким образом, нужно добавить атрибут id к HTML- коду веб-страницы, обозначая фрагмент, к которому вы хотите его отнести.
5. Найдите на веб-странице открывающий тег
и добавьте id="article"
, что- бы он выглядел следующим образом (изменения выделены полужирным):
id="article">
Теперь тег
отражает форматирование, определенное в стиле
#article
Как это часто случается при работе с CSS, есть много способов добиться одно- го и того же результата. Вы могли бы использовать класс стиля и применить его к тегу
при условии, что делаете это не более одного раза на странице; в противном случае любые другие элементы с идентификатором article полу- чат такое же форматирование. Вы даже могли бы просто создать стиль для
104 Часть 1. Основы CSS
элемента body с теми же свойствами форматирования, если они подойдут и для всех остальных страниц вашего сайта. Но в данном случае вы используете се- лектор ID, поскольку назначение стиля — идентификация типа страницы — со- ответствует идее селекторов ID.
6. Сохраните страницу и просмотрите ее в браузере. Все содержимое веб-страни- цы — логотип и текстовые данные — теперь имеют фиксированную ширину и рас- положены в центре относительно окна браузера. Даже если вы измените размеры окна браузера (попробуйте!), информационное содержимое останется центриро- ванным. Вдобавок на каждой стороне содержимого появляется тень, что проис- ходит благодаря полезному свойству background-image
(более подробно о нем вы узнаете далее в этой книге).
Последние штрихиДля развлечения добавим один усовершенствованный стиль — смежный сестрин- ский одноуровневый селектор — для форматирования абзаца, следующего сразу за первым заголовком на странице (того же самого результата вы можете добиться, создавая класс стиля и применяя его к абзацу, но смежный селектор одного уровня освобождает от внесения правок в код HTML).
1. Вернитесь к HTML-редактору с файлом selector_basics.html
. Создайте новую строку для нового стиля.
Если вы только что завершили предыдущие шаги, щелкните кнопкой мыши сразу за закрывающей скобкой стиля
#article и затем нажмите клавишу
Enter
2. Введите h1+p {
Этот стиль будет применяться к любому абзацу, следующему за тегом
Скачать 20.28 Mb.