Что такое css class name

Что такое css class name

25 ФЕВРАЛЯ 2022
CSS-класс для блоков

В настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.

Примеры и пошаговая инструкция, как применить новую функцию.

Градиент на текстовом блоке

Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.

Как сделать

1 шаг
Добавьте блок с большим текстом, например, AB501.

• Откройте настройки блока, нажмите Добавить CSS Class Name;
• Задайте название класса, например, uc-about.

• Добавьте блок T123 HTML-код;
• Скопируйте код ниже и вставьте его в блок T123.

 .uc-about .t-title 

→ Сохраните изменения и опубликуйте страницу

Скруглённые фотографии
Some Words About Us

We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.

Классы в CSS

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

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

Такое решение есть и оно называется «классы»!

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

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

Класс — это всего лишь один из атрибутов HTML-тегов, например:

В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса , например:

.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"

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

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

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Конспект курса

Парные теги.

Одиночные теги.

Атрибуты тегов.

Инлайновые (встроенные) стили.

Внешние стили.

Стилизация по классам.

body < font-family: "Tahoma", serif; >h1 < color: #999999; >strong < color: green; >em < color: red; >.learned-ok < color: green; >.learning-in-progress < color: orange; >.not-learned < color: red; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

Переделываем всё c нормальными классами:

1. Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
2. Первым четырём абзацам добавьте класс learned-ok .
3. Пятому абзацу добавьте класс learning-in-progress .
4. Шестому абзацу добавьте класс not-learned .

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

• Наша группа в VK
• Наш канал на YouTube
• Наша страница в Twitter
• Наш канал в Telegram

Селекторы классов в 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, которые очень похожи на селекторы классов, но имеют несколько уникальных функций.

Element.className

Свойство className отвечает за значение атрибута class элемента.

Примечание: Кстати, у className есть большой брат. Его зовут element.classList — более мощный и функциональный метод для работы с классами элемента.

Синтаксис

var cName = elem.className; elem.className = cName;

• cName — строка. Если нужно указать несколько классов, они указываются через пробел.

Пример

var elm = document.querySelector("div"); alert(elm.className); //"booble example" elm.className = "class1 class2 class3"; alert(elm.className); //"class1 class2 class3" 

Примечание: ##### Примечание:Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным*.*

Поддержка браузерами

BCD tables only load in the browser

Спецификация

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.