Правила и селекторы CSS
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>
.…
</body>
Также существуют и универсальные идентификаторы. Их синтаксис аналогичен универсальным классам, за исключением использования знака # вместо точки.Дата добавления: 2017-01-08; просмотров: 1873;
Поиск по сайту
Узнать еще
- XI. Правила применения семафоров
- А) Правила терминов.
- Аварийный запас труб, правила хранения и содержания труб аварийного запаса
- Виды условных знаков. Общие правила чтения топографических карт.
- Вопрос № 11. Статистический график, его элементы и правила построения.
- Вторичная структура ДНК. Правила Чаргаффа.
- Гигиенические правила кормления
- Гигиенические требования к максимальным величинам образовательной нагрузки (Санитарно-гигиенические правила и нормы СанПиН 2.4.2.1178-02)
Публикации по технике и механике
Публикации по биологии
Публикации по информатике
Публикации по строительству
Публикации по физике
Публикации по химии
Публикации по электронике
Публикации по искусству
Публикации по истории
Публикации по медицине
