Как сделать класс в css

Как сделать — Добавить активный класс к текущему элементу

Узнайте, как добавить активный класс к текущему элементу с помощью JavaScript.

Выделите активную/текущую (нажатую) кнопку:

Активный элемент

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

/* Style the buttons */
.btn <
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
>

/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover <
background-color: #666;
color: white;
>

CSS — Урок 3. Правила и селекторы CSS

CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег <body>, значит идем на страницу style.css и пишем следующий код:

Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках — его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.

Селекторы CSS

Селекторы по идентификатору

В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них — розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

Как сделать куб в HTML/CSS?

Для такого куба вам понадобится уже 6 дивов, чтобы было видно все грани. Создаем конструкцию такого типа:

Поскольку есть общие стили для всех сторон, то либо выделяйте отдельный класс (в данном случае side), либо назовите контейнер, например, section вместо div. Но я предпочитаю задать два класса и не путаться.

Позиционирование сторон происходит по тому же принципу, что и в прошлом примере. Но такой куб имеет больше шансов рассыпаться, поэтому нужно установить показатель перспективы (определяет его отдаленность от экрана) и сделать всю композицию флексовой, чтобы проще было её позиционировать.

Размеры заданы в em, вы можете задать любую другую единицу. Если не хотите, чтобы стенки "поехали", меняйте размеры пропорционально. Например, если вы устанавливаете размер сторон в 100 пикселей, в трансформе поменяйте значения на -50px или 50px, соответственно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *