Как задать класс картинке в html

Результат применения классов к тегам и показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        АлмазАметистСапфир
Название
Цвет
Твердость по Моосу
 
 
Белый
10
 
 
Рубин
Красный
9
 
 
Голубой
7
 
 
Изумруд
Зеленый
8
 
 
Голубой
9
 
 
  

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент 
  

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .

Вопросы для проверки

1. Какое имя класса написано правильно?

1. 2layer1
2. 1layer
3. Яndex
4. pink-floyd
5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

При использовании следующего стиля?

1. Зелёный.
2. Синий.
3. Жёлтый.
4. Оранжевый.
5. Чёрный.

1. div[iddqd]
2. div.iddqd
3. iddqd.div
4. div#iddqd
5. div=iddqd

4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Изображения¶

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

Основным способом включения изображений является тег с атрибутом src , ссылающимся на ресурс изображения, и атрибутом alt , описывающим изображение.

img src="images/eve.png" alt="Eve" /> 

1 2 3 4 5 6

img src="images/eve.png" alt="Eve" srcset="images/eve.png 400w, images/eve-xl.jpg 800w" sizes="(max-width: 800px) 400px, 800px" /> 

1 2 3 4 5 6 7 8

picture> source src="images/eve.png" media="(max-width: 800px)" /> source src="images/eve-xl.jpg" /> img src="images/eve.png" alt="Eve" /> picture> 

В HTML также поддерживается включение SVG-изображений с помощью напрямую, хотя SVG-изображения с расширением .svg (или в виде data-uri) могут быть встроены с помощью элемента .

Как минимум, каждое изображение переднего плана должно содержать атрибуты src и alt .

Файл src — это путь и имя файла встроенного изображения. Атрибут src используется для указания URL-адреса изображения. Затем браузер получает актив и отображает его на странице. Этот атрибут необходим для ; без него нечего рендерить.

Атрибут alt содержит альтернативный текст для изображения, представляющий собой описание изображения для тех, кто не может видеть экран (вспомните поисковые системы и вспомогательные технологии, и даже Alexa, Siri и Google Assistant), и может быть показан браузером, если изображение не загружается. Помимо пользователей с медленными сетями или ограниченной пропускной способностью, текст alt невероятно полезен в HTML-сообщениях, поскольку многие пользователи блокируют изображения в своих почтовых приложениях.

img src="path/filename" alt="descriptive text" /> 

Если изображение имеет тип файла SVG, включите также role=»img» , что необходимо в связи с VoiceOver ошибками.

img src="switch.svg" alt="light switch" role="img" /> 

Эти примеры включают косую черту в конце, также ошибочно называемую самозакрывающимся тегом; это свойство XML, включая SVG и XHTML, но не HTML. Подробнее об этом см. примечание в модуле forms.

Написание эффективных описаний изображений alt .¶

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

Чтобы написать эффективный альтернативный текст, представьте, что вы читаете всю страницу человеку, который не может ее видеть. С помощью элемента semantic пользователи и боты, читающие с экрана, получают информацию о том, что данный элемент является изображением. Включать в alt фразу «This is an image/screenshot/photo of» является излишним. Пользователю не нужно знать, что это изображение, но ему нужно знать, какую информацию передает изображение.

Обычно вы не говорите: «Это зернистое изображение собаки в красной шапке». Скорее, вы передадите то, что передает изображение в контексте остальной части документа, а то, что вы передадите, будет меняться в зависимости от контекста и содержания окружающего текста.

Например, фотография собаки будет описана по-разному, в зависимости от контекста. Если Пушистик — это аватарка рядом с отзывом о корме для собак Yuckymeat, то достаточно alt=»Пушистик» .

Если фотография является частью страницы усыновления Пушистика на сайте приюта для животных, то целевой аудиторией является потенциальный родитель собаки. Текст должен описывать информацию, переданную на изображении, которая важна для усыновителя и не дублируется в окружающем тексте. Уместно более длинное описание, например, alt=»Пушистик, трехцветный терьер с очень короткой шерстью, с теннисным мячиком во рту» . В тексте страницы, посвященной усыновлению, обычно указываются вид, порода, возраст и пол усыновляемого животного, поэтому их не нужно повторять в тексте alt. Но в письменной биографии собаки, скорее всего, не будет указана длина шерсти, цвет и предпочтения в игрушках. Обратите внимание, что мы не описывали изображение: потенциальному владельцу собаки не нужно знать, находится ли она в помещении или на улице, или что у нее красный ошейник и синий поводок.

При использовании изображений для иконографии, поскольку атрибут alt обеспечивает доступное имя, передавайте смысл пиктограммы, а не описание изображения. Например, атрибут alt значка лупы — search . У пиктограммы, похожей на дом, alt-текстом является home . Описание значка 5-дюймовой дискеты — save . Если есть две иконки Пушистика, используемые для обозначения лучших практик и антипаттернов, то у улыбающейся собаки в зеленом берете может быть установлен атрибут alt=»good» , а у рычащей собаки в красном берете — alt=»bad» . При этом следует использовать только стандартную иконографию, а при использовании нестандартных пиктограмм, таких как «хороший» и «плохой» пушистик, включать легенду и гарантировать, что пиктограммы не являются единственным способом расшифровки значения элементов пользовательского интерфейса,

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

Опускайте информацию, которую пользователь уже знает из контекста и которая иным образом осведомлена в контенте. Например, если вы находитесь на обучающей странице по изменению настроек браузера, а страница посвящена щелчку по значкам в браузере chrome, то URL страницы на снимке экрана не важен. Ограничьте alt темой: как изменить настройки. В качестве alt можно написать: «Значок настроек находится в навигационной панели под полем поиска». Не указывайте «screenshot» или «machinelearningworkshop», так как пользователю не нужно знать, что это скриншот, и не нужно знать, где был технический писатель, когда писал инструкцию. Описание изображения основывается на контексте того, зачем оно было включено.

Если изображение показывает, как найти номер версии браузера по адресу chrome://version/ , включите URL в содержимое страницы в качестве инструкции, а в качестве атрибута alt укажите пустую строку, поскольку изображение не дает никакой информации, которая не содержится в окружающем тексте.

Если изображение не несет никакой дополнительной информации или является чисто декоративным, то атрибут alt все равно должен присутствовать, но в виде пустой строки.

img src="svg/magazine.svg" alt="" role="none" /> 

На сайте MachineLearningWorkshop.com имеется семь изображений переднего плана, следовательно, семь изображений с атрибутами alt: выключатель пасхального яйца, значок руководства, две биографические фотографии Хэла и Евы и три аватара блендера, пылесоса и тостера. Изображение переднего плана, похожее на журнал, является единственным чисто декоративным. На странице также есть два фоновых изображения, которые также являются декоративными и, поскольку добавлены с помощью CSS, недоступны.

Журнал, будучи чисто декоративным, имеет пустой атрибут alt и role = none , поскольку изображение является чисто презентационным SVG. SVG-изображения, если они имеют смысл, должны содержать атрибут role=»img» .

img src="svg/magazine.svg" alt="" role="none" /> 

В нижней части страницы расположены три обзора, каждый из которых содержит изображение плаката. Обычно текст alt — это имя человека, изображенного на плакате.

1 2 3 4 5

img src="images/blender.svg" alt="Blendan Smooth" role="img" /> 

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

img src="images/blender.svg" alt="blender" role="img" /> 

Фотографии преподавателей — это не просто аватары, это биографические изображения, поэтому они требуют более подробного описания.

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

1 2 3 4 5

img src="svg/hal.svg" role="img" alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." /> 

Поскольку это шуточный сайт, вместо этого предоставьте информацию, которая уместна в контексте шутки:

1 2 3 4 5

img src="svg/hal.svg" role="img" alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." /> 

Если бы вы читали эту страницу другу по телефону, ему было бы все равно, как выглядит красная точка. В данном случае важна история создания ссылки на фильм.

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

Атрибуты src и alt являются минимальными требованиями для встраиваемых изображений. Есть еще несколько атрибутов, которые мы должны обсудить.

Отзывчивые изображения¶

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

srcset атрибут¶

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

Для элемента может использоваться один атрибут srcset , но этот srcset может ссылаться на несколько изображений. Атрибут srcset принимает список значений, разделенных запятыми, каждое из которых содержит URL-адрес актива, за которым следует пробел, а затем дескрипторы для данного варианта изображения. Если используется дескриптор ширины, то для каждого параметра srcset , кроме последнего, необходимо также включить атрибут sizes с медиазапросом или размером источника. Стоит ознакомиться с разделами, посвященными отзывчивым изображениям с srcset и описательным синтаксисам.

При совпадении изображений srcset будет иметь приоритет над изображением src .

и ¶

Браузер будет рассматривать каждый дочерний элемент и выбирать среди них наиболее подходящий. Если совпадений не найдено, то выбирается URL атрибута src элемента . Доступное имя берется из атрибута alt вложенного элемента . Стоит также ознакомиться с разделами Learn, посвященными элементу и прескриптивные синтаксисы.

Дополнительные возможности производительности¶

Ленивая загрузка¶

Атрибут loading указывает браузеру, поддерживающему JS, как загружать изображение. Значение по умолчанию eager означает, что изображение загружается сразу же после разбора HTML, даже если оно находится за пределами видимой области просмотра. При установке значения loading=»lazy» загрузка изображения откладывается до тех пор, пока оно, скорее всего, не попадет в область просмотра. «Вероятность» определяется браузером на основе расстояния, на котором изображение находится от области просмотра. Это значение обновляется по мере прокрутки изображения пользователем. Ленивая загрузка позволяет экономить полосу пропускания и процессор, повышая производительность для большинства пользователей. Если JavaScript отключен, то в целях безопасности все изображения по умолчанию будут иметь значение eager .

img src="switch.svg" alt="light switch" loading="lazy" /> 

Соотношение сторон¶

Браузеры начинают рендеринг HTML с момента его получения и делают запросы к активам по мере их появления. Это означает, что когда браузер встречает тег и делает запрос, он уже отрисовывает HTML. А загрузка изображений может занять некоторое время. По умолчанию браузеры не резервируют место для изображений, кроме размера, необходимого для отображения текста alt .

Элемент всегда поддерживал атрибуты height и width , не имеющие единицы измерения. Эти свойства вышли из употребления в пользу CSS. В CSS можно определять размеры изображения, часто задавая одно измерение, например max-width: 100%; , чтобы обеспечить сохранение соотношения сторон. Поскольку CSS обычно включается в , он разбирается до того, как встретится какой-либо . Однако без явного указания height или соотношения сторон, зарезервированное место является высотой (или шириной) текста alt . Поскольку большинство разработчиков указывают только ширину, получение и отрисовка изображений приводит к кумулятивному сдвигу макета, что вредит web vitals. Для решения этой проблемы браузеры поддерживают соотношение сторон изображения. Включение атрибутов height и width в действует как подсказки по размерам, сообщая браузеру соотношение сторон, что позволяет зарезервировать необходимое количество места для последующего рендеринга изображения. Указывая в изображении значения высоты и ширины, браузер узнает соотношение сторон этого изображения. Когда браузер сталкивается с одним измерением, как в нашем примере с 50%, он сохраняет место для изображения, придерживаясь CSS-измерения, а другое измерение сохраняет соотношение сторон по ширине и высоте.

1 2 3 4 5 6 7

img src="switch.svg" alt="light switch" role="img" width="70" height="112" /> 

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

Другие возможности изображения¶

Элемент также поддерживает атрибуты crossorigin , decoding , referrerpolicy и, в браузерах на базе Blink, fetchpriority . Редко используется, если изображение является частью карты на стороне сервера, то для пользователей, не имеющих указательных устройств, следует включить булевский атрибут ismap и вложить в ссылку.

Атрибут ismap не нужен и даже не поддерживается для , поскольку координаты x и y места щелчка передаются во время отправки формы, добавляя значения к имени ввода, если таковое имеется. Например, что-то вроде &imageSubmitName.x=169&imageSubmitName.y=66 будет передано вместе с формой, когда пользователь щелкнет на изображении, отправив его. Если изображение не имеет атрибута name , то отправляются значения x и y: &x=169&y=66 .

Атрибут class

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

Синтаксис

class="имя"

Значения

Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.

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

Применяется к тегам

Пример

HTML5 IE Cr Op Sa Fx

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

Статьи по теме

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Как это работает

Чтобы атрибут 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 . Он не только упрощает стилизацию, но и помогает лучше организовать код и проще его поддерживать.

Подробнее о сложных селекторах — в отдельной очень подробной статье, обязательно прочитайте:

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 27 февраля 2024

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 1 ноября 2023

Специальные символы в HTML

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 23 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

• 18 сентября 2023

В чём отличия цитат

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 12 сентября 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 13 июня 2023

Как отличить h1, h2 и h3

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

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

• 8 июня 2023

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

�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

Как создавать адаптивные изображения. Атрибут srcset

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

Давайте рассмотрим несколько способов создания адаптивных изображений.

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

• 25 мая 2023