SELEKTORY - CSS

Czym są selektory CSS?

Selektory CSS to mechanizm, który pozwala wskazać elementy HTML, do których mają zostać zastosowane style. Dzięki selektorom CSS możemy precyzyjnie określić, które elementy strony internetowej mają zostać ostylowane.

Selektor działa jak „adres” elementu w dokumencie HTML – mówi przeglądarce, który element ma zostać zmodyfikowany.

Schemat reguły CSS:

selektor {
    właściwość: wartość;
}

Przykład:

p {
    color: blue;
}

Oznacza to, że wszystkie znaczniki <p> będą miały niebieski kolor tekstu.

Dlaczego selektory są ważne?

Selektory CSS umożliwiają:

• precyzyjne stylowanie elementów strony,

• grupowanie elementów o podobnym wyglądzie,

• tworzenie przejrzystego i uporządkowanego kodu,

• łatwe zarządzanie wyglądem całej strony,

• uniknięcie powtarzania stylów.

Bez selektorów CSS nie byłoby możliwe efektywne projektowanie nowoczesnych stron internetowych.

Podstawowe rodzaje selektorów CSS

1) Selektor elementu (znacznika HTML)

Selektor elementu wskazuje wszystkie elementy danego typu.

h1 {
    color: red;
}

Dotyczy wszystkich nagłówków <h1>.

2) Selektor klasy (.class)

Selektor klasy wskazuje elementy posiadające określoną klasę.

HTML:

<p class="tekst">Przykładowy tekst</p>

CSS:

.tekst {
    font-size: 18px;
}

Cechy klasy:

• poprzedzona kropką .

• może być używana wielokrotnie na stronie

• jeden element może mieć kilka klas

3) Selektor identyfikatora (#id)

Selektor identyfikatora wskazuje jeden, unikalny element.

HTML:

<div id="naglowek">Nagłówek strony</div>

CSS:

#naglowek {
    background-color: gray;
}

Cechy ID:

• poprzedzone znakiem #

• powinno być unikalne w całym dokumencie HTML

• używane do identyfikacji pojedynczego elementu

4) Selektor uniwersalny (*)

Selektor uniwersalny wskazuje wszystkie elementy strony.

* {
    margin: 0;
    padding: 0;
}

Selektory złożone

5) Selektor potomka (descendant)

Wskazuje elementy znajdujące się wewnątrz innego elementu.

div p {
    color: green;
}

Dotyczy wszystkich <p> znajdujących się wewnątrz <div>.

6) Selektor dziecka (child)

Wskazuje tylko bezpośrednie dzieci elementu.

div > p {
    color: blue;
}

7) Selektory rodzeństwa

Bezpośrednie rodzeństwo:

h1 + p {
    color: orange;
}

Wszystkie kolejne elementy tego samego typu:

h1 ~ p {
    color: purple;
}

Selektory atrybutów

Selektory atrybutów pozwalają wybierać elementy na podstawie ich atrybutów.

input[type="text"] {
    border: 2px solid black;
}

Pseudoklasy jako rozszerzenie selektorów

Pseudoklasy opisują stan elementu.

a:hover {
    color: red;
}

input:focus {
    border-color: blue;
}

Podsumowanie

Selektory CSS są jednym z najważniejszych elementów języka CSS. Pozwalają one dokładnie określić, które elementy HTML mają zostać ostylowane.

Znajomość selektorów jest kluczowa dla:

• tworzenia estetycznych stron internetowych,

• pisania czytelnego kodu CSS,

• przygotowania do egzaminu INF.03,