Как сделать подкласс css

Добавил пользователь Владимир З.
Обновлено: 19.09.2024

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

1) От общего файла reset.css не отказываемся. Допускается в самом начале выполнить общую установку стилей для тегов. Все-таки вряд ли кто-то будет на нашем движке писать новый Яндекс, поэтому принимается небольшой проигрыш в быстродействии в пользу значительного удобства формирования таблицы стилей.

2) В CSS-файлах крайне не рекомендуется использовать привязку к id, только к классу, даже если предполагается, что элемент на странице будет один:

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

При таком подходе мы можем задавать свойства для целой группы классов (куда будут входить все подклассы с модификаторами), используя селектор атрибута с префиксом. Например:

Здесь мы задаем свойства всем классам, которые имеют префикс b-topic_page-. Плюс обеспечивается совместимость со стилистикой bootstrap.

5) При задании свойств блочным элементам крайне не рекомендуется использовать имена тегов. Например:

6) По возможности максимально сокращать вложенность классов при описании. Например:

7) Везде, где какой-то класс используется для модификации другого конкретного класса, нужно использовать подклассы-модификаторы. Например, так неправильно:

8) Модификаторы могут быть объявлены и сами по себе. Например:

Исключения пока составляют классы, явно используемые из bootstrap. Например:

9) Имена классов элементов (с точки зрения БЭМ) не имеют своего стандартного префикса, но все правила относительно подклассов-модификаторов касаются и их. И еще правило в отношении них — если они попадают под стандартные элементы, определяемые CSS-фреймворком bootstrap, то и именоваться должны соответствующим образом. Например:

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

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

В коде HTML для указания связи тега с классом CSS в теге прописывается атрибут class html-value">Имя класса " .

Теперь простой пример использования классов:

Результат работы кода:

Рисунок 1. Пример использования классов в создании меню.

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

Давайте рассмотрим ещё один простой пример использования классов. Создадим класс для оформления абзаца (тег

Рисунок 2. Пример использования классов в создании цитаты.

И ещё один простой пример использования классов CSS. На этот раз сделаем таблицу зеброй для удобства чтения данных.

Рисунок 3. Пример использования классов в создании таблицы.

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

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

Создадим облако тегов применяя два класса к одноме тегу:

Пример выполнения этого кода:

Рисунок 3. Пример одновременного использования 2 классов в создании облака тегов.

Все ссылки в облаке тегов должны иметь один цвет, но размеры ссылок разные. Также общим можно указать шрифт ссылок.

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью 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-правило для селектора классов записывается так же, как и для селектора тегов, только в начале имени селектора класса идет точка:

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

Создание 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.

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

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 пикселей. Поскольку радиус границы не установлен, граница будет соответствовать исходной форме элемента.

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

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

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

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

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

Заключение

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

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

Что такое класс(class) в css, как используются классы, примеры использования class ан сайте!

Все о классе(class) в css

Что такое Class в css

Интересный вопрос обнаружился при анализе поисковых запросов?

зачем нужен class в html?

Ответ: зачем нужен class в html?

Class - атрибут тега, который позволяет задать индивидуальные свойства тегу(группе тегов) :

Как обозначается класс в html

Разберем синтаксис класса:

Внутри тега прописывается слово class.

Двойные "" или одинарные кавычки '' - в них прописывается имя_класса:

Правила имен классов.

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

Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_).

Использование русских букв в именах классов недопустимо.

Правило хорошего тона: имена классов предпочтительно писать "строчными буквами" не "ПРОПИСНЫМИ"!

Как обозначается класс в css

Класс - как "селектор" обозначается точкой перед именем_класса.

Пример использования класса в css:

Рассмотрим элемент div с классом example, который вы уже видели выше.

Если стили используются прямо на странице, то нам понадобится тег style

Внутри тега style класс будет выглядеть так:

1). точка - означает, что это класс.
2). Далее идет имя класса - example.
3). После имени класса открываются фигурные скобки <>.
4). Внутри скобок, пишется свойство(например цвет(color)).
5). После свойства идет двоеточие - ":".
6). Далее идет значение свойства(в примере(red)).
7). После значения идет точка с запятой - ";".

Если класс используется в файле file css, то все тоже самое, только тег style не нужно использовать:

Далее перейдем к примеру использования класса:

Пример использования Class в css

Если мы возьмем в качестве примера выше приведенный код :

И поместим его прямо здесь, то получим:

Результат использования class-a :

Здесь мы видим, что текст внутри элемента div - покрасился в красный цвет(Предопределенный цвет html)!

Расширим немного приведенный пример использования класса:

Но мы не видим края данного блока.

Давайте повторим тот код, но с новым классом "example_1" и дадим ему свойство border

Читайте также: