Szerokość i wysokość

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 37 z 76.

W CSS właściwości width i height służą do ustawiania wymiarów obszaru treści elementu. Te właściwości są niezbędne do kontrolowania rozmiaru i układu elementów na stronach internetowych.

Oto podstawowa składnia używania właściwości width i height:

selector {
    width: value;
    height: value;
}

width: Szerokość obszaru zawartości elementu.

height: Wysokość obszaru zawartości elementu.

value: Żądana wartość szerokości lub wysokości, którą można podać w pikselach (px), emach (em), procentach (%) lub innych prawidłowych jednostkach CSS. Możesz także użyć słowa kluczowego auto, aby przeglądarka automatycznie obliczyła szerokość lub wysokość na podstawie zawartości.

Na przykład:

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

img {
    width: 100%;
    height: auto;
}

W tym przykładzie wszystkie elementy <div> mają szerokość 300px i wysokość 200px, a wszystkie elementy <img> mają szerokość zajmującą 100% szerokości elementu nadrzędnego, a ich wysokość jest obliczana automatycznie, aby zachować proporcje.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z elementem <div> i obrazem <img>. Twoim zadaniem jest użycie właściwości width i height, aby ustawić wymiary tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div>. Ustaw width na 400px, a height na 250px.
Napisz regułę CSS, która wybiera element <img>. Ustaw width na 300px, a height na auto.

Spróbuj swoich sił

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>