Jednostki w CSS3

CSS3 wprowadza wiele jednostek pomiarowych, które umożliwiają deweloperom precyzyjne formatowanie elementów na stronach internetowych. Każda jednostka ma swoje zastosowanie, od ustalania rozmiarów fontów, przez określanie marginesów, po definiowanie rozmiarów elementów na stronie. W tej lekcji przejrzymy różne jednostki CSS3, ich zastosowanie oraz przykłady kodu ilustrujące ich użycie.

Jednostki absolutne i relatywne

W CSS3 rozróżniamy jednostki absolutne (np. px, cm, mm) oraz relatywne (np. em, rem, vw, vh). Jednostki absolutne określają wielkość w stałych wymiarach, niezależnie od innych elementów, natomiast jednostki relatywne są zależne od innych wartości, takich jak rozmiar fontu rodzica (em) czy wymiary viewportu (vw, vh).

Przykład użycia różnych jednostek

Poniżej znajduje się przykład kodu HTML i CSS, który ilustruje użycie różnych jednostek CSS3. Przedstawiamy tutaj kilka podstawowych jednostek i ich zastosowanie w praktyce.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład jednostek w CSS3</title>
    <style>
        /* Styl dla tekstu wyśrodkowanego poziomo */
        .text-center {
            text-align: center;
        }
        /* Kontener z wykorzystaniem jednostek VW/VH */
        .viewport-container {
            width: 50vw; /* 50% szerokości viewportu */
            height: 50vh; /* 50% wysokości viewportu */
            border: 2px solid #000; /* Stała szerokość ramki */
            margin: 20px auto; /* Automatyczne wyśrodkowanie */
            display: flex;
            justify-content: center; /* Centrowanie poziome */
            align-items: center; /* Centrowanie pionowe */
        }
        /* Element z wykorzystaniem jednostek EM */
        .em-box {
            width: 10em; /* Szerokość względem fontu rodzica */
            height: 10em; /* Wysokość względem fontu rodzica */
            background-color: lightblue;
        }
        /* Przykład użycia REM */
        body {
            font-size: 16px; /* Bazowy rozmiar fontu */
        }
        .rem-box {
            font-size: 1.5rem; /* 1.5 raza większy niż bazowy rozmiar fontu */
        }
    </style>
</head>
<body>
    <div class="text-center">Tekst wyśrodkowany poziomo</div>
    <div class="viewport-container">
        <div class="em-box">EM Box</div>
    </div>
    <div class="rem-box text-center">
        Tekst z fontem 1.5rem
    </div>
</body>
</html>

Opis przykładu

.viewport-container: Wykorzystuje jednostki vw (viewport width) i vh (viewport height) do określenia szerokości i wysokości kontenera jako procenta wymiarów okna przeglądarki.
.em-box: Stosuje jednostki em do zdefiniowania rozmiarów w oparciu o rozmiar fontu elementu nadrzędnego.
.rem-box: Używa jednostek rem (root em), które są relatywne do rozmiaru fontu elementu <html>, co umożliwia łatwe skalowanie elementów względem bazowego rozmiaru fontu na stronie.

Podsumowanie

Jednostki w CSS3 oferują szerokie możliwości do precyzyjnego formatowania elementów na stronie. Rozumienie różnic między jednostkami absolutnymi i relatywnymi oraz kiedy ich używać jest kluczowe dla tworzenia responsywnych i dostępnych stron internetowych. Jednostki relatywne takie jak em, rem, vw, vh, vmin, i vmax pozwalają na większą elastyczność i lepszą skalowalność interfejsów użytkownika, szczególnie w kontekście różnorodnych rozdzielczości ekranów i preferencji użytkowników. Z kolei jednostki absolutne, takie jak px, cm, mm, są przydatne, gdy potrzebujemy precyzyjnie zdefiniować rozmiary, które nie powinny się zmieniać niezależnie od kontekstu wyświetlania.

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

Poprzedni

Następny