Атрибут class
Самый частый атрибут, который вы будете использовать. Задаёт класс элементу.
Кратко
Скопировать ссылку «Кратко» Скопировано
Универсальный атрибут тега, с помощью которого можно задать имя любому элементу на странице. Имя элемента в дальнейшем используется в качестве селектора в CSS и позволяет управлять стилями элемента. К тому же по имени класса удобно искать и манипулировать элементами на странице при помощи JavaScript.
Пример
Скопировать ссылку «Пример» Скопировано
На странице может быть множество одинаковых тегов. Например, несколько заголовков второго уровня.
.В Санкт-Петербурге
Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.
В России
«Умом Россию не понять. »
В мире
На Брайтон Бич опять идут дожди.
.. h2>В Санкт-Петербургеh2> p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.p> h2>В Россииh2> p>«Умом Россию не понять. »p> h2>В миреh2> p>На Брайтон Бич опять идут дожди.p> .
🤖 Как при текущей разметке можно изменить цвет текста первого заголовка? Можно обернуть все заголовки в разные дополнительные теги. И использовать их комбинации в качестве селекторов для написания стилей. Но это решение будет неверным. Разметка распухнет, её сложно будет читать. Так делать не нужно.
Чтобы выделить какой-то отдельный элемент или набор элементов и применить стили выборочно можно использовать атрибут class .
.В Санкт-Петербурге
Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.
В России
«Умом Россию не понять. »
В мире
На Брайтон Бич опять идут дожди.
.. h2 class="news__local">В Санкт-Петербургеh2> p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.p> h2 class="news__country">В Россииh2> p>«Умом Россию не понять. »p> h2 class="news__world">В миреh2> p>На Брайтон Бич опять идут дожди.p> .
В коде выше каждому заголовку второго уровня заданы разные имена классов. Это позволит без особых проблем написать стили только для первого заголовка.
.news__local color: #ed6742;>.news__local color: #ed6742; >
Цель достигнута, при этом стили остальных заголовков второго уровня остались прежними.
Как понять
Скопировать ссылку «Как понять» Скопировано
Имя класса может быть произвольным. Вы самостоятельно придумываете это название и задаёте его элементу при помощи атрибута class . Чтобы использовать имя класса в качестве селектора достаточно написать его в CSS, поставив перед именем точку. По точке браузер поймёт, что ему нужно искать не тег, а именно класс.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Атрибут класса можно задать любому тегу в HTML-разметке. Как и любой другой атрибут, класс прописывается внутри треугольных скобок открывающего тега.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
При выборе имени класса следует придерживаться нескольких правил:
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="osnovnoy-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="Main-Text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Для разделения двух слов используются тире ( — ) или знак подчёркивания ( _ ). Не используй camelCase 🐫
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="mainText"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main__text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="daily-news__main-alert-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="news__main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Не используй в названиях классов цифры или числительные. Завтра порядок блоков может измениться и нумерация будет сбивать с толку.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
p class="text1"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="text-two">Экзистенциализм сложен.p> p class="text3">Художественное переживание последовательно.p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="sub-text">Экзистенциализм сложен.p> p class="note-text">Художественное переживание последовательно.p>
- Не задавайте имя класса по контенту или по тегу. Контент — вещь живая. Если он изменится, то класс потеряет свою актуальность, что осложнит чтение и понимание кода. Теги также могут измениться в процессе жизни сайта.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
p class="p-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="difficult">Экзистенциализм сложен.p> p class="perezhivanie">Художественное переживание последовательно.p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="sub-text">Экзистенциализм сложен.p> p class="note-text">Художественное переживание последовательно.p>
- Не опирайтесь на внешний вид элемента при выборе имени класса. В разработке есть тенденция к быстрым изменениям. Поэтому завтра внешний вид сайта может полностью измениться. При подборе имён классов по смыслу элемента позволит избежать изменения HTML-разметки.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="green-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
В примере ниже main и text будут восприниматься браузером как два отдельных класса, а не один, состоящий из двух слов.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="main text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
Есть несколько методологий именования классов. Самой популярной на сегодня является БЭМ. Методология призвана определить дополнительные правила именования классов и облегчить процесс придумывания имён.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 У элемента может быть несколько классов. Перечисляй классы, разделяя их пробелом.
Экзистенциализм сложен.
p class="sub-text news-text">Экзистенциализм сложен.p>
💡 Поскольку стили принято задавать только селекторам по классу, пиши классы всем элементам сразу в процессе создания HTML-разметки.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Раньше в вёрстке довольно часто использовались идентификаторы — атрибут id . Теперь их лучше не использовать и заменить на класс. Точно не стоит использовать идентификаторы для стилизации элементов.
Причина в том, что идентификатор должен быть уникальным. В разметке может быть только один идентификатор с определённым именем. Это крайне неудобно для написания стилей, поскольку придётся многократно повторять одни и те же стили, но для разных идентификаторов. С классами эта проблема решается просто. Пропиши всем элементам, для которых нужно задать определённый внешний вид, один и тот же класс.
У многих начинающих разработчиков существует представление, что идентификаторы требуются для связи JavaScript и HTML, но это не так. В современном виде JavaScript предоставляет удобные инструменты поиска и манипуляции элементами по их классу. Так что и здесь классы пригодятся!
🛠 После того, как разметка и стили написаны, посмотри на них внимательно. Высока вероятность, что написано несколько одинаковых блоков стилей для разных классов. Имеет смысл оптимизировать код и вынести повторяющиеся стили в отдельный блок и задать всем похожим элементам один класс.
🛠 Представляй каждый блок, из которого состоит страница, как самостоятельный элемент, который можно будет убрать с текущей страницы и перенести на другую. Задавай такие имена классов, которые не будут привязаны к странице. Думай компонентами 😉
How to Define a CSS Class Style
wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, volunteer authors worked to edit and improve it over time.
This article has been viewed 77,452 times.
Classes are a nice feature in HTML that allows you to assign a certain name to an element. They can be styled using CSS. If you don’t know how to use those features, this article will help you.
Create the basic HTML skeleton. As a reminder, it’s an opening HTML tag, an opening head tag, a closing head tag, an opening body tag, a closing body tag, and a closing html tag.
Give the HTML element a class. Do this by inserting «class=»classname» inside the opening tag for your element.
Expert Q&A
You can do the exact same thing with ID styles. To call an ID style in CSS, put «#idname < >» in your CSS document.
You Might Also Like
How to Insert a Hyperlink Using Rich Text or HTML: 3 Methods