... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Синтаксис CSS. Типы селекторов (стр.1)

 

 

Правила CSS ||  Типы селекторов ||  Единицы измерения ||  Наследование ||  Каскадирование ||  CSS и браузер


Селектор служит для того, чтобы в HTML-документе однозначно определить тот элемент, к которому следует применить данное CSS-правило. Так как браузерами полностью реализована поддержка только стандарта CSS1, рассмотрим селекторы, допустимые этим стандартом.

Селектор по элементу

В качестве селектора может использоваться имя элемента HTML. Например, если мы хотим, чтобы текст всех абзацев в HTML-документе был написан шрифтом Arial, обычным начертанием и размером 14 пунктов, то следует написать такое правило:

Р {font: normal 14pt Arial;}

В качестве селектора тут выбран элемент Р, обозначающий в языке HTML отдельный абзац.

Селектор по классу

Если же потребуется выделить абзацы двух типов: первый, аналогичный описанному выше, а второй с текстом, цвет которого уже должен быть не черным, а синим. Можно выйти из положения несколькими путями. Первый - это указать цвет текста в атрибуте style элемента Р.

<Р style="color:blue">Цвет этого и только этого абзаца будет синим</Р>

Однако речь идет о ситуации, когда на странице должен существовать не один абзац такого вида, а целый класс, поэтому описанный выше способ нам не очень подходит. Во-первых, для того чтобы все абзацы класса стали синими, нужно в каждом прописать атрибут style="color:blue". Во-вторых, если позднее мы решим поменять цвет выделенных абзацев, придется искать каждое вхождение в код записи style="color:blue" и исправлять в ней цвет. А если, кроме цвета, мы захотим, к примеру, увеличить еще и шрифт, то потребуются еще более серьезные изменения в коде. Но мы говорили ранее, что хочется написать такую разметку, чтобы изменения в нее вносить не требовалось, адля смены внешнего вида документа можно было изменять только саму таблицу стилей.

Второй вариант решения этой задачи — использование селектора по классу. Для того чтобы определить класс, в HTML-коде используется атрибут class, который можно применять в любом элементе. В HTML-коде мы должны написать следующее:

<Р class="blue">Цвет этого абзаца и всех других абзацев этого класса будет СИНИМ</Р>

В таблице стилей при этом следует написать такое правило, где в качестве селектора будет использоваться название элемента Р и через точку (.) от него имя класса:

<STYLE TYPE="text/css"> P.blue {color: blue; } </STYLE>

Такой синтаксис напоминает синтаксис объектно-ориентированных языков программирования, где названия свойств и методов объекта отделяются от имени объекта точкой. Если понадобится выделить еще один класс абзацев, например красного цвета, можно создать еще один класс red. Тогда нужно написать такой код:

<STYLE TYPE="text/css">
P.red {
color: red;
}
</STYLE>
«. другие элементы HTML ...
<P class="red">Kpacный абзац</Р>

Вообще-то, нельзя считать очень хорошей идею называть классы в зависимости от их внешнего вида. Так, если позднее вы решите изменить цвет синих абзацев на зеленый, для этого надо будет просто исправить правило:

<STYLE TYPE="text/css">
P.blue{
color: green;
}
</STYLE>

После такой операции цвет синих абзацев изменится на зеленый, но название класса останется blue, что уже не соответствует действительности, и вы сами будете путаться. Названия классам лучше давать в соответствии с их прямым назначением. Например, если синими вы решили сделать первые абзацы каждой публикации, размещенной на вашем сервере, то такой класс можно назвать first. Как бы внешне ни выглядел этот стиль, вы все равно вспомните, что он применяется к первому абзацу.

Можно создать унифицированный класс, который можно будет использовать в любых элементах HTML. Например, создадим класс красных объектов. Для этого в таблице стилей нужно написать такое правило:

<STYLE TYPE="text/css">
.red {
color: red;
}
</STYLE>

Перед именем класса можно не указывать название элемента. Тогда "пустота" в начале как бы обозначает любой элемент. Далее можно написать такой код.
<H1 class="red">Kpacный заголовок</Н1>
<P class="red">Teкст абзаца тоже будет красным</Р>

В результате цвет любого элемента, внутри открывающего тега которого будет стоять атрибут class= "red", будет красным.

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 -

 

Правила CSS ||  Типы селекторов ||  Единицы измерения ||  Наследование ||  Каскадирование ||  CSS и браузер

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены