Наследование в CSS, как в других языках программирования

@index58 · Регистрация: 01.07.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Я только начинаю изучать HTML и CSS, хотя, с программированием уже знаком на практике.
У меня вопрос общего плана по наследованию в CSS.
Допустим, у меня есть общий класс "column", в котором задаются значения для всех видов колонок.

CSS
1
2
3
4
5
6
7
.column {
    width: 100%;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    border-collapse: collapse;
}

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

CSS
1
2
3
.left_column {
    width: 250px;
}

А остальные свойства я КАК-ТО УНАСЛЕДУЮ от класса "column".
Вопрос: Возможно ли это, и как?
По сути, вопрос в том, есть ли в CSS обычное наследование классов, как в других языках программирования, и если есть, то как оно делается.

@Fedor92 · 22.12.2016, 20:49

Отвечу кодом:

HTML5
1
<div class="column left_column"></div>

Указав оба класса, можно применить к элементу стили определённые и для класса column и для класса left_column... В остальном не понял параллели между программированием и каскадными таблицами стилей... В контексте CSS, наследование - это передача некоторых родительских стилевых свойств, вложенному в него дочернему элементу...

@index58 · 22.12.2016, 20:58 **[ТС]**

Просто по логике... Если "левая колонка", то и так уже понятно, что это "колонка". Или если "Мерседес", то и так понятно, что это "автомобиль". Зачем в HTML два раза это указывать. Тем более, если я в дальнейшем решу наследовать "левую колонку" не от "колонки", а, например, от "столбца", то придётся переписывать HTML-код, ведь это неудобно. Ниужели в CSS нет классического объектно-ориентированного наследования, как в других языках программирования?

@Fedor92 · 22.12.2016, 21:05

Сообщение от index58

Ниужели в CSS нет классического объектно-ориентированного наследования, как в других языках программирования

CSS - это не ЯП(и в CSS нет вообще ничего от ЯП), это всего лишь каскадные таблицы стилей для украшения HTML-страниц...

Можно упростить вёрстку стилей с помощью препроцессоров LESS, SCSS - вот в них уже есть кое - какие элементы, заимствованные в программировании, а так увы... Всё кровью и потом...

@index58 · 22.12.2016, 23:22 **[ТС]**

Ну ясно. Тогда будем изучать препроцессоры

Спасибо!

Добавлено через 2 часа 11 минут
И всё-таки, оказывается, можно в CSS сделать так, как я хочу (подсказали на другом форуме).

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.column,
.left_column {
    width: 100%;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    border-collapse: collapse;
}
 
.left_column {
    width: 250px;
}

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

@Fedor92 · 22.12.2016, 23:33

Сообщение от index58

И всё-таки, оказывается, можно в CSS сделать так, как я хочу (подсказали на другом форуме)

А я Вам не так же ответил?

Сообщение от index58

То есть, запись через запятую можно вполне интерпретировать, как наследование

Это не наследование, а присвоение одинаковых свойств разным классам column и left_column... Спрашивается зачем? Если элементам в разметке можно поставить одинаковый класс...

@mrtoxas · 22.12.2016, 23:51

Наследование в CSS выглядит так и никак иначе:

CSS
1
2
3
4
5
6
7
8
.wrapper{
  font-size:22px;
  font-weight:bold;
  color:red;
}
span{
  text-decoration:underline;
}

HTML5
1
2
3
<div class="wrapper">
  <div class="block">Lorem <span>ipsum dolor</span> sit amet.</div>
</div>

Когда блоку .wrapper задаем стили, например, font-size, font-weight, color, то вложенные блоки наследуют эти стили. Но вашу задачу это не решит. То, что вы хотите сделать, как уже говорил Fedor92, посредством препроцессоров выглядит так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
/*LESS CODE*/
 
.column {
    width: 100%;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    border-collapse: collapse;
}
.left-column{
  .column; /* берем все стили из .column */
  width: 250px; /*перебиваем стиль width */
}

Чуть топорный вариант, но для понимания сгодится.

@index58 · 23.12.2016, 00:29 **[ТС]**

Fedor92,
1) Вы не уточнили, что "указать оба класса" нужно в файле CSS, а не в HTML

2) Я знаю, что это не наследование, а просто сокращение кода. Я, кстати, и не говорил, что это наследование. Я говорил, что это можно интерпретировать, как наследование

. И в моём проекте одинаковый класс поставить нельзя, т.к. "left_column", "right_column" и "center_column" вполне могут отличаться от "column" и друг от друга тоже.

Добавлено через 11 минут
mrtoxas, спасибо! Буду иметь в виду препроцессоры. А пока поюзаю своё псевдонаследование

@Fedor92 · 23.12.2016, 00:46

Сообщение от index58

Вы не уточнили, что "указать оба класса" нужно в файле CSS, а не в HTML

Чую Вам долго придётся постигать логику HTML и CSS...

Сообщение от index58

Я говорил, что это можно интерпретировать, как наследование

Значит у нас диаметрально разные понятия слов "интерпретировать" и "наследование"...

@LFC · 23.12.2016, 06:02

Сообщение от index58

То есть, запись через запятую можно вполне интерпретировать, как наследование

это не наследование,это групповой селектор,т.е. вы разным классам задаете одинаковые правила. И когда вы дописываете

CSS
1
2
3
.left_column {
    width: 250px;
}

то возникает конфликт свойств и браузер выбирает то свойство,которое в таблице расположено ниже

Добавлено через 11 минут
Fedor92,
интересно,какой вариант будет быстрее работать

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.column {
    width: 100%;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    border-collapse: collapse;
}
.left_column {
    width: 250%;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    border-collapse: collapse;
}

HTML5
1
<div class="left_column"></div>

или же

CSS
1
2
3
4
5
6
7
8
9
10
11
.column, .left_column {
    width: 100%;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    border-collapse: collapse;
}
 
.left_column {
    width: 250px;
}

HTML5
1
<div class="left_column"></div>

@Fedor92 · 23.12.2016, 11:04

Сообщение от LFC

интересно,какой вариант будет быстрее работать

Вот и проверьте...

В принципе они равносильны только произойдёт перекрытие свойств...

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@index58 59 / 25 / 10 Регистрация: 01.07.2016 Сообщений: 153
	22.12.2016, 20:58 [ТС]
	Просто по логике... Если "левая колонка", то и так уже понятно, что это "колонка". Или если "Мерседес", то и так понятно, что это "автомобиль". Зачем в HTML два раза это указывать. Тем более, если я в дальнейшем решу наследовать "левую колонку" не от "колонки", а, например, от "столбца", то придётся переписывать HTML-код, ведь это неудобно. Ниужели в CSS нет классического объектно-ориентированного наследования, как в других языках программирования? 0

@index58 59 / 25 / 10 Регистрация: 01.07.2016 Сообщений: 153
	23.12.2016, 00:29 [ТС]
	Fedor92, 1) Вы не уточнили, что "указать оба класса" нужно в файле CSS, а не в HTML 2) Я знаю, что это не наследование, а просто сокращение кода. Я, кстати, и не говорил, что это наследование. Я говорил, что это можно интерпретировать, как наследование . И в моём проекте одинаковый класс поставить нельзя, т.к. "left_column", "right_column" и "center_column" вполне могут отличаться от "column" и друг от друга тоже. Добавлено через 11 минут mrtoxas, спасибо! Буду иметь в виду препроцессоры. А пока поюзаю своё псевдонаследование 0