11.1 Kaskadowanie (Cascading)
Podstawowe zasady CSS obejmują kaskadowanie, dziedziczenie i specyficzność. Zrozumienie tych zasad pomaga lepiej kontrolować styl i wygląd stron internetowych.
Kaskadowanie (Cascading)
Kaskadowanie to podstawowa zasada CSS, która określa, jak stosować style, gdy kilka reguł jest ze sobą w konflikcie. Przy kaskadowaniu przeglądarka używa następujących zasad do rozwiązywania konfliktów:
- Sekwencja źródeł: style mogą być określone w różnych miejscach — zewnętrzne arkusze stylów (pliki CSS), wewnętrzne arkusze stylów (wewnątrz znacznika
<style>) i style wbudowane (w atrybuciestyleelementu HTML). Reguły są stosowane w kolejności ich pojawiania się. - Specyficzność: każdy selektor ma swój poziom specyficzności. Im wyższa specyficzność selektora, tym wyższy jego priorytet.
- Ważność (Importance): reguły z dyrektywą
!importantmają najwyższy priorytet i są stosowane nawet w przypadku innych sprzecznych reguł.
Przykład kaskadowania:
W tym przykładzie kolor tła będzie żółty, ponieważ styl wbudowany ma priorytet nad wewnętrznym stylem. Kolor tekstu będzie czerwony, ponieważ styl wbudowany ma priorytet nad wewnętrznym.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład kaskadowania CSS</title>
<style>
body {
background-color: lightblue; /* Wewnętrzny styl */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Styl wbudowany -->
<p style="color: red;">Przykład kaskadowania CSS</p>
</body>
</html>
11.2 Dziedziczenie (Inheritance)
Dziedziczenie to proces, w którym elementy potomne przejmują style swoich elementów nadrzędnych. Nie wszystkie właściwości CSS są dziedziczone. Dziedziczone właściwości obejmują kolor tekstu, rodzinę czcionek, odstępy między wierszami i niektóre inne.
Przykład dziedziczenia:
W tym przykładzie element <p> dziedziczy czcionkę i kolor od elementu <body>, a rozmiar czcionki z klasy .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład dziedziczenia CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Ten tekst dziedziczy czcionkę i kolor od body, a rozmiar czcionki od ".container".</p>
</div>
</body>
</html>
11.3 Specyficzność (Specificity)
Specyficzność określa, jaka reguła CSS zostanie zastosowana do elementu, gdy kilka reguł odnosi się do tego samego elementu. Specyficzność jest obliczana na podstawie liczby i typów selektorów w regule.
Zasady obliczania specyficzności:
- Wbudowane style (inline styles) mają najwyższą specyficzność
- Identyfikatory (selectors by ID) mają wyższą specyficzność niż klasy, pseudoklasy i atrybuty
- Klasy, pseudoklasy i atrybuty mają wyższą specyficzność niż elementy i pseudoelementy
- Elementy i pseudoelementy mają najniższą specyficzność
Przykład obliczania specyficzności:
W tym przykładzie tekst będzie czerwony, ponieważ selektor #unique ma najwyższą specyficzność.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład specyficzności CSS</title>
<style>
p {
color: blue; /* Specyficzność 0-0-0-1 */
}
.highlight {
color: green; /* Specyficzność 0-0-1-0 */
}
#unique {
color: red; /* Specyficzność 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Ten tekst będzie czerwony.</p>
</body>
</html>
11.4 Ważność (Importance)
CSS pozwala programistom wyraźnie wskazywać priorytet stylów za pomocą dyrektywy !important. Reguły z tą dyrektywą będą stosowane niezależnie od specyficzności innych reguł.
Przykład użycia !important:
W tym przykładzie tekst będzie niebieski, ponieważ reguła z !important ma najwyższy priorytet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład !important w CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Ten tekst będzie niebieski z powodu "!important".</p>
</body>
</html>
11.5 Przykłady użycia zasad CSS
Przykłady użycia zasad CSS w rzeczywistych zadaniach.
Przykład kaskadowania i specyficzności:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład kaskadowania i specyficzności CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Ten tekst będzie czerwony, ponieważ .important ma wyższą specyficzność niż "p".</p>
</body>
</html>
Przykład dziedziczenia i specyficzności:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład dziedziczenia i specyficzności CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Nadpisuje kolor z body dla wszystkich elementów potomnych */
}
.highlight {
color: red; /* Ma wyższą specyficzność niż .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Ten tekst będzie czerwony z powodu specyficzności klasy ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION