1

Тема: Параметр в 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

2

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

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

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

3

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

koala написав:

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

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

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

4

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

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

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

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

6

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

karmeljuk написав:

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

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

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

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

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

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

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, 140 downloads since 2018-03-05 

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