65 lines
2.4 KiB
Markdown
65 lines
2.4 KiB
Markdown
|
---
|
|||
|
|
title: Class Selector
|
|||
|
|
localeTitle: Селектор классов
|
|||
|
|
---
|
|||
|
|
## Селектор классов
|
|||
|
|
|
|||
|
|
Селектор классов используется в CSS-файле для применения стиля к элементам HTML с соответствующим именем класса. В HTML вы можете установить имя класса для любого элемента, добавив атрибут «class».
|
|||
|
|
|
|||
|
|
Чтобы выбрать элементы с определенным классом, мы используем (.), Названный как символ периода, с именем класса.
|
|||
|
|
|
|||
|
|
Например .center { text-align: center; красный цвет; }
|
|||
|
|
|
|||
|
|
Здесь все элементы HTML с `class="center"` будут красными и центрированными.
|
|||
|
|
|
|||
|
|
Примеры:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<h1 class="test">This is a heading 1</h1>
|
|||
|
|
<p class="test">This is a paragraph 1</p>
|
|||
|
|
<h2 class="test">This is a heading 2</h2>
|
|||
|
|
<p class="test">This is a paragraph 2</p>
|
|||
|
|
<div class="test2 test3">This is a div 1</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Так как имя класса не уникально, атрибут класса HTML позволяет определять одинаковые стили для элементов с тем же именем класса. **Вот как вы можете выбрать класс в файле CSS для стилей элементов (обратите внимание на нотацию):**
|
|||
|
|
|
|||
|
|
**Все элементы класса `test` будут применены в этом стиле:**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.test {
|
|||
|
|
color: green;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Все `<p>` элементы класса `test` будут применяться с этим стилем:**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
p.test {
|
|||
|
|
border: 1px solid black;
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Все `<h1>` и `<h2>` Элементы класса `test` будут применяться с этим стилем:**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
h1.test, h2.test {
|
|||
|
|
color: blue;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Все элементы, которые имеют как класс `test2` и `test3` будут применяться в этом стиле:**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.test2.test3 {
|
|||
|
|
color: green;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Советы: Нет места между несколькими классами.**
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
Синтаксис и селектор CSS: [w3schools](https://www.w3schools.com/css/css_syntax.asp)
|