68 lines
3.4 KiB
Markdown
68 lines
3.4 KiB
Markdown
|
---
|
|||
|
|
title: CSS Classes
|
|||
|
|
localeTitle: Классы CSS
|
|||
|
|
---
|
|||
|
|
## Классы CSS
|
|||
|
|
|
|||
|
|
Классы - это эффективный способ группировки элементов HTML, чтобы они могли использовать одни и те же стили. Классы CSS (каскадные таблицы стилей) могут использоваться для упорядочивания и оформления элементов веб-страницы.
|
|||
|
|
|
|||
|
|
При написании HTML вы можете добавлять классы к элементу. Просто добавьте атрибут `class="myclass"` к элементу. Несколько элементов могут иметь один и тот же класс, а один элемент может иметь несколько классов. Вы можете назначить несколько классов элементу, добавив все необходимые имена классов, разделенные пробелом, к атрибуту `class` в HTML.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<h1 class="super-man other-class third-class">"Here I come to save the day!"</h1>
|
|||
|
|
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Затем вы можете стилизовать эти элементы с помощью CSS. Классы ссылаются на период (.) Перед ними в CSS, но вы не должны помещать периоды в свой HTML.
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.super-man {
|
|||
|
|
color: red;
|
|||
|
|
background-color: blue;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Этот код дает синий фон и красный цвет текста всем элементам, которые имеют класс `super-man` . [Просмотрите этот пример в CodePen](https://codepen.io/Tlandis/pen/RLvomV) .
|
|||
|
|
|
|||
|
|
Вы также можете объявить более одного класса для своего элемента, например:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="ironMan alfred">
|
|||
|
|
We're going to save you.
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Затем в вашем файле css:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.ironMan{
|
|||
|
|
color:red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.alfred{
|
|||
|
|
background-color: black;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Примечание:** имена классов традиционно являются строчными, каждое слово в имени многословного класса разделяется дефисом (например, «супер-человек»).
|
|||
|
|
|
|||
|
|
Вы также можете комбинировать классы в одной строке:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.superMan .spiderMan {
|
|||
|
|
color: red;
|
|||
|
|
background-color: blue;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вы можете увидеть результат приведенного выше кода [здесь](https://codepen.io/Tlandis/pen/RLvomV) . Узнайте , как объединить классы CSS , используя селекторы [здесь](https://www.w3schools.com/css/css_combinators.asp) .
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
* [CSS Class Selector, w3 школы](https://www.w3schools.com/cssref/sel_class.asp)
|
|||
|
|
* [Классы HTML, w3 Школы](https://www.w3schools.com/html/html_classes.asp)
|
|||
|
|
* [CSS-уловок](https://css-tricks.com/how-css-selectors-work/)
|
|||
|
|
* [Как код в HTML5 и CSS3](http://howtocodeinhtml.com/chapter7.html)
|
|||
|
|
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)
|