CSS – co to – Jak działają kaskadowe arkusze stylów?
Kaskadowe arkusze stylów (CSS) to język opisu wyglądu dokumentów HTML i XML. CSS pozwala na oddzielenie warstwy prezentacji od struktury dokumentu, co znacząco upraszcza zarządzanie wyglądem stron internetowych. Dzięki CSS można definiować kolory, czcionki, rozmieszczenie elementów oraz wiele innych aspektów wizualnych, co przyczynia się do lepszej użyteczności i estetyki stron internetowych.
2. Historia CSS
CSS zostało wprowadzone w połowie lat 90. przez World Wide Web Consortium (W3C) jako odpowiedź na potrzebę lepszego zarządzania wyglądem stron internetowych. Pierwsza wersja, CSS1, została opublikowana w 1996 roku. Od tego czasu CSS ewoluowało, wprowadzając nowe możliwości i ułatwienia dla programistów. Obecnie używana jest wersja CSS3, która przynosi wiele zaawansowanych funkcji, takich jak animacje, zaawansowane selektory i media queries.
3. Podstawy CSS
Składnia i struktura
CSS składa się z reguł, które definiują styl dla elementów HTML. Każda reguła zawiera selektor i blok deklaracji.
Przykład:
p {
color: blue;
font-size: 14px;
}
W powyższym przykładzie p to selektor, który odnosi się do wszystkich elementów <p>, a blok deklaracji zawiera właściwości color i font-size oraz ich wartości.
Selektory
Selektory to kluczowy element CSS, który pozwala na określenie, które elementy HTML mają być stylizowane. Oto kilka podstawowych typów selektorów:
- Selektor elementu: Stylizuje wszystkie wystąpienia danego elementu.css
h1 {
color: red;
}
Selektor klasy: Stylizuje elementy z określoną klasą.
.example {
background-color: yellow;
}
Selektor identyfikatora: Stylizuje element o określonym id.
#unique {
font-weight: bold;
}
Selektory atrybutów: Stylizuje elementy na podstawie wartości ich atrybutów.
input[type="text"] { border: 1px solid black; }
Właściwości i wartości
CSS składa się z właściwości i przypisanych do nich wartości, które definiują, jak element powinien wyglądać. Istnieje wiele różnych właściwości, które można użyć, takich jak:
- color: Określa kolor tekstu.
- background-color: Określa kolor tła.
- font-size: Określa rozmiar czcionki.
- margin: Określa marginesy wokół elementu.
- padding: Określa odstępy wewnętrzne elementu.
Przykład:
div {
margin: 20px;
padding: 10px;
background-color: lightgrey;
}
4. Integracja CSS z HTML
CSS można zintegrować z HTML na trzy różne sposoby: poprzez wewnętrzne arkusze stylów, zewnętrzne arkusze stylów oraz style inline.
Wewnętrzne arkusze stylów
Wewnętrzne arkusze stylów są definiowane w sekcji <head> dokumentu HTML za pomocą znacznika <style>.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład wewnętrznego CSS</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>Witaj w CSS!</h1>
</body>
</html>
Zewnętrzne arkusze stylów
Zewnętrzne arkusze stylów są definiowane w osobnym pliku CSS, który jest linkowany do dokumentu HTML za pomocą znacznika <link>.
Przykład pliku HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład zewnętrznego CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Witaj w CSS!</h1>
</body>
</html>
Przykład pliku CSS (style.css):
body {
background-color: lightblue;
}
h1 {
color: navy;
}
Styl inline
Styl inline jest definiowany bezpośrednio w znaczniku HTML za pomocą atrybutu style.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład inline CSS</title>
</head>
<body>
<h1 style="color: navy; background-color: lightblue;">Witaj w CSS!</h1>
</body>
</html>
5. Kaskadowość i dziedziczenie
Zasady kaskadowości
Kaskadowość oznacza, że stylizacja elementów jest stosowana na podstawie hierarchii oraz specyficzności reguł CSS. Gdy istnieje konflikt pomiędzy regułami, decydujące są trzy główne zasady:
- Specyficzność: Im bardziej specyficzna reguła, tym większy ma priorytet.
- Źródło stylu: Style inline mają najwyższy priorytet, następnie style wewnętrzne, a na końcu zewnętrzne.
- Kolejność: Jeśli dwie reguły mają tę samą specyficzność, decyduje kolejność ich występowania – ostatnia reguła ma priorytet.
Specyficzność
Specyficzność określa, która reguła CSS ma być zastosowana w przypadku konfliktu. Każdy selektor ma określoną wagę, która decyduje o jego priorytecie.
Przykład:
/* Niska specyficzność */
p {
color: red;
}
/* Wyższa specyficzność */
#unique {
color: blue;
}
W powyższym przykładzie element <p id="unique"> będzie miał kolor niebieski, ponieważ selektor ID ma wyższą specyficzność niż selektor elementu.
Dziedziczenie
Niektóre właściwości CSS są dziedziczone przez elementy potomne. Na przykład, jeśli ustalimy kolor tekstu dla elementu nadrzędnego, jego potomkowie automatycznie przejmą ten kolor, chyba że zostanie to nadpisane.
Przykład:
div {
color: green;
}
<div>
<p>To jest tekst w kolorze zielonym.</p>
</div>
6. Praktyczne zastosowanie CSS
Tworzenie układów
CSS umożliwia tworzenie różnorodnych układów stron, dzięki czemu możemy dostosować wygląd witryny do naszych potrzeb.
Przykład układu z użyciem Flexbox:
.container {
display: flex;
justify-content: space-between;
}
.item {
background-color: lightcoral;
padding: 10px;
margin: 5px;
}
<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
</div>
Responsywność
Responsywność stron internetowych polega na dostosowaniu ich wyglądu do różnych rozmiarów ekranów. CSS oferuje narzędzia takie jak media queries, które pomagają w tworzeniu responsywnych witryn.
Przykład:
/* Domyślny styl dla desktopów */
body {
font-size: 16px;
}
/* Styl dla urządzeń mobilnych */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Animacje i transformacje
CSS pozwala na tworzenie animacji i transformacji, które zwiększają interaktywność i atrakcyjność stron.
Przykład animacji:
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation: example 5s infinite;
}
7. Zaawansowane techniki CSS
CSS Grid
CSS Grid to potężne narzędzie do tworzenia zaawansowanych układów siatkowych.
Przykład:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
</div>
Flexbox
Flexbox to elastyczny model układów, który upraszcza rozmieszczanie elementów w osi poziomej i pionowej.
Przykład:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="item">Wyśrodkowany element</div>
</div>
Pseudoklasy i pseudoelementy
Pseudoklasy i pseudoelementy umożliwiają stylizację elementów na podstawie ich stanu lub pozycji w dokumencie.
Przykład pseudoklasy :hover:
a:hover {
color: red;
}
Przykład pseudoelementu ::before:
p::before {
content: "Przykład: ";
font-weight: bold;
}
8. Narzędzia i zasoby
Edytory kodu
Popularne edytory kodu, które wspierają CSS, to:
- Visual Studio Code
- Sublime Text
- Atom
Frameworki CSS
Frameworki CSS przyspieszają tworzenie stron internetowych, oferując gotowe komponenty i style.
- Bootstrap
- Foundation
- Tailwind CSS
Przydatne strony i tutoriale
9. Podsumowanie
CSS to niezwykle potężne narzędzie, które pozwala na pełną kontrolę nad wyglądem stron internetowych. Dzięki jego elastyczności i różnorodnym technikom możemy tworzyć nowoczesne, responsywne i atrakcyjne wizualnie witryny. Zrozumienie podstaw CSS, a także bardziej zaawansowanych funkcji, takich jak Flexbox, Grid czy animacje, pozwala na tworzenie złożonych układów i efektów, które poprawiają doświadczenie użytkowników. Praktyczna znajomość CSS jest niezbędna dla każdego, kto chce profesjonalnie zajmować się tworzeniem stron internetowych.
