Как создать класс в css

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

Данная глава является своего рода продолжением главы первой о способах внедрения CSS в HTML документ. Отложил эту главу «на потом», нарушив тем самым стандартную последовательность обучения CSS, с той лишь целью, чтобы раньше времени не забивать Вам голову информацией, которая в начале была для Вас малопонятной.

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

Классы CSS.

Начнём с классов..

Как присвоить элементу или группе идентичных элементов индивидуальный стиль, отличный от основного, уже указанного в стилевом описании документа? Не знаю задавались Вы этим вопросом или нет, но рано или поздно на него необходимо найти ответ.

Итак.. предположим в файле CSS к элементу <p> у нас применён следующий стиль:

И все вроде бы хорошо.. все параграфы синенькие и размер у них 14px, но нам надо сделать так чтобы некоторые из этих параграфов были розовые! И как быть??

На помощь приходят классы.

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

Ну что давайте попробуем? Делается это так:

Поясню p — это элемент HTML (селектор) в данном случае наш параграф, .rose — это индивидуальное имя класса которое мы сами выдумали, оно может быть любым необязательно rose -розовый, точка между селектором и именем класса есть дань уважения к синтаксису принятому в CSS — теперь браузер поймет что данный элемент p выведен в класс rose .

Ну что ж имя мы присвоили теперь нам необходимо в документе HTML указать теги (в нашем случае теги <p> ) которым необходим индивидуальный стиль. Делается это с помощью атрибута class .

<p > Этот параграф использует имя класса rose и тем самым выделяется из основной массы </p>

В данном примере класс «rose» может быть присвоен только параграфу — элементу p . Для того чтобы данное стилевое описание могло распространятся на все элементы, в файле CSS (или между тегами <style></style> в заголовке документа) элемент явно не указывается и синтаксис приобретает следующий вид:

Теперь указав в любом элементе он примет стиль данного класса.

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

Например, заголовок <h1 > был синим, а стал розовым, но при этом сохранил свой размер 22 пикселя, так как в нашем классе rose никаких разговоров о размере шрифта не шло.. мы лишь «договорились» с браузером, что элементы из группы rose будут розовыми.

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

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

В файле CSS имя указывается со знаком решётки в его начале.

Вот так, например:

А к нужному элементу добавляется атрибут например

<p id=»block»>Параграф с идентификатором</p>

Ну так в чем же отличие между классом и идентификатором?

Покажу на примере:

Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> с уникальными именами «block» и «block1» (скрывать и показывать его по нажатии на ссылку), и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать, как скрипт может обращаться к блоку через атрибут id . А вот с помощью классов мы бы не достигли такого результата.

Ну, думаю, объяснил кое как..

Полезные советы:

При построении CSS будьте логичны, соблюдайте «значимость» элементов и их порядок, так же как они вложены друг в друга в HTML коде.

Для чего это нужно?

Ну во-первых, просто для удобного чтения и «навигации» по CSS описанию. Когда Вам потребуется найти какой ни будь элемент Вы уже изначально будете представлять где он приблизительно находится в начале, середине, или конце..

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

Что увидит (сначала увидит) пользователь при «неправильном» построении CSS? Красивый шрифт, беспорядочно разбросанный в окне браузера? Или нормальное построение, но без красивого шрифта? — Это уже решать Вам!

При использовании классов и идентификаторов придумывайте им осмысленные информативные имена. Варианты тапа: .aaa .123 #abc #cba приведут к путанице!, я уж не говорю о том, что возможно в Вашем коде будет разбираться посторонний человек. Придумайте свою «систему» названий и не нарушайте её, так Вы сэкономите собственное время и затраченные усилия.

Классы

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

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»Имя класса» (пример 8.1).

Пример 8.1. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.1.

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .

Вопросы для проверки

1. Какое имя класса написано правильно?

1. 2layer1
2. 1layer
3. Яndex
4. pink-floyd
5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

<p использования излучаемого светильниками <span c3">потока</span>, на расчетной плоскости.</p>

При использовании следующего стиля?

1. Зелёный.
2. Синий.
3. Жёлтый.
4. Оранжевый.
5. Чёрный.

1. div[iddqd]
2. div.iddqd
3. iddqd.div
4. div#iddqd
5. div=iddqd

4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Как работают в CSS классы и идентификаторы

Классы – это наиболее часто используемые селекторы в css. В большинстве случаев прописывание стилей различным элементам идет через них. Все потому, что class, в отличие от id, можно задавать многим тегам, поэтому он может быть применен для стилизации целой группы блоков. Например:

Теперь какому бы блоку мы ни прописали class center-wrap, он получит максимальную ширину в 960 пикселей и будет центрирован. И мы можем прописать его и для шапки, и для контента, и для футера.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Несколько классов: как это работает?

Стилевые классы имеют еще одну особенность – их можно задавать несколько одному html-элементу. Даже не несколько, а бесконечное количество, тут никаких ограничений нет. Например:

Первый может отвечать за цвет, второй – за какой-либо эффект, третий – за размер. К слову, такой подход сделан в css-фреймворках. Например, в Bootstrap. CSS-фреймворк – это уже по сути готовые написанные стили и вам остается лишь прописать нужные свойства элементам.

Если оба класса, которые применяются к элементу, содержат одинаковое стилевое свойство с разным значением, то применится то значение, которое записано в таблице стилей последним. Например:

В данном случае текст в блоке будет зеленым, а не красным, потому что это стилевое правило стоит в таблице стилей позже первого, а значит, переопределяет его.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Наверняка вы зарегистрированы в какой-нибудь соц. сети? У вашему аккаунта там гарантированно есть какой-то id. Правда это не имеет ничего общего с css-идентификаторами, но общая их особенность вот в чем – id может быть только одним для одного конкретного элемента.

Нельзя задавать более 1 id одному элементу, а также нельзя давать один и тот же идентификатор двум разным элементам. Задается он с помощью атрибута id.

Из этого всего становится понятно, что идентификатор предназначен для стилизации одного конкретного элемента. Обычно он применяется по отношению к крупным элементам сайта. Например, к шапке (header), блоку контента (content), футеру (footer). То есть это те элементы, которые присутствуют на любом сайте в единственном числе и не повторяются. Также это может быть главная навигация, боковая колонка, форма комментариев и т.д.

Приоритетность в стилях

Если говорить о приоритетности в css, то тут идентификатор берет верх над классом. Давайте рассмотрим пример:

У нас есть 1 блок. Мы задали ему класс и идентификатор. Пропишем стили:

Какого цвета будет текст в блоке: зеленого или коричневого? Коричневого. И не потому, что идентификатор стоит в таблице стилей дальше класса. В данном случае это неважно, можно было бы поставить его перед, но результат все равно был бы таковым. Все потому, что идентификатор можно задать только 1. Соответственно, это очень точная характеристика элемента.

Дело в том, что для браузера чем точнее селектор, тем он является более приоритетным для выполнения записанных в нем свойств. Например, возьмем простой селектор тега – p. Он обращается ко всем абзацам на странице. Очень широкий селектор, так как абзацев очень много.

Но давайте попробуем селектор p.right<>. Он уже обратится только к тем абзацам, которые имеют класс right. То есть их может быть на самом деле много, но в любом случае их будет меньше, чем абзацев всего.

А теперь обратимся, допустим, к селектору #p-text. Он очень точный, так как выберет всего 1 элемент, у которого имеется этот идентификатор. Соответственно, вы можете привязать к элементу хоть 7 классов и прописать в них стили, но идентификатора хватит, чтобы все нужные стили переопределить.

Подытоживаем

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

Стилевой класс вы можете использовать как для стилизации группы элементов, так и для одного. Идентификатор же используется строго для одного элемента. Если вы попробуете один и тот же id прописать двум элементам, то это не сработает. Также нельзя одному элементу определять более одного идентификатора – это уникальная метка, которая может быть только в одном числе.

Если мы говорим о приоритетности, то id приоритетнее класса, но тот, в свою очередь, приоритетней обычных селекторов тегов.

Вот такие пироги, друзья. Еще одну вещь могу сказать – без этих вещей css просто немыслим, почти все стили в каскадных таблицах записываются, привязываясь либо к стилевому классу, либо к id. Если вы используете редактор кода с подсветкой синтаксиса, то это можно будет легко увидеть.