Классы в CSS – удобный путеводитель для новичков

CSS классы — когда их использовать

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

Шаг 1 — добавить класс в HTML

Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала пометить элементы атрибутом class = «class-name». Вот пример:

Контейнер 1
Контейнер 2
Контейнер 3

В этом примере я хочу создать три контейнера одинакового размера. Может быть, я хочу запустить галерею изображений или вставить изображения в виде HTML-ссылок для перехода на другие страницы. Также все емкости должны быть одинаковыми.

Посмотрим, что нужно сделать в нашем CSS:

div.box {высота: 200 пикселей; ширина: 200 пикселей; выравнивание текста: по центру; размер шрифта: 14 пикселей; цвет: # 090; цвет фона: #ddd; правое поле: 10 пикселей; }

Чтобы определить правило для определенного тега с помощью класса CSS, вместо простого определения тега {} мы используем tagname.classname {}. Точка между тэгом и именем класса определяет правило как класс CSS. Также обратите внимание, что внутри нет пробелов. Если вы поставите пробел в правиле, оно не будет работать должным образом.

В этом примере используется свойство margin-right: 10px. Эта линия гарантирует, что между тремя контейнерами будет расстояние 10 пикселей. Свойство float, установленное на left, гарантирует, что все контейнеры будут перемещены влево.

Подобная комбинация должна дать вам что-то вроде этого:


CSS-классы и идентификаторы: какие использовать?

Если вы не укажете класс

Чтобы показать вам, что ваш класс изображения блока CSS применяется только там, где вы хотите, вставьте дополнительный элемент

после «Контейнера 3»:
Контейнер 4

Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box {}, не применяется. Почему вы не указали значение класса.

Вот почему этот вариант использования классов CSS более гибкий, чем простой тег {}. На странице может быть много элементов

, но стили будут применяться только к тем, у которых есть соответствующее значение атрибута класса!

Использование более чем одного класса

В современном веб-дизайне редко бывает только один класс CSS для каждого элемента. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.

Чтобы указать, что вы хотите использовать несколько классов в CSS, вам необходимо добавить следующий класс, разделенный пробелом. Как здесь:

Контейнер 1
Контейнер 2
Контейнер 3

Все о CSS-анимации

Расположение каскадом

Поскольку стили CSS используют каскадную сортировку, вы размещаете свои классы в порядке важности. В этом случае мы хотим, чтобы class = «box» применялся перед class = «red». В противном случае class = «red» будет применен перед class = «box». Надеюсь, это ясно!

Давайте изменим наш код CSS:

div.box {высота: 200 пикселей; ширина: 200 пикселей; выравнивание текста: по центру; размер шрифта: 14 пикселей; цвет: # 090; цвет фона: #dddddd; правое поле: 10 пикселей; } div.red {цвет фона: #ffcccc; } div.green {цвет фона: #ccffcc; } div.blue {цвет фона: #ccccff; } Поскольку каждый из трех контейнеров имеет CSS-класс .box, свойства, установленные в div.box, применяются ко всем из них. Но все

также применяется дополнительный класс (красный, зеленый или синий). Окончательные результаты:
SVG-анимация с помощью CSS

Примечание: хотя div.box определяет цвет фона: #cccccc; После него определяются «цветные» классы. Например, в красном поле свойство background-color, указанное в div.red, переопределяет аналогичное свойство в div.box. Вот что подразумевается под каскадом: в CSS логика определяется сверху вниз. И при определении классов HTML слева направо.

CSS классы при создании макета сайта

Подумайте, какие элементы вам нужно использовать классы CSS для кодирования макета страницы. Вот несколько мыслей в качестве подсказки:

  • Все изображения, которые вы хотите превратить в значки или изображения продуктов, должны быть квадратными: например, img.thumbnail {width: 200px; высота: 200 пикселей; };
  • Стили ссылок для кнопок необходимо определять отдельно от обычных стилей ссылок. Например, a.button {};
  • Вам нужно применить другой цвет при наведении курсора на ссылки в навигации. Например, a.nav: hover {} a.nav: hover {}.

Значение по умолчанию

Нет.

Спецификация

Каждая спецификация проходит несколько этапов утверждения.

  • Рекомендация — эта спецификация одобрена W3C и рекомендуется в качестве стандарта.
  • Кандидат в рекомендацию: стандартная группа удовлетворена тем, что соответствует своим целям, но сообществу разработчиков нужна помощь во внедрении стандарта.
  • Предлагаемая рекомендация — на этом этапе документ передается в Консультативный совет W3C для окончательного утверждения.
  • Рабочий проект — более зрелая версия проекта после обсуждения и рассмотрения для рассмотрения сообществом.
  • Черновик редакции — Черновик доработанной версии редакции проекта.
  • Проект — это первый вариант стандарта.

Особняком стоит стандарт Living (Living) HTML: он не придерживается традиционной нумерации версий, так как находится в постоянном развитии и регулярно обновляется.

Атрибут id

Уникальный идентификатор. Он может быть только по одному на странице, поэтому он уникален. Чаще всего используются уникальные идентификаторы для дальнейшей ссылки на них с помощью сценариев JavaScript. Идентификатор может состоять из латинских букв, обоих регистров, цифр, тире и подчеркивания. В названии уникального идентификатора запрещено использовать русские буквы. Кстати, его еще называют «идентификатор стиля», «уникальное имя элемента». Вот пример:

HTML код

блок div

Атрибут contenteditable

Очень интересный, но contenteditable атрибут необходим, если вы знаете JavaScript. Например, он используется при быстром редактировании текста и его сохранении, в общем, для этого есть много применений. Атрибут contenteditable имеет два значения: true и false. True — разрешить редактирование, false — выключить редактирование. Ложь используется редко, если не указать этот атрибут, по умолчанию будет Ложь. Чтобы разрешить редактирование, чаще всего пишут contenteditable или contenteditable = «», параметр true является необязательным. Вот пример:

HTML код

Привет!

Атрибут style

Это третий способ моделирования элемента. Его значение — это стили, которые вы хотите применить. Вот пример:

HTML кодNSзаклепка

Атрибут dir

Редко используемый, но полезный атрибут. Установите направление текста: слева направо и справа налево. Атрибут dir принимает два значения: ltr — слева направо и rtl — справа налево. Вот пример:

HTML код

— Суббота

Пример

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

Чтобы исключить засветку экрана световыми потоками, оконные проемы оборудуют светорассеивающими шторами.

Атрибут title

Описание команды. Когда вы наводите курсор на элемент, если у него есть заголовок, он отображает содержимое этого атрибута в качестве подсказки. Полезно написать заголовок для ссылок и изображений. Помогите SEO оптимизировать ваш сайт. То есть поисковики сочтут его более актуальным. Например, если у вас есть какое-то изображение кнопки, чтобы пользователь понимал, для чего эта кнопка, вы можете добавить всплывающую подсказку к заголовку. Стиль этой всплывающей подсказки зависит от браузера и операционной системы и не может быть изменен с помощью HTML и CSS, но атрибут заголовка можно изменить с помощью сценариев JavaScript. Вот пример:

Ссылка на HTML-код

Идентификаторы

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

В файле CSS имя указывается с хешем в начале.

Таким образом, например:

# блок {цвет: # ff00ff; font: italic 16px Arial}

И к нужному элементу добавляется атрибут id = «block», например

id = «block»> Абзац с идентификатором

Вот пример:

Это нормальный абзац

id = «rosa»> Этот абзац уникален

Так в чем разница между классом и идентификатором?

Позвольте показать вам на примере:

id = «block» style = «display: none»>

А вот и я!!

Нажми на меня!!


id = «block1» style = «display: none»>

А здесь я!!

И нажмите на меня!!

В этом примере курсивом выделен сценарий, способный динамически обрабатывать блоки

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

Ну, я думаю, он объяснил что-то вроде этого..

Атрибут class

Задает класс стиля для связи определенного тега и стиля CSS. В HTML вы можете указать много классов и разделить их пробелом. Классы могут состоять из латинских букв, обоих регистров, цифр, тире и подчеркивания. Запрещено использовать русские буквы. Вот пример:

HTML код

Пункт

Атрибут hidden

Владелец (тег) этого атрибута скрыт от просмотра, и страница отображается так, как будто его там нет. Но в то же время это доступно через скрипт JavaScript. Вот пример:

HTML код

Ты не можешь меня видеть!

Источники

  • https://www.internet-technologies.ru/articles/ispolzovanie-css-klassov-udobnyy-putevoditel.html
  • https://webref.ru/html/attr/class
  • https://codebra.ru/ru/lessons-html/markup/9/2
  • http://www.webremeslo.ru/css/glava6.html

Оцените статью
Блог о Python