Селекторы CSS - Селекторы классов

Селекторы классов CSS - это селектор CSS, используемый для применения стиля к определенному элементу. Селекторы классов определяются путем добавления одного или нескольких классов к элементам HTML. Селектор класса начинается с точки (.), за которой следует имя класса.

Ниже я приведу несколько примеров;

• .yohendis:

Выбирает все элементы с классом "yohendis".

• .container .yohendis:

Выбирает все элементы с классом "yohendis" под элементом с именем "container".

• .yohendis1.yohendis2:

Выбирает все элементы с классами "yohendis1" и "yohendis2".

• .yohendis1, .yohendis2:

Выбирает все элементы с классом с именем "yohendis1" или "yohendis2".

*(yohendis: задается как любое имя).

Давайте рассмотрим его использование на нескольких примерах подробнее;

1. Сделать цвет заголовков таблиц синим:

.tablobasligi {
  color: blue;
}

→HTML-код:

<table>
  <thead>
    <tr>
      <th class="tablobasligi">Başlık 1</th>
      <th class="tablobasligi">Başlık 2</th>
      <th class="tablobasligi">Başlık 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>İçerik 1</td>
      <td>İçerik 2</td>
      <td>İçerik 3</td>
    </tr>
  </tbody>
</table>

2. Чтобы добавить рамку ко всем изображениям:

.resimkenarligi {
  border: 1px solid black;
}

→ HTML-код:

<img src="image1.jpg" class="resimkenarligi">
<img src="image2.jpg" class="resimkenarligi">
<img src="image3.jpg" class="resimkenarligi">

3. изменить цвет фона только одного раздела:

.ozelalanrengi {
  background-color: yellow;
}

→HTML-код:

<div class="ozelalanrengi">
  <h2>Bu bölüm özel bir bölümdür</h2>
  <p>Bu bölümün içeriği burada.</p>
</div>

<div>
  <h2>Bu bölüm normal bir bölümdür</h2>
  <p>Bu bölümün içeriği burada.</p>
</div>

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