Что такое class в CSS

"Class css". "Что такое class в CSS". Пошагово разберем, как использовать класс,сколько вариантов есть использования class-a на странице html.

Разбираем с классом в css:

1. Что такое класс(class) в CSS!?
2. Пример использования класса(class) в файле css.
3. Пример использования класса(class) в теге style.
4. Скачать пример кода класс.

1. Что такое класс(class) в CSS!?

Class(как стиль) в css и атрибут class - не путать, хоть они похожи, но это не одно и тоже! см. сравнительную таблицу.

Дадим определение класс(class) в CSS!?

Класс(class) — это селектор, позволяющий применять одинаковые стили к нескольким HTML‑элементам.

Класс(class) в CSS обеспечивает:

Использование стилей;

Модульность кода;

Лёгкость поддержки и масштабирования.

Синтаксис класс(class) в CSS.

css

.имя_класса {

property(свойство): value(значение);

/* другие свойства */

}

Чем class отличается от id!?

Class отличается от id тем, что может использоваться неограниченное количество раз на странице...

2. Пример использования класса(class) в файле css.

Для того, чтобы создать пример использования "класса(class) в css" вам понадобится:

Как вы наверное знаете, существует 3 способа css... для класса использование в тег style невозможно, поэтому вас остается только 2 способа...

Рассмотрим пример использования класса(class) в файле css.

Первым шагов вам потребуется сделать CSS‑файл.

Далее его прикрепить к страницестраница html.
Рассмотрим на живом примере, на файле, который я сделал...

https://jsphp.ru/example/css/class/css.css

Создаем новый класс в файле css:

Данный класс помещаем в выше приведенный файл "css.css".

.reds{

color:red;

}

Создаем новый класс в файле Html :

Возьмем для нашего примера тег div, один с классом, другой с вышеприведенным классом и помещаем на страницу пример.

<div>Здесь тег без класса<div>

<div class="reds">Здесь тег с классом<div>

Скачать пример класс в файле css:

Данный пример можно скачать по ссылке.

3. Пример использования класса(class) в теге style.

В следующем примере рассмотрим "применение класса(class)" в теге style,для этого вам понадобится:

Новая страница html...

Внутри тега head размещаем тег style.

Внутри прописываем уже выше приведенный класс :

<style>

.reds{

color:red;

}

</style>

В теле страницы снова помещаем два div :

<div>Здесь тег без класса<div>

<div class="reds">Здесь тег с классом в теге style<div>

Смотрим, что у нас получилось с классом внутри тега style...

Живой пример класса внутри тега style.

4. Скачать пример кода класс.

Скачать пример кода класса(class) в теге style.

Скачать можно здесь.

Всего комментариев : Comments+ 2.0

+ =