Стилизация изображений CSS

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Добавление изображений в index.html

Во-первых, вам нужно добавить изображение в папку images. Для примера вы можете использовать наш логотип или любое изображение в формате JPEG, JPG или PNG. Представленные здесь правила также будут работать лучше, если размеры вашего изображения составляют примерно 150-200 пикселей на 150-200 пикселей.

Сохраните выбранное изображение в папке images. Вы можете сохранить его под любым именем, но вам нужно будет изменить путь к файлу изображения в следующем примере (мы используем условное имя файла small-profile.jpeg).

Затем удалите все содержимое файла index.html (за исключением первой строки кода: <link rel = “stylesheet” href = “css / styles.css”>) и добавьте следующий фрагмент кода:

<img src="images/small-profile.jpeg" alt="8host’s logo">

Этот фрагмент кода показывает, как использовать тег <img> для вставки изображения и как сообщить браузеру расположение нужного файла (images/small-profile.jpeg). Убедитесь, что вы указали правильный путь к файлу.

Примечание: Чтобы скопировать путь к файлу изображения с помощью Visual Studio Code, наведите курсор мыши на иконку изображения в левой панели, нажмите CTRL и кликните левой (на Mac) или правой (на Windows) кнопкой мыши, а затем выберите Copy Path.

Обязательно скопируйте относительный путь к файлу изображения, а не абсолютный путь. Относительный путь указывает на расположение файла относительно текущего рабочего каталога; а абсолютный путь определяет расположение файла относительно корневого каталога. В нашем примере работать будут оба пути, но при публикации сайта в сети работать будет только относительный путь. Поскольку наша конечная цель – создать простой веб-сайт, который можно выложить в сеть, при добавлении элементов <img> советуем использовать относительные пути.

Мы также добавили альтернативный текст «8host’s logo» при помощи атрибута alt. При создании веб-сайтов ко всем изображениям следует добавлять альтернативный текст, чтобы обеспечить доступность сайта для людей, использующих скринридеры.

Читайте также: Добавление изображения на веб-страницу с помощью HTML

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

Вы должны страницу с изображением, больше ничего на ней не будет:
8host’s logo

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

Добавление стилей к изображению

Теперь, когда ваш файл index.html содержит изображение, мы добавим CSS-правило для его стилизации. Откройте файл styles.css. Сотрите все, что в нем есть на данный момент (если вы следовали всем мануалам из этой серии, там могут остаться фрагменты кода из предыдущих примеров), и добавьте следующий набор правил:

. . .
img {
. border: 2px solid red;
. border-radius: 8px;
. width: 200px;
}

Сохраните файл styles.css и перезагрузите файл index.html в браузере. Теперь вы должны увидеть ваше изображение с новыми свойствами стиля:
8host’s logo

Наше новое CSS-правило содержит значения для трех различных свойств HTML-элемента <img>. Давайте рассмотрим каждое из них подробно:

  • Свойство border позволяет добавить границу изображения и указать ее размер, стиль и цвет. Обратите внимание, это свойство CSS может содержать несколько значений. В этом правиле мы задали сплошную красную границу шириной 2 пикселя (2px solid red).
  • Свойство border-radius определяет радиус углов элемента, позволяя скруглять края. В этом правиле мы указали радиус в 8 пикселей. Попробуйте изменить это значение, чтобы увидеть, как оно влияет на отображение вашей картинки.
  • Свойство width определяет ширину изображения. В этом правиле мы указали ширину в 200 пикселей. Обратите внимание, если вы не определите значение высоты, она будет установлена автоматически, отображая исходные пропорции изображения. Попробуйте изменить высоту и ширину одновременно, чтобы посмотреть, что произойдет.

Применение стиля к нескольким изображениям

Обратите внимание, если вы добавите в свой HTML-документ другие изображения, они также будут реагировать на CSS-правила для элементов <img> – это значит, что они будут иметь такой же стиль. Чтобы посмотреть, как это работает на практике, добавьте с помощью элемента <img> второе изображение в файл index.html. если у вас нет на примете второго изображения, можно просто дублировать первый элемент <img>:

<img src="images/small-profile.jpeg" alt="8host’s logo">
<img src="images/small-profile.jpeg" alt="8host’s logo">

Обязательно проверьте путь к файлу изображения. Сохраните файл index.html и загрузите его в браузере. На вашей веб-странице должны отображаться две картинки, стилизованные одинаково – согласно одному и тому же набору CSS-правил для тега <img>:
8host’s logo 8host’s logo

Чтобы еще немного попрактиковаться в работе со стилями для изображений, попробуйте самостоятельно изменить значения в CSS- правиле, которое вы только что создали в файле styles.css. Сохраните и перезагрузите index.html, чтобы увидеть результат.

Заключение

В этом мануале вы узнали, как изменить внешний вид изображения – его размер, цвет, высоту, ширину и радиус границы. Мы еще вернемся к стилизации изображений, когда начнем создавать наш тестовый веб-сайт.

Теперь вы знаете, как применить один набор правил стиля ко всем элементам <img>. О том, как применять разные правила к отдельным элементам <img> или к их группам, мы поговорим в следующем руководстве: вы узнаете, как создавать классы CSS, которые позволят сортировать HTML-элементы и применять к ним разные стили CSS.

Tags: , , ,

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