Jednostki w CSS3

By /

Html CSS

Jednostki w CSS3 są niezbędne do określania wielkości, odległości, rozmiarów czcionek, marginesów, dopełnień i innych wartości wymiarowych w stylach. Wybór odpowiedniej jednostki ma kluczowe znaczenie dla responsywności strony, jej dostosowania do różnych urządzeń oraz ogólnej spójności projektu.

Podstawowe jednostki w CSS3:

  • Piksele (px): Stała jednostka, reprezentująca pojedynczy piksel na ekranie.
  • Procenty (%): Relatywna jednostka, określająca wartość w stosunku do innego elementu, np. szerokość elementu jako procent szerokości jego kontenera.
  • Em (em): Relatywna jednostka, bazująca na rozmiarze czcionki elementu. Używana głównie do skalowania rozmiarów czcionek i odstępów w tekście.
  • Rem (rem): Podobnie jak em, ale bazuje na rozmiarze czcionki elementu <html>, co ułatwia skalowanie.
  • Viewport width (vw)/viewport height (vh): Procentowa wielkość względem szerokości lub wysokości viewportu przeglądarki.
  • Centymetry (cm), milimetry (mm), cale (in), punkty (pt): Jednostki fizyczne, rzadziej używane w projektach webowych, ale mogą być przydatne np. przy druku.

Przykład użycia jednostek w CSS3

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Jednostki w CSS3</title>
    <style>
        body {
            font-size: 16px; /* Podstawowy rozmiar czcionki */
        }
        .box {
            width: 50%; /* Szerokość jako procent szerokości kontenera */
            padding: 10px; /* Padding w pikselach */
        }
        h1 {
            font-size: 2em; /* Rozmiar czcionki dwa razy
                                większy niż bieżący */
        }
        p {
            margin-bottom: 1rem; /* Margines dolny względem
                                   rozmiaru czcionki elementu <html> */
        }
        .viewport-height {
            height: 50vh; /* Wysokość jako 50% wysokości viewportu */
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Przykład jednostek w CSS3</h1>
        <p>Ten tekst ma margines dolny 1rem.</p>
        <div class="viewport-height">Wysokość tego diva to 50vh.</div>
    </div>
</body>
</html>

Podsumowanie

Zrozumienie różnych jednostek w CSS3 i umiejętność ich stosowania w odpowiednich kontekstach jest niezbędne do efektywnego projektowania stron internetowych. Jednostki relatywne takie jak em, rem, vw/vh są kluczowe dla tworzenia responsywnych layoutów, które dostosowują się do różnych rozmiarów ekranu. Piksele pozostają przydatne dla stałych wartości, ale ich nadmierne stosowanie może utrudniać skalowanie projektu. Wybór odpowiednich jednostek ma zatem bezpośredni wpływ na użyteczność, dostępność i estetykę strony internetowej.

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

 

 

Powiązane artykuły

Scroll to Top