Klasy i identyfikatory w CSS

Chcesz, żeby trzy wybrane przyciski były czarne, a jeden wyjątkowy blok niebieski. Selektor button pomalowałby każdy przycisk na stronie, także te, których nie chcesz ruszać. Potrzebujesz etykiet dla wybranych elementów - i tym właśnie są klasy oraz identyfikatory.

W języku HTML każdy element może mieć różne atrybuty. Na przykład element obrazka (img) wymaga atrybutów src oraz alt. Atrybuty te definiują właściwości poszczególnych elementów. Gdy strony internetowe mają złożoną strukturę, konieczne jest wprowadzenie sposobu identyfikacji poszczególnych obiektów. Istnieją dwa główne sposoby rozróżniania elementów HTML:

• Atrybut id - służy do unikalnego wyróżnienia jednego konkretnego elementu.
• Atrybut class - pozwala na oznaczenie grupy elementów o wspólnych cechach.

Dzięki wykorzystaniu tych atrybutów możemy łatwiej zarządzać elementami strony, kontrolować ich stylizację oraz zachowanie. Tytuł kapłana nosiło w Egipcie wielu (to klasa), ale imię Ramzes II - jeden faraon (to id).

Selektor klasy - kropka

Przeanalizujmy kod. Najpierw HTML: trzy przyciski, a każdy z nich nosi tę samą klasę button-primary:

1<button class="button-primary">Przycisk 1</button>
2<button class="button-primary">Przycisk 2</button>
3<button class="button-primary">Przycisk 3</button>

Sam atrybut class niczego jeszcze nie zmienia w wyglądzie - to tylko etykieta. Wygląd nadajemy jej w CSS:

1.button-primary {
2  background-color: #000;
3  border-radius: 5px;
4}

Stworzyliśmy trzy przyciski z klasą button-primary - wszystkie dostaną czarne tło i zaokrąglenie rogów wynoszące 5px. Kropka, która stoi przed "button-primary" w selektorze .button-primary, oznacza selektor klasy. W HTML nazwę klasy piszesz bez kropki, a kropkę dodajesz tylko w CSS.

Selektor identyfikatora - krzyżyk

Identyfikator wybierasz znakiem # (krzyżyk, ang. hash): element z atrybutem id="unique-element" wskażesz selektorem #unique-element. Wartość id musi być unikalna w całym dokumencie. Klasy są elastyczniejsze - element może mieć ich kilka, oddzielonych spacją, np. class="button-primary large". Nazwy nie mogą zawierać spacji, a wielkość liter ma znaczenie: .Menu i .menu to dwie różne klasy.

Który selektor wygrywa?

Co, jeśli akapit ma i klasę, i id, a każdy selektor nadaje mu inny kolor? Wygrywa id: identyfikator jest silniejszy od klasy, a klasa od nazwy znacznika. Sprawdź to w edytorze poniżej - odkomentuj regułę #special i zobacz, jak pierwszy akapit zmienia kolor na czerwony:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Kaskadowość i Specyficzność CSS</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>Hierarchia stylów w CSS</h1>
10
11    <p id="special" class="text">Ten tekst ma ID i klasę</p>
12    <p class="text">Ten tekst ma tylko klasę</p>
13    <p>Ten tekst nie ma ani ID ani klasy</p>
14
15    <!-- Eksperymentuj z specificity: -->
16    <!-- Który selektor wygrywa? element, .klasa czy #id? -->
17</body>
18</html>

Pełne zasady tej rywalizacji poznasz w lekcji o kaskadowości i specyficzności. Moja rada: do stylowania używaj przede wszystkim klas, bo identyfikator jest tak silny, że później trudno go nadpisać.

Ćwiczenie: Klasa i id w CSS

W tym ćwiczeniu nauczysz się, jak używać atrybutów class i id do stylizowania elementów HTML. Twoim zadaniem będzie utworzenie strony internetowej z różnymi elementami, które będą stylizowane przy użyciu klas i identyfikatorów CSS.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj elementy <button> z klasą oraz <div> z identyfikatorem.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Klasa i id w CSS</title>
8</head>
9<body>
10  <button class="button-primary">Przycisk 1</button>
11  <button class="button-primary">Przycisk 2</button>
12  <button class="button-primary">Przycisk 3</button>
13  <div id="unique-element">Unikalny element</div>
14</body>
15</html>

Element <link> w sekcji head podłącza zewnętrzny plik styles.css - bez niego przeglądarka nie wiedziałaby, że style w ogóle istnieją.

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css, w tym samym folderze co plik HTML.

Krok 3: Stylizowanie klasy

Dodaj styl dla elementów z klasą .button-primary, ustawiając kolor tła na czarny i zaokrąglone rogi. Tym razem dopiszemy też biały tekst, bo domyślnie tekst przycisku jest ciemny:

1.button-primary {
2  background-color: #000;
3  color: #fff;
4  border: none;
5  border-radius: 5px;
6  padding: 10px 20px;
7  cursor: pointer;
8}

Deklaracja border: none usuwa domyślną ramkę przycisku, a cursor: pointer zamienia strzałkę myszy w dłoń.

Krok 4: Stylizowanie identyfikatora

Dodaj styl dla elementu z identyfikatorem #unique-element, ustawiając kolor tła na niebieski, kolor tekstu na biały oraz odstępy.

1#unique-element {
2  background-color: #00f;
3  color: #fff;
4  padding: 20px;
5  margin-top: 20px;
6  text-align: center;
7}

Ta reguła trafi wyłącznie do jednego elementu, bo żaden inny nie może mieć tego samego id. Właściwość text-align: center wyśrodkowuje tekst w poziomie.

Wynik

Po wykonaniu wszystkich kroków Twój plik HTML i CSS powinny wyglądać następująco.

Plik HTML (index.html)

Plik HTML nie zmienił się od kroku 1, bo wszystkie etykiety class i id były w nim od samego początku:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Klasa i id w CSS</title>
8</head>
9<body>
10  <button class="button-primary">Przycisk 1</button>
11  <button class="button-primary">Przycisk 2</button>
12  <button class="button-primary">Przycisk 3</button>
13  <div id="unique-element">Unikalny element</div>
14</body>
15</html>

Plik CSS (styles.css)

W pliku CSS obie reguły stoją jedna pod drugą, oddzielone pustą linią, żeby łatwo było odróżnić styl klasy od stylu identyfikatora:

1.button-primary {
2  background-color: #000;
3  color: #fff;
4  border: none;
5  border-radius: 5px;
6  padding: 10px 20px;
7  cursor: pointer;
8}
9
10#unique-element {
11  background-color: #00f;
12  color: #fff;
13  padding: 20px;
14  margin-top: 20px;
15  text-align: center;
16}

Eksperymentuj dalej

1. Dodaj więcej elementów z różnymi klasami i identyfikatorami, aby lepiej zrozumieć, jak działają te atrybuty.
2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolor tekstu, dodając obramowania lub cienie.
3. Przetestuj swoje umiejętności, tworząc bardziej złożone układy z użyciem klas i identyfikatorów.

Po wykonaniu tego ćwiczenia powinieneś lepiej rozumieć, jak używać klas i identyfikatorów w CSS, aby stylizować elementy HTML. Pamiętaj: klasa to tytuł, który może nosić wielu kapłanów, a id to imię faraona - jedyne w całym królestwie.