Синтаксис CSS

Таблица стилей состоит из набора операторов. При этом каждый оператор является либо директивой, либо правилом. Правило (rule) состоит из селектора и блока объявления стилей (блока деклараций), заключенного в фигурные скобки.

Пример:

h1 {

margin-bottom: 10px;

margin-top: 10px;

width: 10px;

}

Здесь H1 — это селектор, за которым следует блок объявления стилей. Каждое объявление(декларация), как видно из данного примера, состоит из названия свойства (например, width), символа двоеточия (:) и значения свойства (например, 10px). Объявления должны разделяться точкой с запятой (;).

Комментарий начинается с символов /* и заканчивается символами */

Базовые селекторы

Как было сказано выше, каждое правило CSS состоит из селектора и набора объявлений.

Объявления определяют свойства отображения, а селектор указывает, к каким именно элементам документа именно эти декларации должны применяться.

* {

color: yellow /* Применяется ко всем элементам HTML-документа */

}

h1 {

color: green /* Применяется ко всем элементам H1 */

}

Базовые селекторы совпадают с названиями HTML-тегов. Если стиль описан при помощи базового селектора, то он применяется ко всем элементам документа с таким же именем.

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

h1 {

color: green /* Применяется ко всем элементам H1 */

}

h2 {

color: green /* Применяется ко всем элементам H2 */

}

h3 {

color: green /* Применяется ко всем элементам H3 */

}

color

эквивалентны одному правилу

h1,h2,h3 {

color: green /* Применяется ко всем элементам H1-H3 */

}

Color

Свойство color устанавливает цвет текста элемента.

Пример

Установим зеленый цвет текста для всех элементов h1:

h1 {color: green}

Цвет текста элемента em во всех примерах становится ярко-зеленым:

em {color: lime}

em {color: rgb(0,255,0)}

em {color: #0f0}

em {color: #00ff00}

em {color: rgb(0%, 100%, 0%)}

1. Создайте html-документ и раскрасьте его так же, как на рисунке. Первые три строчки - это элементы P. Картинку и текст возьмите произвольные!