Классы и идентификаторы css: Идентификаторы и классы | htmlbook.ru

Leave a Comment / Css / By /

Содержание

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

— Способ, которым мы выбираем элементы для применения стилей называется селектор (с англ. selector). До сих пор для добавления стилей мы выбирали элементы по имени тега.

— Ну да, мы указывали, например, h2 или p и дальше перечисляли свойства CSS. А что, есть другой способ?

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

Идентификаторы

Когда нужно выделить один элемент из всех, ему можно добавить идентификатор с помощью атрибута id.

У идентификатора есть важная особенность. Он должен быть уникальным в рамках всего HTML документа. То есть значение атрибута id должно использоваться только один раз.

Попробуем добавить уникальный id второму параграфу.

<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p>

Теперь нам надо выбрать этот параграф для применения стилей.

— Думаю для этого нам достаточно вместо имени тега p использовать unique-paragraph.

— Не совсем. Если ты попробуешь добавить стили таким образом, то браузер будет думать, что тебе нужен тег с именем unique-paragraph, которого не существует.

Для того, чтобы селектор по id работал правильно, мы должны добавить знак

# перед идентификатором.

<style>
  #unique-paragraph {
    color: red;
  }
</style>

Такой стиль будет применен только к тегу с id="unique-paragraph" и изменим его цвет на красный.

Классы

— Но чаще тебе прийдется группировать разные элементы для применения стилей.

— Выделить, например, не один параграф, а два?

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

В отличие от идентификатора, один и тот же класс может использовать для неограниченного количества элементов, а элементы будут объединены в группы по значению атрибута class.

Для выполнения задания нам нужны будут два класса — odd (в переводе с англ. — нечетные) и

even (в переводе с англ. четные):

<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p>

Селектор для классов немного отличается он идентификатора. Вместо символа # надо указать точку ., а далее значение атрибута class или просто имя css класса.

У нас будет два класса и два селектора: .odd и .even.

Давай у четных параграфов сделаем цвет текста зеленым, а у нечетных — красным:

<style>
  .odd {
    color: red;
  }
  .even {
    color: green;
  }
</style>

Одному и тому же тегу можно добавить несколько классов.

Например, для двух средних параграфов нам надо сделать шрифт 18px. Так как они относятся к разным классам, то мы не можем просто изменить стили.

Нужно добавить еще один класс.

Добавление мы делаем в атрибуте class, разделяя разные классы пробелами.

<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p>

И добавим еще один селектор в стили:

<style>
  .odd {
    color: red;
  }
  .even {
    color: green;
  }
  .large-font {
    font-size: 18px;
  }
</style>

— А раз у элемента может быть несколько классов, то можно ли делать селектор по нескольким классам?

— Можно. Для этого два селектора по имени класса нужно перечислить подряд. Без пробелов, запятых или других знаков препинания.

Если нужно добавить стили для всех HTML элементов, которые одновременно относятся к классам even и large-font, то селектор будет таким:

<style>
  .even.large-font {
    text-align: right;
  }
</style>

Внутри селектора мы добавили выравнивание текста по правому краю.

— Понятно.

— В предыдущих примерах мы группировали с помощью классов только однотипные теги. Но мы вполне можем объединить и разные теги в одну группу с помощью одного css класса. Например, добавим класс red-text одновременно и параграфу и заголовку:

<h2>Заголовок 1</h2>
<p>Параграф 1</p>
<h2>Заголовок 2</h2>
<p>Параграф 1</p>

После этого, в стилях можно будет изменить цвет всех HTML элементов этого класса.

Есть еще огромное количество правил для селекторов, но о них немного позже. Сейчас самое время закрепить полученные знания на практике.

Классы в CSS. Имена классов

Идентификаторы и классы — два важных селектора в CSS. Разница между ними заключается в том, что идентификатор может использоваться для одного элемента, в то время как класс — для нескольких. Классы в CSS нужны для выборки определенных элементов. При помощи этого селектора можно задавать стили. Записывается это так: .имя-класса. Одному элементу нередко соответствует несколько различных классов, записанных в теге через пробел. Для их имен верстальщики стремятся использовать понятные, универсальные слова на английском языке. Правильное наименование — это целое искусство. Классы в CSS помогают создать структуру кода. Они указывают, к какому элементу относится тот или иной атрибут, и проясняют смысл документа.

Атрибут class и его особенности

Что такое классы в CSS? Так можно назвать набор свойств, примененных для конкретного тега. Они используются в CSS и JavaScript при выполнении определенных задач для элементов с указанным именем. Если выбрать в качестве селектора сам тег, тогда свойства применяются ко всем подобным элементам. Если необходимо из нескольких одинаковых блоков выбрать один и применить свойства только к нему, понадобится класс. Задается он аналогично идентификатору:. Например, если вы хотите, чтобы все заголовки были голубые, то достаточно использовать селектор по тегу заголовка. Но что, если нужно сделать голубыми только некоторые из них? Или чтобы цвет ваших заголовков отражал раздел сайта, в котором вы находитесь? В этом случае нужно использовать классы.

Как записывается имя класса

Селекторы позволяют применить стиль к одному или нескольким элементам. Для этого нужно связать его со стилем, а затем назначить этот класс какому-то тегу. Имя класса может содержать цифры, дефис, нижнее подчеркивание, но их присутствие допустимо только в середине или в конце слова. Начинать с подобных символов имя класса в CSS нельзя. Первая буква должна быть латинской. Также оно чувствительно к регистру. Вы сами придумываете его. Затем просто добавляете свойства и значения, которые хотите назначить тегу.

Как выбрать элемент с определенным классом

Чтобы выбрать элементы с определенным классом, нужно написать точку, за которой будет следовать его имя. Если вы хотите использовать одно и то же наименование для нескольких элементов, но каждый с другим стилем, нужно использовать точку с именем элемента HTML, например: “p. class”. Допустимо также выбрать элементы или классы, вложенные в другой элемент или класс. Например, при использовании кода ”div.css-class p” будут выбраны все <p>, вложенные в <div>, который использует класс .css-class. Одним из основных преимуществ является то, что вам не нужно применять одни и те же свойства к каждому элементу, когда он вложен в другой, использующий класс.

БЭМ-методология

Хотя спецификация не накладывает требований на названия классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение, а не представление элемента. Другими словами, не стоит называть элемент меню “синий прямоугольник”, а для блоков использовать наименование: “блок1”, “блок2” и т. д. Как называть CSS-классы, чтобы ваш код был понятен любому другому разработчику? Для этого существует БЭМ-методология, позволяющая упорядочить работу над проектом в команде и ускорить ее выполнение.

Принципы БЭМ

“БЭМ” расшифровывается как “Блок-Элемент-Модификатор”. Эта методология была придумана в компании “Яндекс” для облегчения процесса разработки. Она позволила создавать общий язык для верстальщиков, дизайнеров и программистов. Принципы БЭМ просты:

  1. Верстальщик должен понимать свой код и код любого другого члена команды.
  2. Каждый элемент кода можно использовать повторно.
  3. Все члены команды говорят на одном языке и называют вещи одинаково.
  4. Специалисты могут свободно перемещаться внутри различных команд и совместно работать над проектами в других сферах.
  5. За счет понятной и одинаковой организации кода, новый специалист может легко войти в команду и быстро освоиться.

При использовании этих правил, если количество разработчиков в команде постоянно увеличивается, то и скорость работы над проектом возрастает. Это происходит благодаря единству команды. Из-за одинаковых правил ее члены способны трудиться над различными задачами.

Как называть классы в CSS правильно

В методологии БЭМ существуют свои правила именования классов. Например, для разделения слов необходимо использовать дефис, а элемент от блока изолируется при помощи символа нижнего подчеркивания. Инструкция, как именовать по шагам классы в CSS, хорошо известна опытным специалистам. Но не каждый верстальщик пользуется этом методологией. Некоторые применят только нижние подчеркивания или лишь дефисы при разделении слов. Или пишут вторую часть имени с заглавной буквы. До сих пор ведутся споры, как правильно именовать классы в CSS, а в различных компаниях существуют собственные правила. Главное — научиться давать им понятные имена, помогающие не запутаться в коде, и выбрать одинаковое оформление для них всех.

Виды классов и индификаторов для селекторов. Самоучитель CSS

Несколько слов от том как работают каскадные таблицы стилей

. Вы уже наверно знаете что браузер при обработке начинает читать HTML самой верхней строки, сначала он определяет тип документа, далее соглавно типу обрабатывает все что есть в теге HEAD, т. е. мета-теги скрипты и стили. Если браузер встречает CSS то он их все обрабатывает, составляет шаблоны(регулярные выражения) для тегов и уже когда он начинает обрабатывать все содержимое тега BODY, он ищет совпадения с шаблоном, и если есть совпадения то браузер применяет правила стилей. Например мы сделали такое правило: B{ color:red ; font-size:120%}, то браузеру сначала нужно определить размер шрифта по умолчанию, а потом умножить его на 120%, а уже только потом обрабатывать содержимое тега BODY и искать совпадения, в нашем примере тег B и уже если находит совпадения то применяет правило, т.е. не только делает текст жирным, и красит в красный цвет и увеличивает размер шрифта.

И так продолжим. Мы умеем применять правила для тегов, но мы эти правила распространяем на все теги, т.е. если мы создаем правило B{ color:red ; font-size:120%}, то содержимое в всех тегах B будет использовать это правило. Но что делать если мы хотим применить стиль только к одному тегу, а все остальные оставить по умолчанию?
Вот для этих целей служат идентификаторы, классы , псевдоклассы и подобные, но об всем по порядку.
И еще, если вы до этого момента не начали конспектировать пройденный материал, то с следующего абзаца я вам рекомедую делать это, потому что в CSS приблизительно 150 свойств правил, в свою очередь в среднем каждое правило имеет 5 значений, а еще более 20 способов использования селекторов, и того 150Х5Х20=15тыс. комбинаций. Запомнить все это не реально, но если делать конспект то вам будет проще.

1) Селектор типа тегов , это то что мы уже изучили, т.е. простое правило:
<STYLE type=»text/css»>
h2 { text-align:center }
</STYLE>

2) Групирование селекторов в CSS.
Если два и более селекторов имеют одинаковое объявление:
<STYLE type=»text/css»>
h2 { text-align:center }
h3 { text-align:center }
h4 { text-align:center }
</STYLE>
То такие селекторы можно сгрупировать:
<STYLE type=»text/css»>
h2, h3, h4{ text-align:center }
</STYLE>
при групировке селекторы разделяются запятой, между запятой и следующим селектором рекомендуется ставить пробел, после последнего слелектора не ставится запятая, а пробел между поледним селектором и фигурной скодкой на ваще усмотрение.

3) Универсальные селекторы подходят для любых тегов.
<STYLE type=»text/css»>
.{ color: red }
*.{ color: red }
</STYLE>
Оба правила выполняют одну и ту же функцию, за исключением того что правило с звездочкой есть устаревшим и может быть проигнорировано многоми браузерами. Этот пример аналог:
<STYLE type=»text/css»>
BODY{ color: red }
</STYLE>

4) Классы селекторов. При помощи Селектор типа можно создать правила для всех тегов(например B), но что делать если нам нужно в одном или нескольких тегах изменить оформление?, мы создаем классы:
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type=»text/css»>
B { font-size:12pt; color: red }
B.bluetext { color: blue }
</STYLE>
</head>
<body>
<b> красный текст 12pt</b>

<b class=»bluetext»> голубой текст 12pt</b>
</body>
</html>
Чтобы создать класс нужно к имени тега прикрепить при помощи точки имя класса, а потом это имя поместить в значение атрибута class. Имя класса может быть произвольное из букв и цифр, но начальным символом должна быть буква.

5)Идентификаторы селекторов: <html>
<head>
<title>ВВедение в CSS</title>
<STYLE type=»text/css»>
B#bluetext { color: blue }
h2#textcenter { text-align:center }
</STYLE>
</head>
<body>
<body>
<h2>Текст по центру</h2>
<b> голубой текст</b>
 </body>
</html>
Идентификаторы аналогичны классам, за исключением того что их на одной странице можно использовать только один раз, а классы сколько угодно. Так-же в XML могут быть конфликты, потому что идентификаторы там зарезервированы для других целей.

6) Универсальные идентификаторы и классы селекторов.
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type=»text/css»>
. centertext { text-align:center }
.#bluetext { color: blue }
</STYLE>
</head>
<body>
<h2> текст по центру</b>
<b> голубой текст </b>
 </body>
</html>
Эти классы и идентификаторы отличаются от универсальных селекторов, тем что их можно использовать в любом теге.

Классы в CSS. — it-black.ru

Классы в CSS. — it-black.ru

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


<p>…</p>
<p>…</p>

Классы CSS являются одним из основных составляющих стандарта CSS и придают ему дополнительную гибкость. Еще их называют селекторами классов CSS.

Рассмотрим пример применения класса на практике:


<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   p { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   .cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Пример 1.</p>
  <p>Пример 2.</p>
 </body>
</html>

Имя класса может содержать в себе латинские символы, цифры, символ дефиса – и подчёркивания _ и начинаться оно должно с латинского символа.

Класс с привязкой к элементу

В этом случае класс представляется, как уникальное имя-идентификатор какого-либо перечня свойств, предваряющееся точкой. Оно ставится между названием элемента и его описанием. Синтаксис:


 НАЗВАНИЕ ЭЛЕМЕНТА.имя-класса { свойство: значение }

В CSS-файле это будет выглядеть так:


P.class1 { text-align: center; }

P.class2 { text-align: left; }

Вызов из HTML будет выглядеть таким образом:


<p> Текст выровнен по центру </p>
<p> Текст выровнен по левой стороне </p>
<p> текст отформатирован по умолчанию </p>
Объединение классов

Объединение классов в CSS используется довольно редко. Чтобы применить к тегу несколько классов, достаточно указать названия классов в атрибуте class через пробел. Рассмотрим пример:


<html>
 <head>
  <meta charset=utf-8">
  <title>Объединение классов</title>
  <style type="text/css">
   .bold { font-weight: bold; }
   . kursiv { font-style: italic; }
   .blue { color: blue; }
   .green { color: green; }
  </style>
 </head>
 <body>
  <p>Жирный текст синего цвета.</p>
  <p>Жирный курсивный шрифт текста.</p>
  <p>Жирный текст зеленого цвета.</p>
 </body>
</html>

Если в разных классах есть одно и тоже свойство, тогда при их объединении будет применено значение свойства того класса, который находится ниже в файле стилей.

Иногда возникает необходимость в объединении класса с другим классом или другим селектором (например, тега), либо то и другое одновременно, чтобы сузить рамки выборки элементов.

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


.класс1.класс2 { свойство: значение; . .. }

селектор.класс { свойство: значение; ... }

селектор.класс1.класс2 { свойство: значение; ... }

Рассмотрим пример:


<html>
 <head>
  <meta charset=utf-8">
  <title>Объединение селекторов</title>
  <style type="text/css">
   p.note { /* стили параграфа-примечания */
    border: 5px #c66 double;
    padding: 5px;
   }
   span.note { /* стили span для примечания */
    font-weight: bold;
    color: #f00;
   }
   .kursiv { font-style: italic; }
   .bold { font-weight: bold; }
   .kursiv.bold { text-decoration: underline; }
  </style>
 </head>
 <body>
  <p>
   <span>Примечание:</span> вообще, объединение
   <span>нескольких селекторов классов</span>
   используется в верстке довольно <span>редко</span>,
   зато объединение классов с другими селекторами —
   <span>очень часто</span>, особенно с селекторами тегов. 
  </p>
</body>
</html>