Задание 2

Изменить программный код примера 4: добавить фон. Добавить текст в h2, h3 и т.д. Просмотреть. У каждого элемента изменить цвет, размер и т.д.

2. Группировка элементов по стилям

Селекторы можно объединять в классы.

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

Селектор класса применяет стиль ко всем элементам с указанным классом. Он определяется при помощи произвольного имени, перед которым ставится точка.

.myClass { color: blue; }

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

<p class="myClass">Текст абзаца.</p>

В атрибуте class в качестве значения может быть указан не один, а несколько классов, в этом случае имена классов должны быть разделены пробелами, порядок следования имён классов не имеет значения.

<p class="className1 className2 className3">Текст абзаца.</p>

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

При выборе имени класса необходимо учитывать следующие правила:

1. Все имена классов должны начинаться с точки. С её помощью браузеры находят селекторы классов в таблице стилей

2. В имени класса разрешается использовать следующие символы: буквы алфавита, числа, дефисы и знаки подчёркивания

3. Имя класса после точки всегда должно начинаться с буквы алфавита

4. Имена классов чувствительны к регистру символов, например: .Menu и .menu это имена двух разных классов

Селектор идентификатора позволяет применить стиль к определённому элементу на странице, в котором указан необходимый идентификатор. Определение селектора идентификатора начинается с символа решётки "#", далее указывается имя идентификатора.

#myid { color: blue; }

Чтобы использовать селектор идентификатора, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо добавить атрибут id в открывающем теге и указать в качестве значения имя нужного идентификатора. Ставить решётку перед именем идентификатора в HTML-коде (в значении атрибута id) не нужно.

Селектор идентификатора имеет некоторые особенности:

1. В названии идентификатора разрешается использовать только буквы, числа, дефис и знак подчеркивания

2. Название идентификатора всегда должно начинаться с буквы

3. Имена идентификаторов чувствительны к регистру символов, например: #Menu и #menu это два разных идентификатора

Универсальный селектор обозначаемый символом звездочки (*) соответствует любому элементу. Если его поставить перед блоком со стилями, то это будет эквивалентно групповому селектору, содержащему перечисление каждого элемента в документе.

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

div * { color: green; }

в данном случае во всех дочерних элементах, родителем которых является div, текст будет отображаться зеленым цветом.

Пример 5

<html>

<head>

<title>My flowers</title>

<style type="text/css">

#top {

background-color: #ccc;