Budowa stylu CSS – Selektor cecha wartość

Budowa stylu CSS – Cascading Style Sheets stanowi fundament każdej estetycznej i funkcjonalnej strony internetowej. Jednym z kluczowych pojęć w CSS jest struktura reguły stylu, która składa się z selektora, cechy (właściwości) oraz wartości. Ten kurs jest stworzony z myślą o osobach rozpoczynających swoją przygodę z tworzeniem stylów CSS. Zaczniemy od podstaw, aż do zaawansowanych technik budowy reguł CSS.

Podstawowa składnia reguły stylu

selektor {
  cecha: wartość;
}

• Selektor – wskazuje, do którego elementu HTML lub grupy elementów ma być zastosowana reguła stylu.
• Cecha (Właściwość) – określa aspekt stylowania, który chcemy zmodyfikować (np. kolor tekstu, rozmiar czcionki, tło).
• Wartość – określa konkretne ustawienie właściwości, jakie chcemy zastosować (np. blue dla koloru, 16px dla rozmiaru czcionki).

Przykład

p {
  color: blue;
  font-size: 24px;
}

W powyższym przykładzie p jest selektorem, color i font-size są cechami (właściwościami), a blue i 24px są ich odpowiednimi wartościami.

Selektory CSS

Selektory CSS są kluczowe dla określenia, które elementy na stronie internetowej mają być stylowane za pomocą reguł CSS. Istnieje wiele rodzajów selektorów, które pozwalają na precyzyjne wskazanie elementów HTML, takich jak:

• Selektor elementu: np. h1, p, div.
• Selektor klasy: np. .header, .article.
• Selektor identyfikatora: np. #main-content, #footer.
• Selektor atrybutu: np. input[type="text"].

Cechy (właściwości) CSS

Cechy (właściwości) CSS określają konkretne aspekty, które chcemy modyfikować wizualnie. Oto kilka przykładów popularnych cech CSS:

• Kolor tekstu: color
• Rozmiar czcionki: font-size
• Rodzina czcionek: font-family
• Tło elementu: background-color
• Marginesy: margin
• Wypełnienie (padding): padding
• Obramowanie: border
• Wyrównanie tekstu: text-align

Wartości CSS

Wartości CSS to konkretne ustawienia, które przypisujemy cechom (właściwościom). Mogą być one liczbami (np. rozmiar czcionki), kolorami (np. red, #00ff00), wartościami logicznymi (np. block, inline) lub innymi jednostkami (np. px, em).

Przykład indywidualnego stylu

W kolejnym przykładzie przygotujemy bardziej rozbudowany styl. Akapitowi (p) nadamy pochyłą czcionkę w kolorze niebieskim na szarym tle. Kolejne cechy oddzielamy średnikiem.

p { 
  font-style: italic;
  color: blue;
  background: silver;
}

Dla przykładowego tekstu:

<p>Tekst pochylony w kolorze niebieskim na szarym tle.</p>

Efekt będzie następujący:

Tekst pochylony w kolorze niebieskim na szarym tle.

Budowa stylu CSS – podsumowanie

Ten kurs zapewnia solidne fundamenty w zakresie budowy reguł stylu CSS. Zrozumienie struktury reguły stylu, selektorów, cech (właściwości) oraz wartości pozwoli Ci nadawać estetyczną warstwę wizualną dla poszczególnych elementów na stronie internetowe. Przejdźmy teraz do praktyki i eksperymentowania z różnymi kombinacjami selektorów i stylów, aby stworzyć unikalne i estetyczne projekty!