Klasa, id w CSS

W języku HTML każdy element posiada możliwość posiadania różnych atrybutów. 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.

Przeanalizujmy kod:

HTML:

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

CSS:

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

Stworzyliśmy trzy przyciski z klasą button-primary - wszystkie nasze przyciski będą miały kolor czarny i zaokrąglone rogi.

Zwróćmy uwagę na selektor

.button-primary

. Kropka, która stoi przed "button-primary" oznacza selektor klasy.

Przekładając na język programistów: W HTML stworzyliśmy 3 przyciski z klasą button-primary. W CSS stworzyliśmy selektor

.button-primary

, który zastosuje style dla wszystkich elementów z klasą

.button-primary

- kolor tła czarny i zokrąglenie rogów wynoszące 5px.

Ćwiczenie: Klasa i id w CSS

W tym ćwiczeniu nauczysz się, jak używać atrybutów

class

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>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako

styles.css

Krok 3: Stylizowanie klasy

Dodaj styl dla elementów z klasą

.button-primary

, ustawiając kolor tła na czarny i zaokrąglone rogi.

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}

Krok 4: Stylizowanie identyfikatora

Dodaj styl dla elementu z identyfikatorem

#unique-element

, ustawiając kolor tła na niebieski, kolor tekstu na biały i marginesy.

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

Wynik

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

Plik HTML (index.html)

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)

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

Dodaj więcej elementów z różnymi klasami i identyfikatorami, aby lepiej zrozumieć, jak działają te atrybuty.
Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolor tekstu, dodając obramowania lub cienie.
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.

Ir a CodeWorlds→