Что такое классы в CSS

А что, если мы хотим применить определённый набор CSS-свойств вообще к любому элементу на странице, не указывая конкретный тег, например h1 { ... } или p { ... }?

Для этого используются классы.

Классы определяются в css файлике. У класса есть имя и оно может быть любым, его придумывает программист. Этому имени сопоставляется определённый набор CSS-свойств.

/*создаем класс с именем imagePropsClass. Теперь свойства в этом классе можно применить к любому тегу на html странице*/ .imagePropsClass { width: 600px; /*ширина html тега*/ height: 350px; /*высота html тега*/ } /*ниже из прошлых уроков*/ h1, h2 { font-weight: 600; font-family: ‘Brush Script MT’, cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

Всё, что нужно, чтобы применить этот набор свойств к конкретному элементу на html странице, это указать это имя класса в аттрибуте class этого элемента

Page tab text

Давайте откроем только что написанную страницу в браузере.

Как видим, свойства класса imagePropsClass были успешно применены к картинке. Ее ширина стала 600px, а высота 250px.  

Как уже было сказано, класс можно применить вообще к любому тегу, то есть не только к img. В этом его смысл.

Что такое div блок и зачем он нужен

Изучите тег div в HTML: как использовать для структуры страницы, стилизации через CSS и группировки элементов. Практические примеры и свойства.
Time to read: 15

Теги структуры страницы. Семантические теги

Семантические теги HTML5: header, footer, section, aside. Улучшайте структуру страницы и SEO с помощью правильной разметки.
Time to read: 17

Cелекторы в CSS

Изучите CSS-селекторы: контекстные, дочерние и псевдоклассы. Уменьшайте количество классов в верстке с помощью правильного выбора селектора.
Time to read: 17