Вопросы для проверки

1. Какой псевдоэлемент позволяет добавить текст в начало предложения?

1. :after

2. :before

3. :first-line

4. :first-text

5. :first-letter

2. Что делает следующий стиль?

OL LI:first-letter {  color: red; }

1. Изменяет цвет первой буквы элемента маркированного списка.

2. Изменяет цвет первой буквы элемента нумерованного списка.

3. Изменяет цвет первой строки в маркированном списке.

4. Изменяет цвет первой строки в нумерованном списке.

5. Изменяет цвет текста всего списка.

3. Какой селектор написан с ошибкой?

1. p.new:before

2. abbr:first-line

3. p.new.back:after

4. div:before:first-letter

5. a:hover:before

Ответы

1. :before

2. Изменяет цвет первой буквы элемента нумерованного списка.

3. div:before:first-letter

CSS по теме

• Псевдоэлемент :after

• Псевдоэлемент :before

• Псевдоэлемент :first-letter

• Псевдоэлемент :first-line

 

Практикум

• Цитата

• Карты

• Вырезанные уголки

Группирование



комментариев: 10

 

23.09.2010

Влад Мержевич

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.

Пример 17.1. Стиль для каждого селектора

H1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 160%;

color: #003;

}

H2 {

font-family: Arial, Helvetica, sans-serif;

font-size: 135%;

color: #333;

}

H3 {

font-family: Arial, Helvetica, sans-serif;

font-size: 120%;

color: #900;

}

P {

font-family: Times, serif;

}

Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.

Пример 17.2. Сгруппированные селекторы

H1, H2, H3 {

font-family: Arial, Helvetica, sans-serif;

}

H1 {

font-size: 160%;

color: #003;

}

H2 {

font-size: 135%;

color: #333;

}

H3 {

font-size: 120%;

color: #900;

}

В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.

Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.

Вопросы для проверки

1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?

.bgzapas, .button, h1 {

font-size: 1.2em;

padding: 10px;

background-color: #fcfaed;

}

.bgzapas {

background-color: #e7f2d7;

}

.button, h2 {

width: 95px;

font-size: 11px;

color: #f3fced;

background-color: #5ca22e;

}

.bgzapas, .button {

background-color: #d9d7f2;

}

1. #fcfaed

2. #e7f2d7

3. #f3fced

4. #5ca22e

5. #d9d7f2

Ответы

5. #d9d7f2