Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и 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 идентификаторы предназначены для того, чтобы сгруппировать HTML элементы и разнообразить условия отбора нужных HTML элементов. Группировка, которая демонстрировалась в прошлой публикации, была очень простой и основывалась на выборе нужных элементов при помощи соответствующих селекторов. То есть мы обращались только к каким-то конкретным HTML элементам и задавали для них CSS стили.
Помимо простых CSS селекторов существует два специальных CSS селектора: селекторы классов CSS (class) и селекторы идентификаторов CSS (id). Данные селекторы позволяют задать CSS стили независимо от HTML элементов. Селекторы классов и селекторы идентификаторов можно применять независимо от селекторов элементов, а можно их использовать вместе. CSS селекторы классов, как и CSS селекторы идентификаторов будут работать только в том случае, если задать соответствующие атрибуты для нужных тегов в HTML документе.
Допустим, у нас есть HTML документ, есть текст про кошек и собак. Текст разбит на заголовками <h3> на логические части, и нам нужно, чтобы заголовки, относящиеся к описанию кошек были синего цвета, а заголовки, относящиеся к тексту про собак были серыми. Получается, что мы не сможем разделить заголовки про кошек и собак простыми CSS селекторами, потому что:
[php]h3{color: gray}[/php]
Мы не сможем задать два цвета при помощи простых CSS селекторов одному и тому же HTML элементу, следовательно, нужно внести какое-то разнообразие в HTML документ и сделать HTML элементы более уникальными, чтобы разнообразить условия выбора при помощи CSS селекторов. Для этого мы можем использовать HTML атрибут id и HTML атрибут class, а затем использовать уже CSS селекторы классов и CSS селекторы идентификаторов.
Самой распространенной практикой оформления веб-страниц без использования простых CSS селекторов, является практика использования CSS селекторов класса. Но, чтобы использовать CSS классы требуется внести изменения в код HTML документа, добавить HTML атрибут class к требуемым HTML элементам. Например, вернемся к кошкам и собакам и создадим HTML документ:
[php]
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html>
<head>
<link rel="stylesheet" href="selector.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS классы</title>
</head>
<body>
<div>
<h3 class="cat">Значение слова кошка</h3>
<p>
В русском языке слово <span class=”cats”>ко́шка<span> означает либо представителя биологического подвида Felis silvestris catus вообще независимо от пола, либо самку этого подвида. Самца называют кот, а детёныша кошки — котёнок (мн.ч. котя́та). Слово кошка в русском языке является диминутивом от др. -русск. слова «котъка»[11], которое в свою очередь происходит от существительного «кот» и является родственным лат. cattus — <span class=”cats”>кошка</span>[12] (так в поздней латыни, начиная с V века, в отличие от классического латинского felis) и близким названиям во многих языках Европы и Ближнего Востока (галл. cath, ирл. catt, нем. Katze, англ. cat, фр. chat, исп. gato, итал. gatta, прусск. catto[13], арм. k’at’u, нуб. kadis, лезг. кац). </p>
<h3 class="dog">История одомашнивания собак</h3>
<p >
О происхождении собаки выдвигается масса различных гипотез, наиболее вероятным предком современной <span class=”dogs”>собаки</span> считается волк и некоторые виды шакалов. В суждениях ученых о предках домашней собаки присутствуют две точки зрения. Одни считают, что собаки — полифилетическая группа (происходящая от нескольких предков), другие придерживаются мнения, что все <span class=”dogs”>собаки</span> произошли от одного предка (монофилетическая теория)[3][неавторитетный источник?]. Этолог, лауреат Нобелевской премии Конрад Лоренц выдвинул теорию о происхождении собак от волков и от шакалов[4], подчёркивая диаметральные различия между их характерами и повадками. </p>
</div>
</body>
</html>
[/php]
Как вы можете видеть, у каждого тега <h3> есть атрибут class, со значением “cat” для заголовка про кошек и со значением “dog” для заголовка о собаках. Это сделано, чтобы задать свои CSS стили для заголовка про кошек и стили для заголовка о собаках. Так же мы хотим, чтобы слово кошка выделялось из первого абзаца и слово собака выделялось из второго абзаца, для этого можно использовать HTML тэг <span>, для которого мы аналогичным образом задали CSS классы. Страница без добавления CSS стилей будет выглядеть так:
HTML страница без CSS стилей
Довольно скучная и невзрачная страница. Давайте добавим несколько CSS стилей к нашей странице:
[php]
.cat{
font: 18px Arial;
color: #1394EF;
border-bottom: 1px solid;
width:200px;
margin: 0 auto;
}
.dog{
font: 22px Times New Roman;
color: #888;
border-bottom: 1px solid;
width:300px;
margin: 0 auto;
}
p{
text-align:justify;
font:12px Arial;
width: 650px;
margin:0 auto;
}
.dogs{
font-size: 14px;
color:#f34f12;
}
.cats{
font-size:15px;
color:#d56faf
}
[/php]
В каскадных таблицах стилей CSS используется краткая запись для добавления имени CSS селектора класса, достаточно добавить точку перед именем, класса, которое мы задали, как значение атрибута class. Например: .dog, .cat или .dogs. Селекторы CSS классов можно объединять вместе с другими селекторами классов, с селекторами идентификаторов CSS, с селекторами элементов. А вот то, что получится, когда мы добавим CSS стили, написанные выше:
HTML страница с добавлением CSS стилей
Мы видим, что стили соответствующих классов применились сразу ко всем элементам на HTML странице. Чтобы продемонстрировать то, как можно комбинировать CSS селекторы элементов с селекторами классов, давайте немного изменим пример:
[php]
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html>
<head>
<link rel="stylesheet" href="selector.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS классы</title>
</head>
<body>
<div>
<h3 class="cat">Значение слова кошка</h3>
<p class=”cat”>
В русском языке слово <span class=”cat”>ко́шка<span> означает либо представителя биологического подвида Felis silvestris catus вообще независимо от пола, либо самку этого подвида. Самца называют кот, а детёныша кошки — котёнок (мн.ч. котя́та). Слово кошка в русском языке является диминутивом от др. -русск. слова «котъка»[11], которое в свою очередь происходит от существительного «кот» и является родственным лат. cattus — <span class=”cat”>кошка</span>[12] (так в поздней латыни, начиная с V века, в отличие от классического латинского felis) и близким названиям во многих языках Европы и Ближнего Востока (галл. cath, ирл. catt, нем. Katze, англ. cat, фр. chat, исп. gato, итал. gatta, прусск. catto[13], арм. k’at’u, нуб. kadis, лезг. кац).
</p>
</div>
</body>
</html>
[/php]
Теперь у каждого HTML тега в документе используется класс со значением “cat”. Соответственно те CSS стили, которые мы задали ранее, будут работать не так, как нам требуется, вот что мы увидим (со старыми стилями):
CSS классы
В общем, мы увидим, что весь тест принял стиль, который мы создали для HTML заголовка в первом случае, давайте это исправим. Достаточно скомбинировать CSS селекторы:
[php]
h3.cat{
font: 18px Arial;
color: #1394EF;
border-bottom: 1px solid;
width:200px;
margin: 0 auto;
}
p.cat{
text-align:justify;
font:12px Arial;
width: 650px;
margin:0 auto;
}
span.cat{
font-size:15px;
color:#d56faf
}
[/php]
Теперь мы скомбинировали селекторы CSS элементов и CSS классов и получили то, что нам нужно:
HTML страница с CSS стилями
Таким образом, получилось, что CSS стили, прописанные для селекторов h3.cat будут распространяться только на заголовки третьего уровня, у которых значения атрибута class равно “cat”, соответственно стили, которые написаны для селектора p.cat будут действовать только на все HTML элементы <p>, у которых класс равен “cat”, аналогично и для тэга <span>. Обратите внимание: я не ставил запятые между CSS селекторами, если поставить запятые, то получится совсем другой результат, просто ко всему HTML документу применится стиль, который мы задали последним (это относится к высоте и цвету текста на странице), абзац и заголовок будет расположен по центру, шрифт будет использован Arial, а их ширина будет равна 600 пикселов, также появится нижняя часть рамки под каждым HTML элементом на странице. Все это связано с тем, что объявления, которые написаны позже, имеют больший приоритет.
Вы уже видели, что значение атрибута class может состоять из одного слова, но в HTML значение атрибута class может состоять из двух слов и более слов, в этом случае слова разделяются пробелами. Вернемся к собакам, например, мы описываем, какую-нибудь пароду собак, например немецкую овчарку и нам необходимо выделить это слово и как собака и как немецкая овчарка. Для этого мы можем использовать множественный класс, HTML атрибут class будет выглядеть следующим образом:
[php]
class=”dog shepherd”
[/php]
Порядок слов в данном случае не будет иметь никакого значения, можно было бы написать «shepherd dog». Создадим пример, в котором будут использованы три CSS класса, один из них будет множественным классом:
[php]
[php]
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html>
<head>
<link rel="stylesheet" href="selector.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS классы</title>
</head>
<body>
<div>
<h3 class="dog">Значение слова кошка</h3>
<p >
<span class=” shepherd dog ”>Немецкая овчарка</span> — порода <span class=”dog”>собак</span>, изначально использовалась в качестве пастушьей и служебно-розыскной собаки. <span class=” shepherd”>Немецкая овчарка</span> была получена в результате селекции и скрещивания некоторых разновидностей гуртовых собак Центральной и Южной Германии. Различают гладкошёрстную и длинношёрстную разновидности.
</p>
</div>
</body>
</html>
[/php]
Теперь мы можем задать три различных стиля отображения для множественного CSS селектора и для двух селекторов классов dog и shepherd. Синтаксис для множественных CSS селекторов очень прост:
[php]
.dog.shepherd{…}
[/php]
Обратите внимание: Internet Explorer до 7 версии не всегда правильно обрабатывает множественные селекторы CSS классов. В IE6 можно выбирать одно из нескольких слов, которые входят в состав множественного селектора. Если вы напишите два или более слов в CSS селекторе, то браузер IE6 выполнит выборку по последнему слову, то есть отберет все элементы, в значение атрибута class есть последнее слово.
Еще одним селектором, который позволяет сделать HTML элементы более уникальными, соответственно, и более точную выборку элементов с веб-страницы, является селектор идентификаторов CSS. Селекторы идентификаторов чем-то похожи на селекторы CSS классов, но у них есть некоторые индивидуальные особенности, которые следует учитывать при использование CSS идентификаторов. Самой важной особенностью идентификаторов CSS является то, что идентификаторы должны быть уникальны, то есть два HTML элемента не могут иметь один и тот же идентификатор. Так же отличается синтаксис селекторов идентификаторов от селекторов классов. Вместе точки следует писать “#”, а затем значение идентификатора. Чтобы задать идентификатор для HTML элемента следует использовать атрибут id, а не атрибут class. Например:
[php]<div id=”container”></div>[/php]
Соответственно CSS правило будет выглядеть следующим образом:
[php]#container{
/*CSS стили для элемента
с идентификатором “container”*/
}[/php]
Атрибут id, который присваивает идентификатор можно прописать практически для любого HTML тэга. Название CSS идентификатора может состоять только из символов латинского алфавита, тире, символов подчеркивания, цифр, но цифра не должна быть первой при именовании идентификаторов, регистр букв при именовании идентификаторов не имеет значение в случае HTML, но если мы создаем XHTML или XML документ, то регистр будет учитываться браузером. Аналогичные правила именования действуют и на имена селекторов классов CSS.
Как вы могли заметить: у селекторов идентификаторов и у селекторов классов CSS есть свои уникальные особенности, но что же лучше использовать? Однозначного ответа на этот вопрос дать невозможно, все зависит от ситуации или привычки разработчика. Из всего выше сказанного нужно было вынести следующее: CSS классы можно задавать любому количеству элементов на HTML странице. В примерах мы использовали один класс “dog” и для тега <h3>, и для тэга <p>, и для тега <span>. В свою очередь, CSS идентификаторы можно использовать в HTML документе только единожды. Поэтому если в вашем документе есть HTML элемент с атрибутом id, значение которого равно “container”, то вы не имеете права присваивать любому другому HTML элементу в документе такое же значение атрибута id.
Идентификаторы CSS не могут объединяться, то есть, нет множественных идентификаторов, но есть множественные классы. При оформлении XML документов работа CSS классов не гарантируется, так как для обозначения классов используется точка. В свою очередь символ решетки разрешен к применению в любом языке разметки. То есть использовать CSS идентификаторы мы можем для любых документов, в любых языках разметки. Точнее не так, мы можем использовать символ # в любых языках, в которых существует атрибут, уникальность значения которого требуется в рамках одного документа. Это не обязательно будет атрибут id (в других языках разметки).
Еще одним важным отличием CSS классов от CSS идентификаторов является их приоритет, приоритет идентификаторов выше. На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)
Pingback: Lezhnev
Здравствуйте! Нет, в этой стать я описал работу с CSS классами и CSS идентификаторами, в предыдущей публикации я писал про CSS селекторы элементов, универсальный CSS селектор, а так же про группировку CSS селекторов. Но это еще не все CSS селекторы, есть еще селекторы CSS атрибутов, публикации про которые еще готовится!
Кирилл, спасибо Вам большое за подробное и внятное объяснение, совсем недавно начал изучать HTML и CSS, и на Вашем сайте нахожу для себя очень много ценного полезного и интересного, а главное: все написано четко, понятно и без воды!
Водичка для самых маленьких. Рассказал бы лучше про псевдоклассы CSS или про селекторы атрибутов и какие плюшки они дадут разработчику.