Zadania – HTML ,CSS – tekst i czcionka, identyfikatory i klasy.
Zadanie: Kreator Wystroju Typograficznego
Cel: Stworzenie prostej strony internetowej, która demonstruje zaawansowane reguły stylizacji tekstu i czcionek w CSS, z precyzyjnym wykorzystaniem selektorów ID i klas.
Krok 1: Struktura HTML (index.html)
Utwórz następującą strukturę HTML. Zwróć szczególną uwagę na atrybuty id i class.
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Zadanie HTML/CSS</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<h1>Projekt: Magia Typografii</h1>
</header>
<div id=”wprowadzenie”>
<p>To jest sekcja wprowadzająca. Zastosujemy do niej unikalny identyfikator, aby nadać jej bardzo specyficzny i niepowtarzalny styl. Identyfikatory powinny być używane tylko raz na stronie.</p>
</div>
<section>
<h2>Przykładowe Artykuły</h2>
<article class=”tresc_artykulu”>
<p>Artykuł 1. Ten element dzieli stylizację z innymi artykułami poprzez wspólną klasę. Klasy są idealne, gdy chcemy zastosować ten sam zestaw reguł do wielu różnych elementów.</p>
</article>
<article class=”tresc_artykulu wazne”>
<p>Artykuł 2. Ten element, oprócz wspólnej klasy, posiada również drugą klasę, która go wyróżnia. Pamiętaj, że element może mieć wiele klas.</p>
</article>
<article class=”tresc_artykulu”>
<p>Artykuł 3. Ten element ponownie używa tylko wspólnej klasy. Zauważ, jak identyczna klasa natychmiast narzuca identyczny wygląd typograficzny.</p>
</article>
</section>
</body>
</html>
Krok 2: Stylizacja CSS (style.css)
Utwórz arkusz stylów CSS, który spełni poniższe wymagania, używając odpowiednich selektorów (ID: #, Klasa: .):