Учебник CSS. Бесплатные уроки по CSS. Изучаем каскадные таблицы стилей и пробуем красиво оформлять веб-сайты и страницы.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я продолжаю рубрику Уроки CSS. В этой рубрике я уже писал о том, как создать простое CSS меню для сайта, как сделать горизонтальное и вертикальное CSS меню, о возможностях и функциях CSS, что такое CSS правила, CSS стили, CSS свойства и значения, а так же о том что такое CSS селекторы и какие они бывают. Сегодня я продолжаю тему CSS селекторов и данная публикация будет посвящена  селекторам классов CSS и селекторам CSS идентификаторов.

CSS классы и идентификаторы CSS. CSS селекторы.

Стоит сразу сказать, что селекторы классов CSS и идентификаторов CSS можно будет использовать только если внести соответствующие изменения в HTML документа, добавить HTML атрибуты. В этой публикации мы как раз таки и поговорим про HTML атрибуты id и class, которые существенно облегчают оформление HTML страниц и позволяют выбирать и группировать HTML элементы в таблице стилей CSS более точно.

Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.

Селекторы классов CSS

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

Помимо простых CSS селекторов существует два специальных CSS селектора: селекторы классов CSS (class) и селекторы идентификаторов CSS (id). Данные селекторы позволяют задать CSS стили независимо от HTML элементов. Селекторы классов и селекторы идентификаторов можно применять независимо от селекторов элементов, а можно их использовать вместе. CSS селекторы классов, как и CSS селекторы идентификаторов будут работать только в том случае, если задать соответствующие атрибуты для нужных тегов в HTML документе.

Допустим, у нас есть HTML документ, есть текст про кошек и собак. Текст разбит на заголовками <h3> на логические части, и нам нужно, чтобы заголовки, относящиеся к описанию кошек были синего цвета, а заголовки, относящиеся к тексту про собак были серыми. Получается, что мы не сможем разделить заголовки про кошек и собак простыми CSS селекторами, потому что:

Мы не сможем задать два цвета при помощи простых CSS селекторов одному и тому же HTML элементу, следовательно, нужно внести какое-то разнообразие в HTML документ и сделать HTML элементы более уникальными, чтобы разнообразить условия выбора при помощи CSS селекторов. Для этого мы можем использовать HTML атрибут id и HTML атрибут class, а затем использовать уже CSS селекторы классов и CSS селекторы идентификаторов.

CSS классы. CSS селекторы классов

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

Как вы можете видеть, у каждого тега <h3> есть атрибут class, со значением “cat” для заголовка про кошек и со значением “dog” для заголовка о собаках. Это сделано, чтобы задать свои CSS стили для заголовка про кошек и стили для заголовка о собаках. Так же мы хотим, чтобы слово кошка выделялось из первого абзаца и слово собака выделялось из второго абзаца, для этого можно использовать HTML тэг <span>, для которого мы аналогичным образом задали CSS классы. Страница без добавления CSS стилей будет выглядеть так:

HTML страница без CSS стилей

Довольно скучная и невзрачная страница. Давайте добавим несколько CSS стилей к нашей странице:

В каскадных таблицах стилей CSS используется краткая запись для добавления имени CSS селектора класса, достаточно добавить точку перед именем, класса, которое мы задали, как значение атрибута class. Например: .dog, .cat или .dogs. Селекторы CSS классов можно объединять вместе с другими селекторами классов, с селекторами идентификаторов CSS, с селекторами элементов. А вот то, что получится, когда мы добавим CSS стили, написанные выше:

HTML страница с добавлением CSS стилей

Мы видим, что стили соответствующих классов применились сразу ко всем элементам на HTML странице. Чтобы продемонстрировать то, как можно комбинировать CSS селекторы элементов с селекторами классов, давайте немного изменим пример:

Теперь у каждого HTML тега в документе используется класс со значением “cat”. Соответственно те CSS стили, которые мы задали ранее, будут работать не так, как нам требуется, вот что мы увидим (со старыми стилями):

CSS классы

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

Теперь мы скомбинировали селекторы CSS элементов и CSS классов и получили то, что нам нужно:

HTML страница с CSS стилями

Таким образом, получилось, что CSS стили, прописанные для селекторов h3.cat будут распространяться только на заголовки третьего уровня, у которых значения атрибута class равно “cat”, соответственно стили, которые написаны для селектора p.cat будут действовать только на все HTML элементы <p>, у которых класс равен “cat”, аналогично и для тэга <span>. Обратите внимание: я не ставил запятые между CSS селекторами, если поставить запятые, то получится совсем другой результат, просто ко всему HTML документу применится стиль, который мы задали последним (это относится к высоте и цвету текста на странице), абзац и заголовок будет расположен по центру, шрифт будет использован Arial, а их ширина будет равна 600 пикселов, также появится нижняя часть рамки под каждым HTML элементом на странице. Все это связано с тем, что объявления, которые написаны позже, имеют больший приоритет.

Множественные классы CSS

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

Порядок слов в данном случае не будет иметь никакого значения, можно было бы написать «shepherd dog». Создадим пример, в котором будут использованы три CSS класса, один из них будет множественным классом:

Теперь мы можем задать три различных стиля отображения для множественного CSS селектора и для двух селекторов классов dog и shepherd. Синтаксис для множественных CSS селекторов очень прост:

Обратите внимание: Internet Explorer до 7 версии не всегда правильно обрабатывает множественные селекторы CSS классов. В IE6 можно выбирать одно из нескольких слов, которые входят в состав множественного селектора. Если вы напишите два или более слов в CSS селекторе, то браузер IE6 выполнит выборку по последнему слову, то есть отберет все элементы, в значение атрибута class есть последнее слово.

Селекторы CSS идентификаторов

Еще одним селектором, который позволяет сделать HTML элементы более уникальными, соответственно, и более точную выборку элементов с веб-страницы, является селектор идентификаторов CSS. Селекторы идентификаторов чем-то похожи на селекторы CSS классов, но у них есть некоторые индивидуальные особенности, которые следует учитывать при использование CSS идентификаторов. Самой важной особенностью идентификаторов CSS является то, что идентификаторы должны быть уникальны, то есть два HTML элемента не могут иметь один и тот же идентификатор. Так же отличается синтаксис селекторов идентификаторов от селекторов классов. Вместе точки следует писать “#”, а затем значение идентификатора. Чтобы задать идентификатор для HTML элемента следует использовать атрибут id, а не атрибут class. Например:

Соответственно CSS правило будет выглядеть следующим образом:

Атрибут id, который присваивает идентификатор можно прописать практически для любого HTML тэга. Название CSS идентификатора может состоять только из символов латинского алфавита, тире, символов подчеркивания, цифр, но цифра не должна быть первой при именовании идентификаторов, регистр букв при именовании идентификаторов не имеет значение в случае HTML, но если мы создаем XHTML или XML документ, то регистр будет учитываться браузером.   Аналогичные правила именования действуют и на имена селекторов классов CSS.

Что использовать? CSS идентификаторы или CSS классы

Как вы могли заметить: у селекторов идентификаторов и у селекторов классов CSS есть свои уникальные особенности, но что же лучше использовать? Однозначного ответа на этот вопрос дать невозможно, все зависит от ситуации или привычки разработчика. Из всего выше сказанного нужно было вынести следующее: CSS классы можно задавать любому количеству элементов на HTML странице. В примерах мы использовали один класс “dog” и для тега <h3>, и для тэга <p>, и для тега <span>. В свою очередь, CSS идентификаторы можно использовать в HTML документе только единожды. Поэтому если в вашем документе есть HTML элемент с атрибутом id, значение которого равно “container”, то вы не имеете права присваивать любому другому HTML элементу в документе такое же значение атрибута id.

Идентификаторы CSS не могут объединяться, то есть, нет множественных идентификаторов, но есть множественные классы. При оформлении XML документов работа CSS классов не гарантируется, так как для обозначения классов используется точка. В свою очередь символ решетки разрешен к применению в любом языке разметки. То есть использовать CSS идентификаторы мы можем для любых документов, в любых языках разметки. Точнее не так, мы можем использовать символ # в любых языках, в которых существует атрибут, уникальность значения которого требуется в рамках одного документа. Это не обязательно будет атрибут id (в других языках разметки).

Еще одним важным отличием CSS классов от CSS идентификаторов является их приоритет, приоритет идентификаторов выше. На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)