2.1 Zewnętrzne arkusze stylów
Podłączenie CSS (Cascading Style Sheets) do dokumentu HTML pozwala stylizować strony internetowe, poprawiając ich wygląd i łatwość obsługi. Istnieje kilka sposobów podłączenia CSS do HTML, każdy z nich ma swoje zalety i nadaje się do różnych sytuacji.
Sposoby podłączenia CSS:
- Zewnętrzne arkusze stylów (External Stylesheets)
- Wewnętrzne arkusze stylów (Internal Stylesheets)
- Wbudowane style (Inline Styles)
Zewnętrzne arkusze stylów (External Stylesheets)
Zewnętrzne arkusze stylów to oddzielne pliki CSS, które są podłączane do dokumentu HTML za pomocą tagu <link>. Ten sposób pozwala oddzielić style od struktury dokumentu, co ułatwia zarządzanie stylami i ponowne wykorzystanie plików CSS na wielu stronach.
Zalety:
- Łatwość zarządzania stylami
- Ponowne użycie stylów na wielu stronach
- Poprawa buforowania i wydajności
Składnia:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład zewnętrznego arkusza stylów</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>Tekst</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład zewnętrznego arkusza stylów</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Nagłówek</h1>
<p>Tekst</p>
</body>
</html>
Przykład pliku CSS(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Wewnętrzne arkusze stylów (Internal Stylesheets)
Wewnętrzne arkusze stylów umieszczane są wewnątrz samego dokumentu HTML w sekcji <head> za pomocą tagu <style>. Ten sposób jest wygodny, gdy trzeba zastosować style tylko do jednej strony lub gdy zewnętrzny plik nie jest dostępny.
Zalety:
- Łatwość użycia dla jednej strony
- Brak konieczności posiadania dodatkowego pliku
Składnia:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład wewnętrznego arkusza stylów</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>Tekst</p>
</body>
</html>
2.3 Wbudowane style (Inline Styles)
Wbudowane style są stosowane bezpośrednio do elementów HTML za pomocą atrybutu style. Ten sposób jest przydatny do szybkiego testowania lub gdy trzeba zmienić styl pojedynczego elementu.
Zalety:
- Szybkie i precyzyjne stosowanie stylów
- Odpowiednie do dynamicznych zmian przez JavaScript
Wady:
- Trudność zarządzania stylami przy dużej liczbie elementów
- Utrudnione ponowne wykorzystanie stylów
Składnia:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład wbudowanych stylów</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Nagłówek</h1>
<p style="color: #666; background-color: #f4f4f4;">Tekst</p>
</body>
</html>
Przykład użycia wszystkich sposobów na jednej stronie:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład wszystkich sposobów podłączenia CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Nagłówek</h1>
<p style="color: #666;">Ten tekst jest stylizowany z wykorzystaniem wbudowanych stylów.</p>
</body>
</html>
2.4 Kolejność priorytetu stylów
Kiedy style są podłączone w różny sposób, priorytet ich stosowania jest określany w następujący sposób:
- Wbudowane style (Inline Styles) mają najwyższy priorytet
- Wewnętrzne arkusze stylów (Internal Stylesheets) mają kolejny poziom priorytetu
- Zewnętrzne arkusze stylów (External Stylesheets) mają najniższy priorytet
Jeśli do tego samego elementu stosuje się kilka stylów o tym samym priorytecie, to priorytet jest określany specyficznością selektora i kolejnością deklaracji.
Przykład priorytetu stylów:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Przykład priorytetu stylów</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Wewnętrzny styl */
}
</style>
</head>
<body>
<p style="color: red;">Ten tekst będzie czerwony z powodu priorytetu wbudowanego stylu.</p>
</body>
</html>
GO TO FULL VERSION