CSS - ćwiczenie 1 - tekst

Część 1: HTML — właściwości tekstu w CSS

color

• Co robi: kolor tekstu.

• Wartości: nazwy kolorów (red), hex (#ff0000), rgb()/rgba(), hsl()/hsla().

• Przykład:

p { color: #333333; }
h1 { color: rgb(10, 50, 120); }
h2 { color: green;}
.small { color: rgba(255,0,0,0.6); } /* półprzezroczysty */

background-color

• Co robi: kolor tła elementu (nie tylko tekstu).

• Wartości: jak dla color.

• Przykład:

body { background-color: #f0f8ff; }
mark { background-color: yellow; }

font-family

• Co robi: ustala rodzinę czcionek (kolejność = fallbacky).

• Wartości: nazwy czcionek, w cudzysłowie jeśli zawierają spacje, na końcu jedna z generycznych (serif, sans-serif, monospace).

• Przykład:

body { font-family: „Segoe UI”, Roboto, Arial, sans-serif; }
h1 { font-family: „Courier New”, monospace; }

font-size

• Co robi: wielkość czcionki.

• Wartości: px, em, rem, %, vw, vh.

  • px — stała wielkość,

  • em — względnie do elementu rodzica,

  • rem — względnie do root (html) — zalecane do skalowania.

• Przykład:

body { font-size: 16px; } /* domyślnie ok. 16px */
h1 { font-size: 2rem; } /* 2 razy root font-size */
.small { font-size: 0.9em; } /* 90% względem rodzica */

font-weight

• Co robi: grubość / pogrubienie czcionki.

• Wartości: słowa (normal, bold) lub liczby 100–900.

• Przykład:

strong { font-weight: 700; }
.light { font-weight: 300; }

font-style

• Co robi: pochylenie tekstu.

• Wartości: normal, italic, oblique.

• Przykład:

em { font-style: italic; }

line-height

• Co robi: odstęp między wierszami (interlinia).

• Wartości: liczba bez jednostki (np. 1.5 — polecane), %, px.

• Uwaga: bez jednostki (np. 1.6) jest skalowalne i najbezpieczniejsze.

• Przykład:

p { line-height: 1.6; } /* 160% wysokosci fontu */
h1 { line-height: 1.2; }

text-align

• Co robi: wyrównanie tekstu w bloku.

• Wartości: left, right, center, justify, start, end.

• Przykład:

h1 { text-align: center; }
article p { text-align: justify; }

letter-spacing i word-spacing

• Co robi: odstęp między literami / słowami.

• Wartości: normal lub długość (0.05em, 1px).

• Przykład:

h1 { letter-spacing: 0.02em; }
p.note { word-spacing: 2px; }

text-transform

• Co robi: zmienia kapitalizację tekstu.

• Wartości: none, uppercase, lowercase, capitalize.

• Przykład:

button { text-transform: uppercase; }
.title { text-transform: capitalize; } /* każda pierwsza litera wielka */

text-decoration

• Co robi: dekoracje linii (np. podkreślenie).

• Wartości: none, underline, overline, line-through — lub rozbicie na text-decoration-line, text-decoration-color, text-decoration-style.

• Przykład:

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.del { text-decoration: line-through; }

text-indent

• Co robi: wcięcie pierwszego wiersza akapitu.

• Wartości: długość (np. 2em, 20px) lub procent.

• Przykład:

p { text-indent: 2em; }

white-space

• Co robi: kontroluje łamanie i zachowanie białych znaków.

• Wartości: normal, nowrap, pre, pre-wrap, pre-line.

• Przykład:

pre.code { white-space: pre; } /* zachowuje wszystkie spacje/znaki nowej linii */
.no-wrap { white-space: nowrap; } /* bez łamania linii */

text-overflow

• Co robi: co pokazać, gdy tekst wychodzi poza ograniczony blok (współpracuje z overflow: hidden i white-space: nowrap).

• Wartości: clip, ellipsis.

• Przykład:

.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* „…” */
}

Zadanie:

W pliku style.css (lub wewnątrz <style>) ustaw style dla tekstu.

1. Ustaw globalnie:

   • font-family dla całego dokumentu (np. sans-serif),

   • font-size = 16px,

   • line-height = 1.6,

   • color = ciemnoszary (#222).

2. Dla nagłówka <h1>:

   • większy rozmiar czcionki (2rem),

   • font-weight = 700,

   • letter-spacing = 0.05em,

   • kolor niebieski (#0b3d91),

   • text-align: center.

3. Dla podtytułu <h2>:

   • font-style: italic,

   • text-transform: uppercase,

   • kolor zielony.

4. Dla akapitów <p>:

   • rozmiar 1rem,

   • text-indent na 2em,

   • odstęp dolny (margin-bottom) na 1em.

5. Dla akapitu z klasą .note:

   • kolor czerwony,

   • font-weight: bold,

   • text-transform: uppercase,

   • background-color żółty.

6. Dla cytatu <blockquote>:

   • font-style: italic,

   • text-align: justify,

   • border-left = 3px solid gray,

   • padding-left = 10px.

7. Dla linku <a>:

   • usuń podkreślenie (text-decoration: none),

   • kolor niebieski,

   • po najechaniu (:hover) dodaj podkreślenie.

8. Dla fragmentu kodu <pre><code>:

   • czcionka monospace (font-family: "Courier New", monospace),

   • white-space: pre (zachowaj odstępy),

   • background-color: #f4f4f4,

   • padding 10px.