Правила и селекторы CSS

<9 10 11 12 131415 >

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

body{

background:black;

color:white}

Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:

body,td,h1{

background:black;

Color:white

}

Селекторы CSS

Селекторы по идентификатору.

Ранее в качестве селекторов использовались теги, например: body, h1, h2. Но если мы хотим в html-странице использовать несколько одинаковых элементов (например, параграфов), и чтобы текст всех параграфов был черным, а одного из них - другим цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

<p id="pink"> параграф с идентификатором (id).</p> Имена можно присваивать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS).p{ color:black; } p#pink{ color:pink; }Селектор состоит в данном случае из элемента (p), разделителя (#) имени идентификатора (pink).На странице может быть только один идентификатор (id) с таким значением. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей. Селекторы по классуЕсли на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.), например:p#pink{ color:pink; } p.black{ color:black; } <p id="pink"> параграф с идентификатором (id) розового цвета.</p><p class="black"> параграф с классом (class). Черного цвета</p>

Существуют, также и универсальные классы.

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

Синтаксис таких классов достаточно прост: сначала идет точка, затем имя класса, и в фигурных скобках определения.

Пример:

<style type="text/css">

.red {color:#FF0000;}

</style>

.…

<body>

<h1 class="red"> Текст заголовка 1-го уровня, класса red</h1>

<h2 class="red"> Текст заголовка 2-го уровня, класса red </h2>

<p class="red"> Текст параграфа класса red </p>