encyklopedia.space

CSS (Cascading Style Sheets)

CSS (ang. Cascading Style Sheets) – język arkuszy stylów, który służy do opisania prezentacji dokumentów zapisanych w językach znacznikowych takich jak HTML czy XHTML. Dzięki CSS można określić wygląd elementów (kolory, czcionki, marginesy, pozycjonowanie itp.) oraz ich zachowanie w zależności od warunków wyświetlania (np. rozmiaru ekranu).

Historia

Pierwsza wersja CSS została opracowana w 1994 roku przez grupę roboczą W3C. Oficjalnie standard został opublikowany w 1996 roku jako CSS 1. Następnie pojawiły się kolejne poziomy: CSS 2 (1998) oraz CSS 3 (rozpoczęty w 1999, z modułowym podejściem). Do dziś specyfikacje są rozwijane i utrzymywane przez W3C oraz WHATWG.

Podstawowe pojęcia

  • Selektor – określa, do których elementów HTML stosowany jest zestaw deklaracji (np. p, .menu, #header).
  • Deklaracja – para właściwość:wartość umieszczona w nawiasach klamrowych (np. color: red;).
  • Kaskada – zasada określająca kolejność stosowania stylów, wynikająca z priorytetów pochodzenia (przeglądarka, autor, użytkownik) oraz specyficzności selektorów.
  • Dziedziczenie – niektóre właściwości (np. font-family) są przekazywane z elementu nadrzędnego na potomne.
  • Model pudełkowy (box model) – opisuje sposób, w jaki elementy są rozmieszczane: treść, padding, border i margin.

Struktura reguły CSS

selektor {
    właściwość1: wartość1;
    właściwość2: wartość2;
    /* ... */
}

Przykład prostego stylu zmieniającego kolor i rozmiar tekstu nagłówka:

h1 {
    color: #2c3e50;
    font-size: 2.5rem;
}

Podstawowe grupy właściwości

Typografia

  • font-family, font-size, font-weight, font-style
  • line-height, text-align, text-decoration

Kolory i tło

  • color – kolor tekstu
  • background-color, background-image, background-position

Układ

  • display – określa sposób wyświetlania (block, inline, flex, grid, none)
  • position – static, relative, absolute, fixed, sticky
  • float i clear
  • margin, padding, border

Nowoczesne techniki układu

W ostatnich latach CSS wprowadził dwa potężne moduły umożliwiające tworzenie złożonych układów:

  • Flexbox (display: flex) – pozwala na elastyczne rozmieszczanie elementów w jednym wymiarze (wiersz lub kolumna). Szczegóły w artykule Flexbox.
  • CSS Grid Layout (display: grid) – umożliwia definiowanie dwuwymiarowych siatek. Więcej w CSS Grid.

Responsive Web Design i media queries

Adaptacyjne projektowanie stron (ang. Responsive Web Design) wykorzystuje media queries, czyli reguły pozwalające na zmianę stylów w zależności od właściwości wyświetlacza (szerokość, rozdzielczość, orientacja itp.).

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
    }
}

Preprocesory CSS

Choć CSS jest językiem deklaratywnym, programiści często korzystają z preprocesorów, które wprowadzają zmienne, funkcje i zagnieżdżanie. Najpopularniejsze to Sass, Less oraz Stylus. Po przetworzeniu generują standardowy kod CSS, który jest interpretowany przez przeglądarki.

Walidacja i narzędzia

Poprawność arkuszy stylów można sprawdzić przy pomocy walidatora dostępnego w serwisie W3C. Inne przydatne narzędzia to:

Przykładowy projekt

Poniżej znajduje się kompletny przykład prostego układu strony wykorzystującego Flexbox i media queries.

/* style.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background: #f4f4f4;
    color: #333;
}

/* Header */
header {
    background: #35495e;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

/* Navigation */
nav {
    display: flex;
    justify-content: center;
    background: #2c3e50;
}

nav a {
    color: #fff;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
}

/* Main content */
main {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}

article {
    flex: 1 1 60%;
    background: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
}

aside {
    flex: 1 1 30%;
    background: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
}

/* Footer */
footer {
    background: #35495e;
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    nav {
        flex-direction: column;
    }

    nav a {
        text-align: center;
        border-top: 1px solid #3d566e;
    }
}

Powiązane pojęcia

CSS jest nieodłącznym elementem współczesnego webu. Dzięki niemu projektanci i programiści mogą oddzielić warstwę prezentacji od treści, co zwiększa skalowalność, dostępność i utrzymywalność stron internetowych.