CSS: reguły, selektory, właściwości

CSS — Kaskadowe arkusze stylów (Cascading Style Sheets) to język stylów używany do projektowania stron internetowych. Pozwala oddzielić zawartość strony od jej prezentacji, ułatwiając pracę z układami i projektowaniem.

CSS składa się z zestawu reguł, z których każda określa, w jaki sposób określony element na stronie internetowej powinien być stylizowany. Reguły obejmują wybieranie elementów za pomocą selektorów i ustawianie właściwości tych elementów. Przyjrzyjmy się głównym komponentom CSS – regułom, selektorom i właściwościom.

Zasady

Reguła CSS składa się z selektora i bloku właściwości. Reguła mówi przeglądarce, które elementy strony internetowej stylizować i jak powinny być stylizowane. Każda reguła zaczyna się od selektora, który wybiera elementy, a kończy blokiem właściwości, które mają zastosowanie do wybranych elementów.

Oto przykład prostej reguły:

Tutaj `p` jest selektorem, który zaznacza wszystkie akapity na stronie. Wewnątrz bloku właściwości ustawione są style dla akapitów: niebieski kolor tekstu i rozmiar czcionki 16 pikseli.

Selektory

Selektory umożliwiają wybranie jednego lub kilku elementów na stronie internetowej w celu zastosowania do nich określonych stylów. Selektory mogą być bardzo proste lub bardziej złożone i umożliwiają wybieranie elementów na podstawie ich typu, klas, identyfikatorów, atrybutów, a nawet ich lokalizacji na stronie.

Przykłady prostych selektorów:

• `p` — zaznacza wszystkie akapity.
• `.header` – wybiera wszystkie elementy z klasą „header”.
• `#logo` – wybiera element o id „logo”.

Przykłady bardziej złożonych selektorów:

• `ul li` — wybiera wszystkie elementy z listy `li`, które są dziećmi elementu `ul`.
• `input` — zaznacza wszystkie pola tekstowe na stronie.

Właściwości

Właściwości określają wygląd elementów wybranych za pomocą selektorów. Każda właściwość ma wartość, która określa, jak element powinien wyglądać.

Przykłady właściwości:

• `color` – określa kolor tekstu elementu.
• `font-size` – ustawia rozmiar czcionki.
• `background-color` – ustawia kolor tła elementu.
• `border` – określa styl, grubość i kolor obramowania elementu.

Oto przykład użycia właściwości:

Ta reguła wybiera wszystkie nagłówki h1 i ustawia ich kolor tekstu na czerwony, rozmiar czcionki 24px, żółte tło i czarne obramowanie o grubości 1px.

Kombinatory

Kombinatory w CSS pozwalają łączyć selektory i tworzyć bardziej szczegółowe reguły. Oto kilka przykładów kombinatorów:

• `div p` — wybiera wszystkie elementy `p`, które są dziećmi elementów `div`.
• `.menu-item > a` — wybiera wszystkie elementy `a`, które są bezpośrednimi potomkami elementów z klasą `.menu-item`.
• `h2 + p` — wybiera wszystkie elementy `p`, które występują bezpośrednio po elementach `h2`.

Korzystanie z kombinatorów pozwala precyzyjnie dostosować sposób stosowania stylów do elementów na stronie.

Pseudoklasy i pseudoelementy

Pseudoklasy i pseudoelementy pozwalają wybrać elementy, które znajdują się w określonych stanach lub mają określone części. Są one określone po głównym selektorze i są oznaczone dwukropkiem.

Przykłady pseudoklas:

• `:hover` — stosuje style, gdy kursor znajduje się nad elementem.
• `:active` — stosuje style, gdy element jest aktywny (na przykład kliknięcie przycisku).
• `:focus` — stosuje style, gdy element ma fokus (na przykład pole wejściowe po kliknięciu).

Przykłady pseudoelementów:

• `::before` — dodaje treść przed zawartością wybranego elementu.
• `::after` – dodaje treść po treści wybranego elementu.
• `::first-line` — stosuje style do pierwszej linii tekstu w elemencie.
• `::first-letter` — stosuje style do pierwszej litery tekstu w elemencie.

Importuj pliki CSS

Aby Twój kod był bardziej uporządkowany i łatwiejszy w utrzymaniu, CSS umożliwia importowanie stylów z innych plików. Osiąga się to za pomocą polecenia `@import`, które można umieścić na początku pliku CSS.

W ten sposób możesz podzielić style na różne pliki, co ułatwi ich edycję i zmniejszy rozmiar każdego z nich.

Kaskadowanie i priorytety

CSS opiera się na zasadzie kaskadowania, co oznacza, że ​​style można definiować w różnych miejscach i źródłach, a przeglądarka sama zdecyduje, który styl zastosować na podstawie priorytetów. Kaskadowanie obejmuje:

• Pierwszeństwo selektorów: przeglądarka uwzględnia specyfikę selektorów. Im bardziej szczegółowy selektor, tym wyższy priorytet.
• Kolejność stylów: jeśli dwie reguły mają taką samą specyfikę, do elementu zostanie zastosowana ostatnia reguła.
• Ważność stylu: Możesz ustawić ważność stylu za pomocą `!important`. To sprawia, że ​​styl ma pierwszeństwo.

Ważne jest, aby ostrożnie używać `!important`, aby uniknąć przyszłych problemów z utrzymaniem kodu.

Zapytania o media

CSS umożliwia dostosowywanie stylów w oparciu o ustawienia urządzenia, takie jak szerokość i rozdzielczość ekranu. Zapytania o media umożliwiają tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od telefonów komórkowych po komputery stacjonarne.

Przykład zapytania o media:

W tym przykładzie style zostaną zastosowane do elementów strony, gdy szerokość ekranu nie przekroczy 768 pikseli.

CSS to potężne narzędzie do stylizacji stron internetowych, a te podstawy pomogą Ci zacząć używać go do tworzenia pięknych i funkcjonalnych projektów. Praktyka i doświadczenie pomogą Ci udoskonalić swoje umiejętności i stać się doświadczonym front-end developerem.