CSS

CSS - kaskadowe arkusze stylow

CSS (Cascading Style Sheets) to język stylów używany do opisywania wyglądu oraz układu elementów dokumentów HTML. Jego głównym zadaniem jest oddzielenie warstwy wizualnej od struktury dokumentu.

Dzięki CSS możliwe jest kontrolowanie kolorów, czcionek, odstępów, układu strony, animacji oraz responsywności interfejsu użytkownika. Język ten jest fundamentem nowoczesnego web designu.

Historia i rozwój CSS

CSS został opracowany w połowie lat 90. jako odpowiedź na chaos związany z formatowaniem stron HTML przy użyciu znaczników takich jak <font> czy <center>.

Obecnie rozwój CSS jest prowadzony przez organizację W3C oraz grupę CSS Working Group. Język ten rozwijany jest modułowo, co oznacza, że poszczególne funkcjonalności są dodawane niezależnie od siebie.

Podstawowa składnia CSS

Arkusz stylów CSS składa się z reguł, które przypisują właściwości konkretnym elementom HTML.

selector {
  property: value;
}

Każda reguła zawiera:

• Selektor – wskazuje elementy HTML
• Właściwość – określa cechę stylu
• Wartość – ustala wygląd tej cechy

Selektory CSS

Selektory podstawowe

p {
  color: blue;
}

#header {
  background-color: gray;
}

.menu {
  padding: 10px;
}

• p – selektor elementu
• #header – selektor identyfikatora
• .menu – selektor klasy

Selektory złożone i atrybutów

input[type="text"] {
  border: 1px solid black;
}

div > p {
  margin-bottom: 10px;
}

Kaskada i specyficzność

Jednym z kluczowych mechanizmów CSS jest kaskada, czyli sposób rozstrzygania konfliktów pomiędzy regułami stylów.

Na końcowy styl wpływają:

• Kolejność deklaracji
• Specyficzność selektora
• Użycie !important

p {
  color: red;
}

#content p {
  color: green;
}

Model pudełkowy (Box Model)

Każdy element HTML jest traktowany jako prostokątne pudełko składające się z:

• Content
• Padding
• Border
• Margin

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Układ strony (Layout)

Flexbox

Flexbox służy do budowania jednowymiarowych układów (wiersze lub kolumny).

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid

CSS Grid umożliwia tworzenie dwuwymiarowych siatek layoutu.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

Kolory i jednostki

Kolory

color: red;
color: #2563eb;
color: rgb(37, 99, 235);
color: hsl(220, 80%, 55%);

Jednostki

• px, %
• em, rem
• vw, vh

Responsywność

CSS pozwala dostosować wygląd strony do różnych rozmiarów ekranów za pomocą media queries.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Animacje i przejścia

Transitions

button {
  transition: background-color 0.3s ease;
}

Keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Nowoczesne możliwości CSS

• Zmienne CSS (--primary-color)
• Tryb ciemny (prefers-color-scheme)
• Container Queries
• Subgrid
• Clamp()

Zastosowania CSS

• Strony internetowe
• Aplikacje webowe
• Interfejsy mobilne
• Email marketing (ograniczony CSS)
• Systemy designowe

Zalety i ograniczenia

Zalety

• Oddzielenie struktury od wyglądu
• Responsywność
• Wydajność
• Ogromne możliwości wizualne

Ograniczenia

• Brak klasycznej logiki programistycznej
• Różnice między przeglądarkami

Podsumowanie

CSS jest jednym z filarów nowoczesnego internetu. Choć nie jest językiem programowania w tradycyjnym sensie, jego rola w tworzeniu aplikacji i interfejsów użytkownika jest absolutnie kluczowa.

Znajomość CSS na wysokim poziomie pozwala tworzyć estetyczne, responsywne i dostępne strony internetowe.