Podstawowe selektory CSS 3

By /

Html CSS

Selektory w CSS są jednym z fundamentów kaskadowego języka arkuszów stylów. Pozwalają one określić, do których elementów w dokumencie HTML mają zostać zastosowane określone style. Istnieje kilka rodzajów selektorów, ale najbardziej podstawowe i najczęściej używane to selektory typu, ID oraz klasy.

Selektor typu

Selektor typu pozwala na zastosowanie stylów do wszystkich elementów danego typu (tagu) w dokumencie. Na przykład, jeśli chcesz, aby wszystkie akapity na stronie miały tekst koloru czerwonego, użyjesz selektora typu.

Selektor ID

Selektor ID umożliwia stylizację konkretnego elementu, który ma przypisane unikalne ID. W dokumencie HTML każde ID powinno być unikalne, co oznacza, że styl zdefiniowany za pomocą selektora ID będzie dotyczył tylko jednego, konkretnego elementu.

Selektor klasy

Selektor klasy pozwala na zastosowanie stylów do wszystkich elementów oznaczonych określoną klasą. Klasy mogą być używane wielokrotnie w dokumencie, co oznacza, że styl zdefiniowany dla danej klasy zostanie zastosowany do wszystkich elementów z tą klasą.

Przykład użycia selektorów

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład selektorów CSS</title>
    <style>
        /* Selektor typu */
        p {
            color: red;
        }
        
        /* Selektor ID */
        #unique-element {
            font-weight: bold;
        }
        
        /* Selektor klasy */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- Komentarz: Przykład selektora typu -->
    <p>To jest akapit, który zostanie pokolorowany na czerwono.</p>
    
    <!-- Komentarz: Przykład selektora ID -->
    <p id="unique-element">To jest unikalny akapit o wzmocnionej czcionce.</p>
    
    <!-- Komentarz: Przykład selektora klasy -->
    <p class="highlight">To jest akapit z wyróżnionym tłem.</p>
</body>
</html>

Podsumowanie

Selektory są niezbędne do precyzyjnego określenia, których elementów dotyczą zdefiniowane style. Pozwalają na łatwe zarządzanie wyglądem strony, oferując możliwość stylizacji grup elementów, pojedynczych elementów o unikalnym identyfikatorze, czy też konkretnych typów elementów. Dzięki selektorom, tworzenie spójnych i estetycznie atrakcyjnych stron internetowych jest znacznie prostsze i bardziej intuicyjne.

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

 

 

Powiązane artykuły

Scroll to Top