Страница CSS img: основы и примеры использования

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a language used for styling web pages, allowing for the customization of the appearance and formatting of HTML elements. One important element of a web page is images, which can be styled using CSS.

To style images in CSS, the 'img' selector is used. Selectors allow you to choose specific elements on a web page and apply specific styles to them. Let's take a look at some code examples that demonstrate the capabilities of CSS for working with images.

1. Changing the size of an image:

To change the size of an image, the 'width' and 'height' properties can be used. For example, the following code sets the width of an image to 300 pixels and the height to 200 pixels:

img {
  width: 300px;
  height: 200px;
}

2. Adding margins around an image:

To add margins around an image, the 'margin' property can be used. For example, the code below adds 10 pixels of margin on the left and right sides, and 20 pixels of margin on the top and bottom:

img {
  margin: 20px 10px;
}

3. Creating hover effects on an image:

With the help of the ':hover' pseudo-class, you can create effects that will be applied to an image when it is hovered over. For example, the following code increases the size of an image to 150% when hovered over:

img:hover {
  transform: scale(1.5);
}

4. Changing the opacity of an image:

To change the opacity of an image, the 'opacity' property can be used. A value between 0 and 1 determines the degree of transparency. For example, the following code makes the image completely transparent:

img {
  opacity: 0;
}

5. Setting a background image:

The 'background-image' property can be used to set a background image for an element. For example, the following code sets the image 'bg-image.jpg' as the background for an element:

img {
  background-image: url('bg-image.jpg');
}

These are just some examples of what can be achieved using CSS to style images on a web page. CSS provides many other properties and capabilities for working with images and creating a beautiful and aesthetically pleasing appearance for your website.