В качестве селекторов CSS выступают различные элементы и их комбинации. Рассмотрим наиболее часто
встречающиеся.
Любой тег HTML, для которого можно задать стилевое оформление: размер, цвет, фон, поля и т.д.
Набор свойств и их значений можно указывать в одну строку или в несколько, как будет вам удобнее. Пример:
p {
width: 400px; /* ширина блока с текстом - 400 пикселей */
background-color: #00ff00; /* цвет фона - зелёный */
color: #ffffff; /* цвет текста - белый */
border: 2px solid black; /* ширина границы блока 2 пикселя, сплошная линия чёрного цвета */
padding: 3px; /* отбивка - 3 пикселя */
}
Код страницы:
<p>Шоколад с высоким содержанием какао может предотвратить инфаркт и гипертонию, причём лечебный эффект
зависит от дозировки.</p>
Результат:
Шоколад с высоким содержанием какао может предотвратить инфаркт и гипертонию, причём лечебный эффект
зависит от дозировки.
В данном документе ко всем абзацам, заключённым в тег <p>, будет применён именно такой стиль:
белый цвет текста на зелёном фоне.
Классы - используются тогда, когда нужно задать стиль для индивидуального злемента страницы или
разные стили для одного тега. Один класс может применяться к разным элементам.
Если класс применяется к определённому тегу, то синтаксис будет следующим:
Синтаксис:
Заголовок 3-го уровня с классом glav
тег.имя класса {
свойство1: значение;
свойство2: значение;
...
}
h3.glav {
color: #800f0f; /* цвет текста */
text-decoration: underline; /* подчёркнутый */
font-family: Geneva, Arial, sans-serif; /* семейство шрифтов */
}
При этом в записи правила сначала идёт указание тега, потом ставится точка и пишется имя класса,
затем перечисляются свойства. В названии классов используются только латинские буквы (заглавные или строчные),
разрешается применять знак дефиса и подчёркивания. Чтобы это правило применилось, вы должны соответствующему
тегу в тексте страницы присвоить класс:
<тег class="имя класса">
Можно задавать стили классов и без указания тегов, тогда они будут применяться ко всем тем тегам,
которым присвоены. Синтаксис в этом случае будет таким:
Синтаксис:
Класс comment для комментариев
.имя класса {
свойство1: значение;
свойство2: значение;
...
}
.comment {
color: #778899; /* цвет текста */
text-size: 12px; /* размер шрифта */
border-left-style: dashed; /* граница слева в виде пунктира */
}
К одному тегу может быть добавлено несколько классов, они записываются друг за другом через пробел.
В таблице стилей также можно делать запись типа .class1 .class2 {свойство: значение;}, тогда свойства
будут применяться только к тем элементам, у которых одновременно заданы оба этих класса.
ID-селекторы - идентификаторы, определяющие уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через скрипты. Пример:
#nav {
color: #0517c5; /* цвет текста */
background-color: #cdd1fa; /* цвет фона */
width: 250px; /* ширина блока */
}
Самое главное, что нужно уяснить в применении ID - это то, что ID - это уникальный элемент
и он может быть только один!
При описании идентификатора в стилях, сначала указывается символ решётки #, а потом непосредственно
имя идентификатора. Как и с классами, можно использовать только латинский алфавит, знаки подчёркивания
и дефис. Чтобы правила, описанные в стилях, нашли своего адресата, вы должны назначить в тексте документа
описываемому элементу id. Это делается так же, как и с классами, только вместо слова class используется
сокращение id:
<тег id="имя элемента">
Обычно ID присваиваются таким частям страницы, которые используются в единственном числе, например,
для обозначения шапки сайта, подвала, блока, содержащего контент и т.д.
В этом уроке в примерах для пояснения материала были использованы комментарии. Их не обязательно использовать при
создании документа, но на первых шагах обучения они помогут вам не запутаться в правилах.
