Блог

У меня есть следующие стили во внешнем файле CSS.

 .callButton {
  width: 100px;
  height: 25px;
  float: right;
  /* other styles here */
  background-img: url('images/callButton.png');
}

.otherButton {
  width: 100px;
  height: 25px;
  float: right;
  /* same styles from callButton here */
  background-img: url('images/otherButton.png');
}

/* 5 more similar buttons */
  

Как вы можете видеть, отличается только свойство background-img , но я должен использовать разные классы для каждого из них. Есть ли какой-либо способ, которым я могу использовать одни и те же классы для общего свойства и что-то другое (например, переменную) для background-img свойства?

Мне кажется, вам понадобится что-то подобное:

 .button {
    width: 100px;
    height: 25px;
    float: right;
}

.callButton {
    background-img: url('images/callButton.png');
}

.otherButton {
    background-img: url('images/otherButton.png');
}
  

Затем измените свой HTML на:

 <span class="button otherButton"></span>
  

Вы определенно можете несколько упростить это, используя что-то вроде:

 .callButton, .otherButton, ...other buttons... {
    width: 100px;
    height: 25px;
    float: right;
}

.callButton {
    background-img: url('images/callButton.png');
}

.otherButton {
    background-img: url('images/otherButton.png');
}
  

Создайте каскад, cascade

 .callButton, .otherButton 
{
   width: 100px;
   height: 25px;
   float: right;
  }  
.callButton {
   background-img: url('images/callButton.png');
 }  
.otherButton {
   background-img: url('images/otherButton.png'); 
}
  

Использование нескольких селекторов дает тот же эффект, но облегчает чтение вашего стиля, делает его последовательным и позволяет разделять только «разные» части.

ПРИМЕЧАНИЕ: в обозначениях классов, разделенных запятой, написано «применить к каждому из них» в этой первой строке.

Очевидный ответ — присвоить всем соответствующим элементам один и тот же класс. Это сработало бы, даже если вам нужно сохранить существующие имена классов по другим причинам, поскольку вам разрешено указывать несколько классов.

 .allButtons {
  width: 100px;
  height: 25px;
  /* etc */
}

.callButton {
  background-img: url('images/callButton.png');
}
  

с помощью HTML, подобного этому:

 <div class='allButtons callButton'>Call</div>
<div class='allButtons otherButton'>Other</div>
etc...
  

(кстати, если ‘callButton’ уникален, вы также могли бы использовать его как идентификатор, а не как класс; это имело бы больше смысла. Но он также будет отлично работать как класс)

Если вы не хотите этого делать (например, вы не можете изменить HTML), то вы можете указать все классы в CSS с помощью одного набора стилей, используя запятые:

 .callButton, otherButton, yetanotherButton, etc {
  width: 100px;
  height: 25px;
  float: right;
  /* other styles here */
}

.callButton {
  background-img: url('images/callButton.png');
}
  

Наконец, хотя вышеуказанные решения подойдут вам в этом случае, если вы хотите написать более понятные таблицы стилей в целом, вы также можете захотеть поискать такие продукты, как LESS, которые расширяют синтаксис CSS, чтобы упростить работу с ним. Затем вам придется преобразовать его в обычный CSS перед развертыванием на вашем сайте, но для целей разработки это удобный маленький инструмент.

Все кнопки с одинаковыми правилами CSS будут размещены вместе

  .button1, .button2, .button3, .button4, .button5 {width: 100px; 
 height: 25px; float: right; /* other styles here */}  
  

Тогда каждая отдельная кнопка может получить свой собственный background или другие специфические стили:

  .button1 {background-img: url('images/callButton.png';) 
 etc.
  

Таким образом, вашему HTML не нужно иметь несколько классов в соответствующих div файлах.