Используем классы в работе с HTML, div class | Бизнес блог Макса Метелева

23 марта, 2018 Максим Метелев 40683 просмотров Комментариев нет

Добрый день дорогие друзья! Я бы конечно отнес этот урок к CSS, но все же лучше будет рассказать это в контексте разработки сайтов на HTML. В этом выпуске мы поговорим про такое понятие как классы в HTML. Как вы уже знаете, ко всем элементам в HTML можно задать либо идентификатор, либо класс по которому мы будем уже общаться через средства CSS. Честно скажу, что при разработке сайтов я пользуюсь исключительно классами.

Содержание

1 Использование атрибута класса
2 Использование классов в Javascript
3 Использование множественных классов
4 Использование того же класса, но с разными тегами

Использование атрибута класса

Немного повторюсь, что атрибут с классом можно задавать для каждого элемента в отдельности, причем даже не один. Имя класса используется для CSS или Javascript, чтобы обращаться к ним для выполнения определенной задачи на странице. Обозначается простой точкой (.) за которым следует имя. Например:

В примере ниже зададим класс город

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<style>

.city {

background-color: tomato;

color: white;

padding: 10px;

}

</style>

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

Как результат получим:

Пример использования классов в HTML

Совет: Используйте классы для каждого элемента html

Примечание: Имя класса строго чувствительно к регистру.

Немного поясним пример выше. Мы применили имя класса .city к заголовкам и через стили задали заголовку размер и цвет. И сделали это один раз, а изменение вступило в силу для каждого элемента.

Использование классов в Javascript

JavaScript может обращаться к элементам с указанным именем класса с помощью метода getElementsByClassName ():

Пример: Когда пользователь нажимает на кнопку, скрываются все элементы, которые содержат имя «city»:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

function myFunction() {

var x = document.getElementsByClassName("city");

for (var i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

</script>

Состояние заголовков до нажатия по кнопке "Скрыть"

Теперь нажимаем на кнопку и заголовки пропадают

Заголовки с именем класса city исчезли

Использование множественных классов

Каждый элемент в HTML структуре может иметь не меньше одного класса, чтобы к ним можно было обращаться через CSS. Для этого нужно просто перечислить их через пробел, примерно как здесь:

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>

<h2 class="city">Tokyo</h2>

Применение множественных классов к HTML элементам

В приведенном выше примере мы отдельно задали выравнивание заголовка через класс .main А если бы не использовали его, ты выравнивание распространилось на все заголовки, а наличие еще одного класса исправило данную ситуацию.

Использование того же класса, но с разными тегами

Может быть выразился не совсем по-русски, но все же попытаюсь вам объяснить новички. У нас может использоваться один и тот же класс, но быть применен к разным тегам, а равно как и элементам HTML. Стиль применится и к одному и к другому элементу.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

1 2	<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p>

Применение одного и того же класса к разным элементам

Вполне допустимо, и так зачастую делают верстальщики-программисты, написание сначала элемента тега, а затем класса. Т.е к примеру мы хотим сделать заголовок центрировать, а тексту задать выравнивание справа. У них используется один и тот же класс. Нашу запись можно представить так:

h2.city {
  background-color: tomato;
  color: white;
  text-align:center;
  padding: 10px;
} 

p.city {
  text-align:right;
  background-color: tomato;
  padding: 10px;
}

h2.city {

background-color: tomato;

color: white;

text-align:center;

padding: 10px;

}

p.city {

text-align:right;

background-color: tomato;

padding: 10px;

}

Результат представляется вот так:

Жесткое обращение к элементу с одним и тем же классом

Т.е мы сначала обращаемся к элементу, а уже потом к классу. Делать пробелы НЕ НУЖНО!

На этом урок завершен. В следующем уроке мы поговорим про идентификаторы элементов, которые тоже часто используются в верстке страниц.

Я даже вам так скажу, есть два типа верстальщиков: те, кто пользуются исключительно классами, и те, кто пользуются «айдишниками» (id). Но это другая история следующего этапа. До скорых встреч друзья!

Рубрики: Обучение html