Zadania dodatkowe - tekst CSS
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Zadanie 1: Zmiana koloru i rozmiaru tekstu
Cel: Nauka właściwości color i font-size oraz selektorów klas i ID.
Opis: Stwórz stronę z trzema paragrafami. Pierwszy paragraf ma mieć czerwony tekst, drugi niebieski o rozmiarze 18px, trzeci zielony o rozmiarze 24px.
Właściwości CSS:
- color: zmienia kolor tekstu (np. red, #FF0000, rgb(255, 0, 0)).
- font-size: ustala rozmiar czcionki (np. 18px, 1.5em).
Przykładowy kod HTML:
<body>
<p class="red-text">To jest pierwszy paragraf.</p>
<p class="blue-text">To jest drugi paragraf.</p>
<p id="green-text">To jest trzeci paragraf.</p>
</body>
- .red-text miał kolor czerwony.
- .blue-text miał kolor niebieski i rozmiar 18px.
- #green-text miał kolor zielony i rozmiar 24px.
Zadanie 2: Wybór czcionki
Cel: Nauka właściwości font-family.
Opis: Stwórz stronę z nagłówkiem <h1> i paragrafem. Ustaw dla całej strony czcionkę Arial (z zapasową sans-serif), a dla nagłówka czcionkę Georgia (z zapasową serif).
Właściwości CSS:
- font-family: określa rodzinę czcionek (np. Arial, sans-serif).
Przykładowy kod HTML:
<body>
<h1>Nagłówek strony</h1>
<p>To jest przykładowy tekst w paragrafie.</p>
</body>
Zadanie CSS: Napisz reguły CSS, aby:
- body miał czcionkę Arial, sans-serif.
- h1 miał czcionkę Georgia, serif.
Zadanie 3: Pogrubienie i kursywa
Cel: Nauka właściwości font-weight i font-style.
Opis: Stwórz listę nieuporządkowaną z trzema elementami. Pierwszy element ma być pogrubiony, drugi kursywą, trzeci bez zmian.
Właściwości CSS:
- font-weight: ustala grubość czcionki (np. bold, 700).
- font-style: określa styl (np. italic).
Przykładowy kod HTML:
<body>
<ul>
<li class="bold">Pierwszy element</li>
<li class="italic">Drugi element</li>
<li>Trzeci element</li>
</ul>
</body>
Zadanie CSS: Napisz reguły CSS, aby:
- .bold miał pogrubiony tekst.
- .italic miał tekst kursywą.
Zadanie 4: Wyrównanie tekstu
Cel: Nauka właściwości text-align.
Opis: Stwórz cztery paragrafy. Wyrównaj pierwszy do lewej, drugi do środka, trzeci do prawej, czwarty wyjustuj.
Właściwości CSS:
- text-align: wyrównanie tekstu (left, center, right, justify). Przykładowy kod HTML:
<body>
<p class="left">Tekst do lewej.</p>
<p class="center">Tekst do środka.</p>
<p class="right">Tekst do prawej.</p>
<p class="justify">Dłuższy tekst, aby zobaczyć efekt justowania. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
- .left był wyrównany do lewej.
- .center do środka.
- .right do prawej.
- .justify był wyjustowany.
Zadanie 5: Dekoracje tekstu
Cel: Nauka właściwości text-decoration.
Opis: Stwórz listę zadań (3 elementy <li>). Pierwszy element ma być podkreślony, drugi przekreślony, trzeci nadkreślony.
Właściwości CSS:
- text-decoration: dodaje dekoracje (underline, line-through, overline).
Przykładowy kod HTML:
<body>
<ul>
<li class="underline">Zadanie do zrobienia</li>
<li class="strikethrough">Zadanie wykonane</li>
<li class="overline">Zadanie w trakcie</li>
</ul>
</body>
</html>Zadanie CSS: Napisz reguły CSS, aby:
- .underline miał podkreślenie.
- .strikethrough miał przekreślenie.
- .overline miał nadkreślenie.
Zadanie 6: Odstępy i wysokość linii
Cel: Nauka właściwości letter-spacing, word-spacing, line-height.
Opis: Stwórz paragraf z dłuższym tekstem. Zmień odstępy między literami na 2px, między słowami na 5px, a wysokość linii na 1.5.
Właściwości CSS:
- letter-spacing: odstęp między literami (np. 2px).
- word-spacing: odstęp między słowami (np. 5px).
- line-height: wysokość linii (np. 1.5, 150%).
Przykładowy kod HTML:
<p class="spacing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
Zadanie CSS: Napisz reguły CSS, aby:
- .spacing miał letter-spacing: 2px,
word-spacing: 5px,
line-height: 1.5.
Zadanie 7: Transformacja tekstu
Cel: Nauka właściwości text-transform.
Opis: Stwórz stronę z nagłówkiem i dwoma paragrafami. Nagłówek ma mieć wszystkie litery wielkie, pierwszy paragraf małe, drugi kapitalizację (pierwsza litera każdego słowa wielka).
Właściwości CSS:
- text-transform: zmienia wielkość liter (uppercase, lowercase, capitalize).
Przykładowy kod HTML:
<body>
<h1 class="uppercase">To jest nagłówek</h1>
<p class="lowercase">To jest Pierwszy Paragraf.</p>
<p class="capitalize">to jest drugi paragraf.</p>
</body>
Zadanie CSS: Napisz reguły CSS, aby:
- .uppercase miał wszystkie litery wielkie.
- .lowercase miał wszystkie litery małe.
- .capitalize miał każdą pierwszą literę słowa wielką.
Zadanie 8: Stylowanie tekstu w tabelach
Cel: Nauka kombinacji właściwości i text-shadow.
Opis: Stwórz tabelę z nagłówkami i danymi. Nagłówki (th) mają być pogrubione, wyśrodkowane, z czcionką 20px i cieniem tekstu. Komórki (td) mają mieć inny kolor i wyrównanie do lewej.
Właściwości CSS:
- font-weight: pogrubienie (bold).
- text-align: wyrównanie (center, left).
- font-size: rozmiar czcionki (np. 20px).
- text-shadow: cień tekstu (np. 2px 2px 4px gray).
- color: kolor tekstu.
Przykładowy kod HTML:
</head>
<body>
<table border="1">
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</table>
</body>
Zadanie CSS: Napisz reguły CSS, aby:- th miał pogrubiony tekst, wyśrodkowanie, rozmiar 20px, cień tekstu (2px 2px 4px gray) i kolor np. granatowy.
- td miał kolor szary i wyrównanie do lewej.
