Как объявить класс в css
Перейти к содержимому

Как объявить класс в css

  • автор:

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

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Как работают селекторы классов CSS

Селекторы классов CSS позволяют присваивать правила стиля только некоторым экземплярам того или иного HTML-элемента (а не всем его экземплярам – как делает CSS по умолчанию). В отличие от HTML-элементов, имена которых предопределены (например,

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

CSS-правило для селектора классов записывается так же, как и для селектора тегов, только в начале имени селектора класса идет точка:

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

Content.

Создание CSS-класса с помощью селектора

Приступим к изучению классов CSS на практике. Сотрите все, что есть сейчас в файле styles.css и добавьте следующий фрагмент кода, чтобы объявить правило для класса red-text:

После добавления кода в styles.css сохраните файл.

Теперь откройте файл index.html и сотрите все, кроме первой строки кода:

Она ссылается на вашу таблицу стилей CSS. Затем добавьте следующий фрагмент HTML-кода:

Here is the first sample of paragraph text.

Обратите внимание, здесь в имя класса не точка не добавляется. На данный момент файл index.html должен содержать такой код:

Здесь мы добавили текст с помощью тега HTML

. Также мы указали класс red-text, добавив выделенный атрибут класса внутри открывающего тега HTML.

Сохраните файл index.html и загрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

Вы должны получить веб-страницу с красным текстом:

Here is the first sample of paragraph text.

Теперь давайте добавим еще один класс CSS, чтобы посмотреть, как происходит стилизация различных фрагментов текстового контента элемента

. Добавьте следующий фрагмент кода в файл styles.css (после класса red-text):

.yellow-background-text background-color: yellow;
>

Это правило объявляет, что свойству background-color класса yellow-background-text присвоено значение yellow. Любой текстовый HTML элемент, которому присвоится этот класс, будет использовать желтый фон. Обратите внимание, слово text в классе yellow-background-text используется только для удобства чтения файла человеком. На обработку самого класса браузером это слово никак не влияет.

Чтобы применить новый класс к каким-нибудь элементам, вернитесь в файл index.html и добавьте следующую строку в конец файла:

Here is the second sample of paragraph text.

Мы добавили новый текст с помощью элемента

и указали класс yellow-background-text. Сохраните файл и перезагрузите его в браузере. Ваша веб-страница покажет два разных предложения, первое будет написано красным, а второе – на желтом фоне:
Here is the first sample of paragraph text.

Here is the second sample of paragraph text.

Обратите внимание: в один HTML-тег можно добавить несколько классов. Попробуйте поместить оба класса в один текстовый элемент, добавив следующую строку в index.html:

Here is a third sample of text.

Как видите, имена классов разделяются только пробелом. Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:
Here is the first sample of paragraph text.

Here is the second sample of paragraph text.

Here is a third sample of text.

Теперь на странице есть третья строка текста, оформленная согласно свойствам, установленным в классах red-text и yellow-background-text – это красный текст на желтом фоне.

Добавление CSS-классов к изображениям

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

.black-img border: 5px dotted black;
border-radius: 10%;
>
.yellow-img border: 25px solid yellow;
border-radius: 50%;
>
.red-img border: 15px double red;
>

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

  • Первое правило объявляет, что класс black-img должен иметь черную пунктирную границу шириной 5 пикселей и с радиусом 10%, что закругляет углы элемента.
  • Второе правило объявляет, что элемент класса yellow-img должен иметь сплошную желтую границу шириной 25 пикселей и радиусом 50% (такое значение придает элементу круглую форму).
  • Третье правило объявляет класс red-img, который должен иметь двойную красную границу шириной 15 пикселей. Поскольку радиус границы не установлен, граница будет соответствовать исходной форме элемента.

Сохраните файл styles.css. Затем удалите все из файла index.html (кроме первой строки кода: ) и добавьте следующий фрагмент кода:



Каждая из этих трех строк добавляет изображение в HTML-документ и присваивает ему один из трех классов, которые мы объявили ранее в файле styles.css.

Примечание: Чтобы использовать изображение из интернета, можно вместо относительного пути указать ссылку на него.

Сохраните файл index.html и загрузите его в браузере. Вы должны получить такой результат:

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

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

Заключение

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

В следующем мануале этой серии вы научитесь создавать CSS селекторы ID, которые очень похожи на селекторы классов, но имеют несколько уникальных функций.

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

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

p { font-size: 18px; font-family: Verdana, Arial, sans-serif; } 

Оно действовало для всех элементов p документа. Но что делать, если какие-то из них надо оформить по-другому?

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

У открывающих или одиночных тегов HTML может быть атрибут class , которому присваивается произвольное (вами придуманное) имя класса. Например:

…текст…

Теперь в CSS, чтобы оформить этот абзац по особому, в таблице стилей мы обращаемся к нему с помощью такого синтаксиса:

.название_класса

То есть перед именем класса ставим точку, само имя в кавычки не берем.

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

Применение css-оформления класса к разным элементам html-страницы

Одному классу может принадлежать множество html-элементов. На скрине выше два абзаца и один раздел принадлежат классу addition .

Если мы хотим ограничить применимость класса только к одному типу элементов, а не к любому, то в css-правиле перед точкой следует указать этот элемент. Например:

p.addition { font-size: 18px; font-weight: bold; color: DimGrey; margin-left: 15px; }

В таких случаях назначение класса другим элементам бессмысленно (ошибки не будет, но стилевое правило класса не будет применено):

div class="addition"> Содержимое раздела /div>

Однако для другого элемента в таблице стилей может быть свой класс с таким же именем:

div.addition { border-style: ridge; }

В этом случае для каждого типа элементов будет применяться свое правило.

Вернемся к нашему исходному примеру, в котом один класс может применяться к разным html-элементам:

 html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style> body { background: WhiteSmoke; } p { font-size: 20px; font-family: Verdana, sans-serif; } .addition { font-size: 18px; font-weight: bold; color: DimGrey; margin-left: 15px; } /style> /head> body> p>Первый абзац/p> p>Второй абзац/p> p class="addition">Третий абзац/p> p class="addition">Четвертый абзац/p> p>Пятый абзац/p> div class="addition"> Содержимое раздела /div> /body> /html> 

Специфичность класса

Если вы присмотритесь к абзацам класса addition , то заметите, что семейство их шрифта такое же как у обычных абзацев, то есть один из вариантов sans-serif – шрифта без засечек. В то же время у раздела div начертание serif – с засечками.

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

В нашем случае, когда класс применяется к абзацу, более низкий приоритет оказывается у правила с селектором имени тега p . Но это не значит, что к элементу не применяется стиль, обладающий меньшей специфичностью. Правило с более высоким приоритетом (более специфичное) как бы накладывается на него.

Таким образом, к абзацам с классом было применено правило с селектором p и затем правило с селектором .addition . Если какое-либо свойство описывалось в обоих правилах, то применялось значение этого свойства для класса addition .

Что касается элемента div , то его семейство шрифта нами не менялось, оно осталось в варианте по-умолчанию, заданном браузером. Правило с селектором p для div неприменимо.

Взаимоотношения между селектором-тегом и селектором-классом можно было бы назвать наследованием, когда непереназначенные свойства берутся из менее специфичного правила (условно родительского), в более специфичном переопределяются лишь некоторые, остальные наследуются. Однако в концепции CSS наследованием называют другое: когда некоторые свойства элемента-контейнера наследуются для вложенных в него элементов. Например, размер и семейство шрифта можно задать для body , и эти значения будут работать для всех элементов страницы. Но при этом мы можем переопределять их для отдельных.

Теперь перейдем к идентификаторам. Их применение похоже на то, как это происходит с классами. Однако вместо html-атрибута class используется id , при этом в правиле CSS селектор с идентификатором записывается через решетку.

 html> head> style> body { background: WhiteSmoke; } p { font-size: 20px; font-family: Verdana, sans-serif; } #special { font-size: 22px; border-style: dotted; border-width: 2px; color: Red; padding: 15px; } /style> /head> body> p>Первый абзац/p> p>Второй абзац/p> p id="special">Особенный абзац/p> p>Четвертый абзац/p> p>Пятый абзац/p> /body> /html>

Использование идентификатора

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

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

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

p id="theme" class="addition another">. /p>

Специфичность идентификатора выше, чем у класса; то есть, если у элемента есть как идентификатор, так и класс, то значения свойств первого переопределят значения второго.

При применении к элементу нескольких классов мы касаемся такого понятия в CSS как каскад (на то они и каскадные таблицы стилей – Cascading Style Sheets): последующее определение свойства в одинаковом по специфичности селектора правиле переопределяет ранее объявленное. В примере ниже элементы, использующие оба класса, будут синими:

.addition { font-size: 18px; font-weight: bold; color: DimGrey; margin-left: 15px; } .another { color: Blue; }

В данном случае второй классовый стиль переопределит свойство color первого. Просто потому, что он описан после него. Это касается таблицы CSS, но не упоминания классов в атрибуте class тега. Так в нижеследующих абзацах нет никакой стилевой разницы:

p class="addition another">. /p> p class="another addition">. /p>

Также обратим внимание на то, что некоторые html-элементы обычно используются на странице единожды. Например, многие семантические теги: main , article , footer и др. В таких случаях нет смысла указывать для них идентификаторы, и при создании css-правила в качестве селектора проще писать имя тега.

С другой стороны, если имеется определенный элемент, требующий уникального оформления, которое вряд ли будет использоваться где-либо еще, даже на других страницах сайта, и обращаться к которому мы не планируем посредством JavaScript, то предпочтительно описывать его стиль в самом элементе с помощью атрибута style .

p style="color:Green; font-size:24px;"> Первый абзац /p>

Специфичность добавленных непосредственно в тег css-объявлений самая высокая. Она выше, чем у идентификатора, тем более класса.

Атрибут style – это еще один из способов добавления CSS-кода к HTML-коду. До этого мы использовали только вставку таблицы стилей между тегами .

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

CSS селектор класс

CSS селектор класс (class) применяет стиль ко всем элементам с указанным классом. Он определяется при помощи произвольного имени, перед которым ставится точка:

.myClass

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

Текст абзаца.

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

Текст абзаца.

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

При выборе имени класса необходимо учитывать следующие правила:

  • Все имена классов должны начинаться с точки. С её помощью браузеры находят селекторы классов в таблице стилей
  • В имени класса разрешается использовать следующие символы: буквы алфавита, числа, дефисы и знаки подчёркивания
  • Имя класса после точки всегда должно начинаться с буквы алфавита
  • Имена классов чувствительны к регистру символов, например: .Menu и .menu это имена двух разных классов

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

span.alert

в этом случае только текст в элементах span со значение alert атрибута class будет выделен жирным шрифтом, остальные элементы с данным классом будут игнорировать этот стиль.

Пример:
    Пример .myclass  

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

Результат данного примера:

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

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

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

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

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

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

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

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

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

p>Параграф 1p> p id="unique-paragraph">Параграф 2p> p>Параграф 3p> p>Параграф 4p> 

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

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

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

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

style> #unique-paragraph < color: red; > style> 

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

Классы

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

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

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

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

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

p class="odd">Параграф 1p> p class="even">Параграф 2p> p class="odd">Параграф 3p> p class="even">Параграф 4p> 

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

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

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

style> .odd < color: red; > .even < color: green; > style> 

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

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

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

p class="odd">Параграф 1p> p class="even large-font">Параграф 2p> p class="odd large-font">Параграф 3p> p class="even">Параграф 4p> 

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

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 одновременно и параграфу и заголовку:

h1 class="red-text">Заголовок 1h1> p class="red-text">Параграф 1p> h1>Заголовок 2h1> p>Параграф 1p> 

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *