Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
1 / 1 / 1
Регистрация: 01.07.2016
Сообщений: 55
1

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

22.12.2016, 20:27. Просмотров 963. Ответов 10
Метки нет (Все метки)

Здравствуйте!
Я только начинаю изучать 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 обычное наследование классов, как в других языках программирования, и если есть, то как оно делается.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.12.2016, 20:27
Ответы с готовыми решениями:

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

Метод Contains аналог оператору 'in' в других языках программирования
Не могу никак найти решение проблемы. В других языках программирования есть оператор вхождения in....

Сети Петри . Любой простой пример программы с сетями Петри С++ или на других языках программирования
Помогите пожалуйста . Сети Петри . Любой простой пример программы с сетями Петри С++ или на других...

Как писать программу на нескольких языках программирования?
Что за прикол? Я в Википедии смотрю там разные популярные проги, а там написано по несколько языков...

10
Эксперт HTML/CSS
2943 / 2512 / 1063
Регистрация: 15.12.2012
Сообщений: 9,406
Записей в блоге: 9
22.12.2016, 20:49 2
Отвечу кодом:
HTML5
1
<div class="column left_column"></div>
Указав оба класса, можно применить к элементу стили определённые и для класса column и для класса left_column... В остальном не понял параллели между программированием и каскадными таблицами стилей... В контексте CSS, наследование - это передача некоторых родительских стилевых свойств, вложенному в него дочернему элементу...
0
1 / 1 / 1
Регистрация: 01.07.2016
Сообщений: 55
22.12.2016, 20:58  [ТС] 3
Просто по логике... Если "левая колонка", то и так уже понятно, что это "колонка". Или если "Мерседес", то и так понятно, что это "автомобиль". Зачем в HTML два раза это указывать. Тем более, если я в дальнейшем решу наследовать "левую колонку" не от "колонки", а, например, от "столбца", то придётся переписывать HTML-код, ведь это неудобно. Ниужели в CSS нет классического объектно-ориентированного наследования, как в других языках программирования?
0
Эксперт HTML/CSS
2943 / 2512 / 1063
Регистрация: 15.12.2012
Сообщений: 9,406
Записей в блоге: 9
22.12.2016, 21:05 4
Цитата Сообщение от index58 Посмотреть сообщение
Ниужели в CSS нет классического объектно-ориентированного наследования, как в других языках программирования
CSS - это не ЯП(и в CSS нет вообще ничего от ЯП), это всего лишь каскадные таблицы стилей для украшения HTML-страниц... Можно упростить вёрстку стилей с помощью препроцессоров LESS, SCSS - вот в них уже есть кое - какие элементы, заимствованные в программировании, а так увы... Всё кровью и потом...
0
1 / 1 / 1
Регистрация: 01.07.2016
Сообщений: 55
22.12.2016, 23:22  [ТС] 5
Ну ясно. Тогда будем изучать препроцессоры
Спасибо!

Добавлено через 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 не нужно будет указывать два класса.
То есть, запись через запятую можно вполне интерпретировать, как наследование
0
Эксперт HTML/CSS
2943 / 2512 / 1063
Регистрация: 15.12.2012
Сообщений: 9,406
Записей в блоге: 9
22.12.2016, 23:33 6
Цитата Сообщение от index58 Посмотреть сообщение
И всё-таки, оказывается, можно в CSS сделать так, как я хочу (подсказали на другом форуме)
А я Вам не так же ответил?

Цитата Сообщение от index58 Посмотреть сообщение
То есть, запись через запятую можно вполне интерпретировать, как наследование
Это не наследование, а присвоение одинаковых свойств разным классам column и left_column... Спрашивается зачем? Если элементам в разметке можно поставить одинаковый класс...
0
Модератор
Эксперт JSЭксперт HTML/CSS
3418 / 2436 / 1448
Регистрация: 12.07.2015
Сообщений: 6,282
Записей в блоге: 4
22.12.2016, 23:51 7
Наследование в 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 */
}
Чуть топорный вариант, но для понимания сгодится.
0
1 / 1 / 1
Регистрация: 01.07.2016
Сообщений: 55
23.12.2016, 00:29  [ТС] 8
Fedor92,
1) Вы не уточнили, что "указать оба класса" нужно в файле CSS, а не в HTML
2) Я знаю, что это не наследование, а просто сокращение кода. Я, кстати, и не говорил, что это наследование. Я говорил, что это можно интерпретировать, как наследование . И в моём проекте одинаковый класс поставить нельзя, т.к. "left_column", "right_column" и "center_column" вполне могут отличаться от "column" и друг от друга тоже.

Добавлено через 11 минут
mrtoxas, спасибо! Буду иметь в виду препроцессоры. А пока поюзаю своё псевдонаследование
0
Эксперт HTML/CSS
2943 / 2512 / 1063
Регистрация: 15.12.2012
Сообщений: 9,406
Записей в блоге: 9
23.12.2016, 00:46 9
Цитата Сообщение от index58 Посмотреть сообщение
Вы не уточнили, что "указать оба класса" нужно в файле CSS, а не в HTML
Чую Вам долго придётся постигать логику HTML и CSS...
Цитата Сообщение от index58 Посмотреть сообщение
Я говорил, что это можно интерпретировать, как наследование
Значит у нас диаметрально разные понятия слов "интерпретировать" и "наследование"...
0
734 / 539 / 416
Регистрация: 17.09.2015
Сообщений: 1,601
23.12.2016, 06:02 10
Цитата Сообщение от 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>
0
Эксперт HTML/CSS
2943 / 2512 / 1063
Регистрация: 15.12.2012
Сообщений: 9,406
Записей в блоге: 9
23.12.2016, 11:04 11
Цитата Сообщение от LFC Посмотреть сообщение
интересно,какой вариант будет быстрее работать
Вот и проверьте... В принципе они равносильны только произойдёт перекрытие свойств...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.12.2016, 11:04

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

Как правильно использовать в других языках FileWrite из WinAPI подскажите
С++ я не знаю, в другом языке программирования нужно использовать FileWrite, но не получается (на...

Как разрабатывается проект .NET на разных языках программирования?
&quot;Как разрабатывается проект .NET на разных языках программирования?&quot; По этой теме мне нужно сделать...

Использование dll в других языках
Добрый вечер. Ситуация такая, у меня есть dll(библиотека классов) написанная на C#. Смогу ли я...

Аналог оператора 'in' в других языках
Господа небольшой вопрос, в шарпе есть contains, который в принципе является аналогом in, но...

Графика в языках программирования
1. Изобразить движение маятника. 2. Изобразить пароход и закрасить его отдельные элементы...

Выполнение в c# скриптов, написанных на других языках
Доброго времени суток! У меня такой вопрос: предположим, есть строка (string) с кодом, например,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.