Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
Как это работает
Чтобы атрибут class сработал, вам нужно не просто указать правильное имя класса, но и добавить его в CSS-файл или в теге .
Этот текст будет выделен. И настраиваем его в CSS:
.highlighted-text
В этом примере текст внутри элемента
с классом highlighted-text будет иметь жёлтый фон и размер шрифта 18px .
Этот текст будет выделен.
Использование атрибута class в JavaScript
Мы можем работать с классами и через JS. Например, найти все элементы с классом clickable и добавить обработчик, который покажет сообщение при клике на элемент.
const elements = document.querySelectorAll('.clickable'); elements.forEach(element => < element.addEventListener('click', () =>< alert('Клик!'); >); >); Теперь, когда пользователь кликает на любую из кнопок с классом clickable , появляется всплывающее окно с сообщением Клик! .
Сложные селекторы в CSS
В некоторых случаях нам нужно применить класс только к определенному HTML-тегу, игнорируя все другие. Например, так:
/* Только для элементовс классом special-text */ p.special-text
Тогда первый текст в этом случае будет синим, а второй — как есть.
Этот текст будет синим.
А этот останется без изменений. Вот как это работает:
Разработчики постоянно используют атрибут class . Он не только упрощает стилизацию, но и помогает лучше организовать код и проще его поддерживать.
Подробнее о сложных селекторах — в отдельной очень подробной статье, обязательно прочитайте:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как задать класс картинке в html
Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег
.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Атрибуты
align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt Альтернативный текст для изображения. border Толщина рамки вокруг изображения. height Высота изображения. hspace Горизонтальный отступ от изображения до окружающего контента. ismap Говорит браузеру, что картинка является серверной картой-изображением. longdesc Указывает адрес документа, где содержится аннотация к картинке. lowsrc Адрес изображения низкого качества. src Путь к графическому файлу. vspace Вертикальный отступ от изображения до окружающего контента. width Ширина изображения. usemap Ссылка на тег , содержащий координаты для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег IMG 
Lorem ipsum dolor sit amet.
Можно ли тегу img задать class? [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Вопрос вызван проблемой, которая больше не воспроизводится, или опечаткой. Хотя похожие вопросы могут быть уместны на этом сайте, решение для этого вопроса вряд ли поможет будущим посетителям. Обычно можно избежать подобных вопросов написанием и исследованием минимальной программы для воспроизведения проблемы до публикации вопроса.
Закрыт 1 год назад .
Можно ли тегу img задать class?
Задать картинке свой class
Как правильно задать путь к картинке
<!doctype html> <html lang="ru"> <head> <title>Город Краснодар</title> .
Как задать определенное положение тексту или картинке
Всем привет нужно конкретный размер сделать как на фото как вообще делать в дивах? а текст br?
Как задать для каждой страницы свой фон?
на всех страницах стоит одна картинка,а как на определенных страницах менять фон на другую.
Свой компонент от ListBox. Не могу задать свой тип для Items
День добрый господа. Нуждаюсь в вашей помощи. Суть такова, что я желаю создать свой компонент на.
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
следует смотреть не исходный код страницы, а в режиме просмотра браузера (например хрома, правой клавишей -> просмотр кода элемента) дальше думаю разберешься что куда прописать.
Второй вариант, мне кажется ты с точностью до наоборот перепутал позиции адреса большой и маленькой картики
Регистрация: 05.09.2011
Сообщений: 174
Здесь ничего не перепутано. Смотреть исходный код-это не выход и не способ. Мне нужно задать класс вот этому изображению
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
так дело в том, что li — никак не может быть изображением.
просто JS получает данные из атрибута data-thumb и где-то создает уже ваши изображения на странице (тег img)
Сообщение от souz21 