|
Читайте также: |
Селекторы по идентификатору.
Ранее в качестве селекторов использовались теги, например: 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>
.…
</body>
Также существуют и универсальные идентификаторы. Их синтаксис аналогичен универсальным классам, за исключением использования знака # вместо точки.Дата добавления: 2015-07-16; просмотров: 47 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| А это самый мелкий | | | Свойства блока |