Селекторы определяют, какие CSS-стили применяются к HTML-элементам. В соответствующем определении сначала указывается имя элемента, к которому должен обращаться селектор. Затем само объявление происходит в фигурных скобках. Внутри объявления могут быть указаны одно или несколько свойств. Общий синтаксис выглядит следующим образом:
Селектор {
Свойство1: Значение;
Свойство2: Значение;
Свойство3: Значение;
}Такое определение уже встречалось в вашем предыдущем уроке.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Обязательно убедитесь, что каждое объявление завершается точкой с запятой.
Ознакомление с доступными селекторами
На самом деле CSS предлагает довольно большое количество различных селекторов, из которых я представлю вам самые важные. Потому что ясно одно: только если вы владеете работой с селекторами, вы вообще можете разумно определить свойства CSS.
Самый простой способ присвоить стили внутри HTML-документа - селектор элемента.
С помощью следующего синтаксиса всем элементам p назначается цвет Черный.
p {
color: #009966;
}
Если вы хотите назначить один и тот же стиль нескольким элементам, это также возможно.
В этом случае просто перечислите соответствующие элементы один за другим, разделяя их запятой.
p, h1, li {
color: #000;
}
Вы также можете назначить элементам несколько стилей. При этом стили указываются через точку с запятой.
p {
color: #000;
background-color: red;
}
Также возможно комбинировать упомянутые варианты.
p, h1, li {
color: #009966;
background-color: red;
}
Результат может выглядеть так:
Области с несколькими элементами
Часто необходимо оформить область, состоящую из нескольких HTML-элементов. Для таких случаев в HTML есть два специальных элемента - span и div. Эти элементы, кстати, будут встречаться вам снова и снова в этом ряду.
Пример:
<div class="artikel"> <h1>Farbexplosion</h1> <p class="thema">Ein Tutorial zur Erstellung von Farbexplosion von <span class="autor">MarkusMelzer</span>.</p> </div>
Единственное различие между div и span заключается в том, что элемент div заставляет новую строку в потоке текста. span, с другой стороны, не создает новой строки. В показанном примере определяется область div, в которой содержатся заголовок и абзац текста. Внутри абзаца имеется область span.
Селекторы по ID и классу
До сих пор использовались селекторы элементов. В следующем примере все заголовки h1 форматируются с помощью такого селектора.
h1 {
color: #000;
background-color: red;
}
Но такой подход, очевидно, не всегда является желательным. Что, например, если вы хотите присвоить определенные свойства только одному или некоторым, но не всем заголовкам h1? Для таких случаев CSS предлагает два варианта, а именно - селекторы класса и идентификатора.
С помощью селекторов классов можно выбирать HTML-элементы с атрибутами класса очень целенаправленно. В соответствующем HTML-элементе должен быть указан атрибут class. Определения класса начинаются с точки.
Пример:
.rot {
color: red;
}
Здесь был определен класс rot. Чтобы применить свойства, назначенные красному, к HTML-элементу, просто укажите class, за которым следует имя класса.
<p class="rot">PSD-Tutorials.de</p>
Селектор идентификатора также легко использовать. Идентификаторный селектор можно распознать по двойному знаку решетки.
#topnavi {
color: blue;
};В этом примере определен ID topnavi. Но внимание: ID действительно может быть назначен только один раз в документе. Доступ к определенному свойству ID выглядит следующим образом:
<div id="topnavi">Здесь находится навигация</div>
Атрибут id назначает имя идентификатора. Обратите внимание, что здесь решетка не записывается.
Показанные данные также можно комбинировать. Так, например, одному элементу HTML можно назначить несколько классов.
<p class="красный крупный">PSD-Tutorials.de</p>
В этом примере текстовому абзацу назначены два класса красный и крупный. Если вы хотите указать класс и идентификатор, это будет выглядеть следующим образом:
<p class="красный" id="навигация">PSD-Tutorials.de</p>
Также можно комбинировать элементы и идентификаторы. Вот пример:
div.навигация {
color: синий;
}
Данная синтаксическая конструкция применяется исключительно к элементам div с классом навигация. Элементы p, которые также имеют класс навигация, не затрагиваются.
В CSS также существует ещё один способ комбинировать селекторы. Посмотрите на следующую синтаксическую конструкцию:
h1 {
color: красный;
}
em {
color: синий;
}
Здесь всем заголовкам первого уровня назначается красный цвет. Элементы em, напротив, получают синий цвет.
Комбинируя эти два указания, можно добиться того, что только элементы em будут окрашены в синий цвет, находящиеся внутри элементов h1.
h1 em {
color: синий;
};
Имена элементов здесь записываются отдельно друг от друга без запятых.
Это, кстати, популярное заблуждение, в которое попадают начинающие в CSS. Вот та же синтаксическая конструкция, в которой, однако, установлена запятая:
h1, em {
color: синий;
}
Что означает эта синтаксическая конструкция? Адресуются все элементы h1 и все элементы em. Это совершенно иное, чем синтаксическая конструкция без запятой!
Ещё один важный селектор - универсальный селектор. Он позволяет выбрать любой элемент. Данный селектор определяется через звёздочку.
* {
color: красный;
}
С помощью этой синтаксической конструкции все элементы получили бы красный цвет. И с этим селектором также необходимо учитывать несколько особенностей в синтаксисе.
#главНав * {
color: красный;
}
В этом примере цвет текста всех элементов внутри элемента с идентификатором главНав установлен на красный. Однако это не относится к самому элементу.
Если бы универсальный селектор находился в начале объявления, его не обязательно было бы указывать. Так что вот излишняя запись:
* p {
color: красный;
}
Данный синтаксис эквивалентен следующему:
p {
color: красный;
}
В следующем уроке вы узнаете о других селекторах.
