Установить стили для каждого div

Question

Я новичок в css, а не программист. Я понимаю, что такое класс, и понимаю, что такое div, но я не могу понять, как установить стили для каждого div.

Любая помощь приветствуется,

Йост Верпланке

Answer 1

в вашем HTML

<div class="myClass">Look at me!</div>

В вашем CSS

.myClass
{
   background-color:#eee;
}

EDIT

Как указал Дэйв, вы можете назначить несколько классов элементу. Это означает, что вы можете модульно стили, как вам требуется. Помогает по принципу DRY .

Например, в вашем HTML

<div class="myClass myColor">Look at me too!</div>

В вашем CSS

.myClass
{
   background-color:#eee;
   color:#1dd;
}

.myColor
{
   color:#111;
}

Следует также отметить, что порядок в атрибуте class не имеет значения, если разные стили имеют конфликтующие настройки. То есть class="myClass myColor" точно так же, как class="myColor myClass". Какой конфликтный параметр фактически используется, определяется тем, какой стиль определен последним в CSS.

Это означает, что в приведенном выше примере, чтобы использовать color из myClass вместо color из myColor, вы должны изменить свой CSS, чтобы переключать их следующим образом

.myColor
{
   color:#111;
}

.myClass
{
   background-color:#eee;
   color:#1dd;
}

Answer 2

Вы можете создать класс для каждого элемента div или присвоить каждому элементу уникальное значение id.

Затем вы создадите другой стиль CSS для каждого класса или идентификатора, который будет стилизовать соответствующий элемент div.

#specialDiv {
    font-family: Arial, Helvetica, Sans-Serif;
}

<div id="specialDiv">Content</div>

Или

.specialDiv {
    font-family: Arial, Helvetica, Sans-Serif;
}

<div class="specialDiv">Content</div>

Вы также можете использовать встроенные стили для каждого элемента div:

<div style="font-family: Arial, Helvetica, Sans-Serif;">Content</div>

Answer 3

 <div class="featured">Featured</div>

 <style type="text/css">
      .featured { padding:5px; font-size:1.4em; background-color:light-yellow; }
 </style>

Для доступа к классу используйте (.) И идентификаторы (#) перед именем.

Answer 4

Если вам нужно установить стиль один раз и только один раз, когда вы хотите это сделать:

#test 
 {
  background-color: red;
 }

Если вам может понадобиться повторно использовать его (класс), тогда вы захотите сделать что-то вроде этого:

.test
 {
  background-color: red;
 }

Тогда, когда вы будете готовы использовать его просто:

<div id="test"> this is a test </div>

Для # типа и:

<div class="test"> this is a test </div>

Для типа класса.

Моя рекомендация: http://www.w3schools.com/css/

Там много помощи по CSS. Я бы постарался избежать встроенного CSS, так как иногда у артистов / программистов есть способ думать, что встроенное просто проще. В итоге вы получаете веб-страницу со всеми этими встроенными стилями, которые действительно можно централизовать и использовать повторно. Так что будьте осторожны со встроенными. Я не рекомендую использовать их

Answer 5

<s><div style="your css goes here"></div></s>

Редактировать - не делай этого, Аннаката прав. Я неправильно понял ваш вопрос. Вы уже получили много действительно хороших ответов, которые дают вам информацию, о которой вы спрашиваете.