CSS - wprowadzenie
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Co to jest CSS?
CSS (Cascading Style Sheets – Kaskadowe Arkusze Stylów) to język opisujący wygląd stron internetowych.
Dzięki CSS możemy:
zmieniać kolory, czcionki, marginesy, odstępy,
ustawiać układ elementów (pozycjonowanie, kolumny, siatki),
dodawać efekty wizualne (np. tło, obramowania, cienie),
dostosowywać wygląd strony do różnych urządzeń (responsywność).
👉 HTML odpowiada za strukturę i treść, a CSS za wygląd – to tutaj dzieje się „magia”
Jak dołączyć CSS do strony?
Zgdonie z dokumentacją HTML możemy to zrobić na 3 sposoby:
a) Styl wewnętrzny (w pliku HTML – sekcja <style>)
b) Styl zewnętrzny (oddzielny plik .css):
- znacznik <link rel (…)> – zawsze umieszczamy w seksji <head>
Zapis w pliku .css:
c) Styl „w linii” (atrybut style)
Uwaga: tego sposobu używa się tylko awaryjnie, nie do budowania dużych stron.
Budowa reguły CSS
Każda reguła składa się z:
selektor {
właściwość: wartość;
}
selektor → mówi, do czego odnosi się styl (np.
p,h1,.klasa,#id), czyli m.in są to znaczniki które do tej pory poznaliśmywłaściwość → co zmieniamy (np.
color,font-size,margin) – tutaj ustawiamy kolory, marginesy, oraz ustawiamy elementy na stronie względem siebie tzw pozycjonowaniewartość → ustawienie właściwości (np.
red,20px) – zmieniamy wielkości i właściwości, kolor, rozmiar, pozycja
Przykład:
Tutaj mamy znacznik H1, który będzie koloru czerwonego, oraz rozmiar jego czcionki będzie wynosił 30 pikseli.
Podstawowe selektory
Selektor elementu:
p { color: green; }
Odnosi się do każdego znacznika <p> użytego w dokumencie
Selektor klasy (.)
.wazne { color: red; }
<p class=”wazne”>Ten tekst jest czerwony</p>
Selektor identyfikatora – ID (#)
#naglowek { font-size: 24px; }
<h1 id=”naglowek”>Tytuł</h1>
Ważne!!
W CSS klasa i ID to dwa różne sposoby identyfikowania elementów HTML w celu zastosowania stylów, ale różnią się w kilku kluczowych aspektach:
- Unikalność:
- ID: Jest unikalne dla pojedynczego elementu na stronie. Nie powinno być dwóch elementów z tym samym ID w jednym dokumencie HTML. Przykład: #moj-id.
- Klasa: Może być stosowana do wielu elementów na stronie. Wiele elementów może mieć tę samą klasę. Przykład: .moja-klasa.
- Składnia w CSS:
- ID: W CSS odwołujesz się do ID za pomocą znaku #, np. #moj-id { color: blue; }.
- Klasa: W CSS odwołujesz się do klasy za pomocą kropki ., np. .moja-klasa { font-size: 16px; }.
- Specyficzność:
- ID: Ma wyższą specyficzność w CSS niż klasa. Oznacza to, że styl zdefiniowany dla ID będzie miał pierwszeństwo przed stylem dla klasy, jeśli oba dotyczą tego samego elementu (chyba że użyto !important lub bardziej specyficznych selektorów).
- Klasa: Ma niższą specyficzność, więc style dla klasy mogą być nadpisywane przez style dla ID lub bardziej specyficzne selektory.
- Zastosowanie w HTML:
- ID: Używane w atrybucie id, np. <div id=”moj-id”>. Często stosowane do oznaczania unikalnych sekcji, jak nagłówek czy stopka, albo do celów JavaScript (np. getElementById).
- Klasa: Używane w atrybucie class, np. <div class=”moja-klasa”>. Klasy są idealne do grupowania elementów, które mają mieć takie same style, np. wszystkie przyciski na stronie.
- Wielokrotne użycie klas:
- Klasa: Można przypisać wiele klas do jednego elementu, oddzielając je spacją, np. <div class=”klasa1 klasa2″>.
- ID: Element może mieć tylko jedno ID.
