Właściwość width w CSS3

By /

CSS

Właściwość width w CSS3 jest podstawowym narzędziem do kontrolowania szerokości elementów w projektowaniu stron internetowych. Pozwala ona na określenie szerokości elementu, co ma kluczowe znaczenie dla układu strony, responsywności oraz ogólnej prezentacji treści. Właściwość width może przyjmować różne wartości, takie jak piksele (px), procenty (%), em, vw (viewport width) i wiele innych, co daje projektantom i programistom webowym duże możliwości dostosowania wyglądu stron internetowych do różnych urządzeń i rozdzielczości ekranu.

Przykład użycia width w CSS3

Poniżej znajduje się prosty przykład, który ilustruje użycie właściwości width w CSS3. Przykład zawiera prosty dokument HTML z kilkoma elementami oraz CSS, który pokazuje różne sposoby zastosowania width.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania width w CSS3</title>
    <style>
        /* Styl dla kontenera */
        .container {
            width: 80%;
            margin: auto;
            border: 2px solid black;
            padding: 20px;
        }

        /* Styl dla stałej szerokości */
        .fixed-width {
            width: 200px;
            background-color: lightblue;
            margin-bottom: 10px;
            padding: 10px;
        }

        /* Styl dla szerokości procentowej */
        .percentage-width {
            width: 50%;
            background-color: lightgreen;
            margin-bottom: 10px;
            padding: 10px;
        }

        /* Styl dla szerokości viewport */
        .viewport-width {
            width: 50vw;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="fixed-width">Szerokość stała 200px</div>
    <div class="percentage-width">Szerokość procentowa 50%</div>
    <div class="viewport-width">Szerokość viewport 50vw</div>
</div>

</body>
</html>

 

Omówienie

  • Kontener ma szerokość ustawioną na 80% szerokości okna przeglądarki, co umożliwia responsywne dostosowanie się do różnych rozmiarów ekranu.
  • Element z stałą szerokością ma ustawioną szerokość na 200px, co oznacza, że jego szerokość nie zmieni się niezależnie od rozmiaru kontenera czy okna przeglądarki.
  • Element z szerokością procentową ma szerokość ustawioną na 50% szerokości swojego kontenera rodzica, co pozwala mu dostosować się do zmian wielkości kontenera.
  • Element z szerokością viewport używa jednostki vw (viewport width), co oznacza, że jego szerokość to 50% szerokości okna przeglądarki, zapewniając responsywność względem szerokości okna przeglądarki.

Podsumowanie

Właściwość width w CSS3 jest fundamentalnym narzędziem w projektowaniu responsywnych i atrakcyjnych wizualnie stron internetowych. Dzięki różnorodności jednostek, jakich można użyć (px, %, vw, itp.), pozwala na precyzyjne kontrolowanie szerokości elementów na stronie. Zrozumienie i właściwe stosowanie tej właściwości jest kluczowe dla każdego front-end dewelopera, chcącego tworzyć strony dostosowane do potrzeb użytkowników korzystających z różnych urządzeń.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top