Kurs HTML

1.3. Podstawowa składnia CSS

Strona główna > Kurs CSS > Rozdział 1: Wprowadzenie do CSS > Podstawowa składnia CSS

Wprowadzenie: Anatomia reguły CSS

Aby stylizować elementy HTML za pomocą CSS, musimy tworzyć **reguły CSS**. Każda reguła składa się z dwóch głównych części: **selektora** i **bloku deklaracji**.

selektor {
  właściwość: wartość;
  inna-właściwość: inna-wartość;
}
  • Selektor (Selector): Wskazuje, do których elementów HTML ma zostać zastosowana dana reguła stylów. Może to być nazwa tagu (np. p), klasa (np. .klasa), ID (np. #identyfikator) lub bardziej złożony wzorzec.
  • Blok deklaracji (Declaration Block): Znajduje się wewnątrz nawiasów klamrowych {} i zawiera jedną lub więcej **deklaracji** oddzielonych średnikami (;).
  • Deklaracja (Declaration): Składa się z **właściwości CSS** (property) i jej **wartości** (value), oddzielonych dwukropkiem (:). Deklaracja określa, jaki aspekt elementu ma zostać zmieniony (np. color) i jak (np. blue).
  • Właściwość (Property): Nazwa konkretnego atrybutu stylu, który chcemy zmodyfikować (np. font-size, background-color, margin).
  • Wartość (Value): Konkretna wartość przypisana do właściwości (np. 16px, #ffffff, auto).

Przyjrzyjmy się bliżej każdemu z tych elementów.

Selektory

Selektor jest kluczową częścią reguły CSS, ponieważ decyduje, które elementy na stronie zostaną objęte stylizowaniem. Istnieje wiele rodzajów selektorów, od prostych po bardzo złożone. Na razie skupimy się na najprostszych:

  • Selektor typu (elementu): Wybiera wszystkie elementy danego typu (tagu HTML). Przykład: h1 wybierze wszystkie nagłówki pierwszego poziomu.
  • Selektor klasy: Wybiera wszystkie elementy, które mają przypisaną określoną klasę (za pomocą atrybutu class w HTML). Nazwę klasy w selektorze poprzedza kropka (.). Przykład: .przycisk wybierze wszystkie elementy z class="przycisk".
  • Selektor ID: Wybiera jeden, unikalny element, który ma przypisany określony identyfikator (za pomocą atrybutu id w HTML). Nazwę ID w selektorze poprzedza znak hash (#). Przykład: #logo wybierze element z id="logo".

Więcej o selektorach (w tym grupowaniu, selektorach atrybutów, pseudoklasach) dowiemy się w kolejnych rozdziałach.

/* Styl dla wszystkich paragrafów */
p {
  color: gray;
}

/* Styl dla elementów z klasą 'highlight' */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

/* Styl dla elementu o ID 'main-header' */
#main-header {
  font-size: 32px;
  border-bottom: 1px solid black;
}

Deklaracje, Właściwości i Wartości

Blok deklaracji zawiera konkretne instrukcje stylizujące. Każda deklaracja to para właściwość-wartość.

  • Właściwości: Istnieje ogromna liczba właściwości CSS, które pozwalają kontrolować praktycznie każdy aspekt wyglądu elementu. Przykłady: color, font-size, background-color, margin, padding, border, width, height, text-align, display, position.
  • Wartości: Każda właściwość akceptuje określony typ wartości. Mogą to być:
    • Słowa kluczowe: np. red, bold, center, auto, none, block.
    • Wartości liczbowe z jednostkami: np. 16px, 1.5em, 80%, 50vw.
    • Kolory: np. #ff0000, rgb(255, 0, 0), rgba(0, 0, 255, 0.5).
    • Adresy URL: np. url('obrazek.jpg').
    • I inne, zależne od właściwości.
  • Średnik: Każdą deklarację w bloku należy zakończyć średnikiem (;). Chociaż ostatnia deklaracja w bloku technicznie nie wymaga średnika, dobrą praktyką jest zawsze go dodawać, aby uniknąć błędów przy późniejszym dodawaniu kolejnych deklaracji.
p { /* Selektor typu 'p' */
  /* Blok deklaracji */
  color: #333;             /* Właściwość 'color', wartość '#333' */
  font-size: 16px;          /* Właściwość 'font-size', wartość '16px' */
  line-height: 1.6;         /* Właściwość 'line-height', wartość '1.6' (bez jednostki) */
  margin-bottom: 1em;       /* Właściwość 'margin-bottom', wartość '1em' */
} /* Koniec bloku deklaracji */

Ważne jest, aby używać poprawnych nazw właściwości i odpowiednich dla nich wartości. Błędy w składni (np. literówki, brak dwukropka lub średnika) mogą spowodować, że dana reguła lub deklaracja zostanie zignorowana przez przeglądarkę.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Napisz regułę CSS, która dla wszystkich elementów <h2> ustawi kolor tekstu na zielony (green) i rozmiar czcionki na 24px.

Rozwiązanie:

h2 {
  color: green;
  font-size: 24px;
}

Wyjaśnienie: Użyto selektora typu h2. W bloku deklaracji znajdują się dwie deklaracje: pierwsza ustawia właściwość color na wartość green, a druga ustawia właściwość font-size na wartość 24px. Obie deklaracje zakończone są średnikiem.

Zadanie 2 (do samodzielnego wykonania)

Stwórz plik HTML z kilkoma paragrafami (<p>). Nadaj jednemu z nich klasę specjalny (class="specjalny"). Napisz regułę CSS (w zewnętrznym pliku lub bloku <style>), która tylko dla paragrafu z klasą specjalny ustawi pogrubioną czcionkę (font-weight: bold;) i kolor tła na jasnoniebieski (lightblue).

Zadanie 3 (do samodzielnego wykonania)

W pliku HTML dodaj element z unikalnym ID, np. <div id="stopka">Stopka strony</div>. Napisz regułę CSS, która dla elementu o ID stopka ustawi mały rozmiar czcionki (np. 12px), wyśrodkowany tekst (text-align: center;) i górny margines (margin-top) o wartości 30px.

FAQ - Najczęściej zadawane pytania

Czy wielkość liter ma znaczenie w CSS?

W większości przypadków **nie**. Nazwy właściwości CSS (np. color, font-size) i większość wartości słów kluczowych (np. block, center, red) są niewrażliwe na wielkość liter. Jednak selektory mogą być wrażliwe na wielkość liter w zależności od języka dokumentu (w HTML nazwy tagów i atrybutów są niewrażliwe, ale wartości atrybutów class i id mogą być wrażliwe).

Co się stanie, jeśli zapomnę średnika na końcu deklaracji?

Jeśli zapomnisz średnika na końcu ostatniej deklaracji w bloku, styl prawdopodobnie zostanie zastosowany poprawnie. Jednak jeśli zapomnisz średnika przed ostatnią deklaracją, przeglądarka może potraktować obie deklaracje jako jedną, błędną, co spowoduje zignorowanie obu. Dlatego zawsze warto dodawać średniki po każdej deklaracji.

Czy mogę umieścić wiele deklaracji w jednej linii?

Tak, jest to składniowo poprawne, np. p { color: red; font-size: 16px; }. Jednak dla lepszej czytelności kodu, zwłaszcza przy wielu deklaracjach, zaleca się umieszczanie każdej deklaracji w osobnej linii z wcięciem wewnątrz bloku deklaracji.

Jak przeglądarka radzi sobie z błędami w CSS?

CSS jest zaprojektowany jako język odporny na błędy (forgiving). Jeśli przeglądarka napotka nieznaną właściwość, niepoprawną wartość lub błąd składni w deklaracji, zazwyczaj po prostu ignoruje tę konkretną błędną deklarację i przechodzi do następnej. Nie powoduje to zatrzymania przetwarzania całego arkusza, jak to bywa w językach programowania.