1 Тема від Yola

  • Yola
  • Yola
  • Replace Group
  • Поза форумом
  • Звідки: ukrainian.stackexchange.com
  • Дата реєстрації: 16.04.2013
  • Повідомлень: 1 214
    • Репутація: 615

Тема: Параметр в css класі

Я маю такий блок в якому я пишу теореми і означення. 

.def_block {
  border-radius: 10px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: left;
  background: rgb(235, 235, 255);
}

.def_block dd {
  margin-left: 5px;
}

.def_block dt {
  background: blue;
  color: white;
  margin-top: 0;
  margin-bottom: 0px;
  text-indent: 5px;
}
.def_block proof:before {
  margin-left: 5px;
  content: "Доведення:";
  font-weight: bold;
}

Але я хотів би щоб означення відрізнялись від теорем кольором. Тобто, щоб одні були синіми, як зараз в .def_block dt, в для других це був зелений колір. Як цього досягти?

Подякували: 221VOLT1

Yola вебсайт

2 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 601
    • Репутація: 13310

Re: Параметр в css класі

Додати ще один клас, очевидно.

Подякували: 221VOLT1

koala вебсайт

3 Відповідь від Yola

  • Yola
  • Yola
  • Replace Group
  • Поза форумом
  • Звідки: ukrainian.stackexchange.com
  • Дата реєстрації: 16.04.2013
  • Повідомлень: 1 214
    • Репутація: 615

Re: Параметр в css класі

koala написав:

Додати ще один клас, очевидно.

Я не знаю як це робити, напишіть будь ласка оптимальний код за мене, а я вам за це дякую натисну.

Подякували: 221VOLT1

Yola вебсайт

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: Параметр в css класі

загалом використовувати назви тегів, то не є ок, краще юзайте класи.
Ви можете просто додати класи утиліти, типу

.red {
 color: red;
}
.green {
 color: green;
}

і потім додавати ці класи, де треба

<dt class="def_block red"></dt>
<dt class="def_block green"></dt>

наприклад

Подякували: Yola, koala, ReAl, 221VOLT4

5 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 496
    • Репутація: 816

Re: Параметр в css класі

Yola - значно краще було би кидати шматок сторінки у https://codepen.io/, там можна вживу показати як вирішити вашу проблему
В загальному вище вже розписали, що потрібно робити

Також щодо .def_block - так не можна називати класи. Крім цього у вас в маленькому шматку CSS на 24 рядки є ще багато інших помилок

karmeljuk вебсайт

6 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 720
    • Репутація: 1876

Re: Параметр в css класі

karmeljuk написав:

Також щодо .def_block - так не можна називати класи. Крім цього у вас в маленькому шматку CSS на 24 рядки є ще багато інших помилок

чому так не можна називати класи?
як краще називати?
чому так краще називати?

які такі багато помилок?
покажіть?
і як їх виправити?

критикуєш - пропонуй,
пропонуєш - виконуй

Подякували: Yola1

221VOLT вебсайт

7 Відповідь від Yola Востаннє редагувалося Yola (05.03.2018 09:01:09)

  • Yola
  • Yola
  • Replace Group
  • Поза форумом
  • Звідки: ukrainian.stackexchange.com
  • Дата реєстрації: 16.04.2013
  • Повідомлень: 1 214
    • Репутація: 615

Re: Параметр в css класі

Поки зробив так:

▼Прихований текст
<html>
<head>
<style>
.def_block,
.thm_block {
  border-radius: 10px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: left;
  background: rgb(235, 235, 255);
}

.def_block dd,
.thm_block dd {
  margin-left: 5px;
}

.def_block dt {
  background: green;
}

.thm_block dt {
  background: blue;
}

.def_block dt,
.thm_block dt {
  color: white;
  margin-top: 0;
  margin-bottom: 0px;
  text-indent: 5px;
}

.thm_block proof:before {
  margin-left: 5px;
  content: "Доведення:";
  font-weight: bold;
}
</style>
</head>
<body>

<dl class="def_block">
  <dt>означення</dt>
  <dd>
  1
  </dd>
</dl>

<dl class="thm_block">
  <dt>теорема</dt>
  <dd>
  2
  </dd>
  <proof>
  очевидно
  </proof>
</dl>

</body>
</html>

Прикріпив зображення з тим як виглядає.

Post's attachments

Untitled.png 4.08 kb, 157 downloads since 2018-03-05 

Подякували: 221VOLT1

Yola вебсайт