Przez Agata JS —

Notatki CSS - 3.11/5.11

Właściwości tekstu w CSS

1️⃣ font-family – czcionka

  • Określa czcionkę używaną w elemencie.
  • Można podać kilka nazw – przeglądarka wybierze pierwszą dostępną.
  • Ogólne grupy czcionek: serif, sans-serif, monospace, cursive, fantasy.

p {
font-family: "Arial", "Helvetica", sans-serif;
}

2️⃣ font-size – rozmiar czcionki

  • Wielkość tekstu.
  • Jednostki: px, em, rem, %, vw, vh.

p { font-size: 16px; }
h1 { font-size: 2em; } /* 2x większe niż rodzic */
small { font-size: 80%; } /* 80% wielkości rodzica */

3️⃣ line-height – wysokość linii

  • Odstęp między wierszami tekstu.
  • Jednostki: liczba bez jednostki, px, em, %, rem.

p { font-size: 16px; line-height: 1.5; } /* 1.5x font-size */
h1 { font-size: 32px; line-height: 40px; } /* konkretny px */

4️⃣ font-weight – pogrubienie

  • Określa grubość liter.
  • Wartości: normal, bold, lub liczby 100–900.

p { font-weight: normal; }
strong { font-weight: bold; }
h1 { font-weight: 700; }

5️⃣ font-style – styl tekstu

  • Normalny, kursywa lub pochylony.

em { font-style: italic; }
p { font-style: normal; }

6️⃣ text-align – wyrównanie

  • Steruje wyrównaniem tekstu w elemencie.
  • Wartości: left, right, center, justify.

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

7️⃣ color – kolor tekstu

  • Określa kolor tekstu.
  • Można użyć: nazwy (red), hex (#ff0000), RGB (rgb(255,0,0)), HSL (hsl(0, 100%, 50%)).

p { color: blue; }

Podsumowanie praktyczne

p {
font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: normal;
font-style: normal;
text-align: left;
color: black;
}

Tak definiujesz czytelny, dobrze wyglądający tekst.

  • line-height = odstęp między wierszami
  • font-weight = pogrubienie
  • font-style = kursywa lub normalny
  • font-family i font-size = wygląd i wielkość1. Czym jest CSS
  • CSS (Cascading Style Sheets) – kaskadowe arkusze stylów, czyli język opisujący wygląd strony HTML.
    Umożliwia:

🧱 2. Sposoby dodawania stylów

➤ Inline CSS

Bezpośrednio w tagu HTML (stosuje się rzadko, tylko dla pojedynczych wyjątków).
📘 Przykład:

<p style="color: red; font-size: 18px;">Tekst czerwony</p>

➤ Internal CSS

Wewnątrz dokumentu HTML, w sekcji <head> między tagami <style>.
📘 Przykład:

<style>
p {
color: blue;
font-size: 20px;
}
</style>

➤ External CSS

Najlepszy i najczęściej stosowany sposób – osobny plik .css.
📘 Przykład:

<link rel="stylesheet" href="style.css">

⚙️ 3. Kaskadowość i składnia

Każda reguła CSS składa się z:

  • selektora (np. p, .class, #id)
  • bloku deklaracji w { }, który zawiera:
    • właściwość (property)
    • wartość (value)

📘 Przykład:

p {
color: red;
font-size: 18px;
}

🎯 4. Selektory

Selektory to wzorce określające, do jakich elementów mają zostać zastosowane style.

➤ Podstawowe typy selektorów

Typ selektoraSkładniaPrzykładOpis
TypuelementpDziała na wszystkie elementy <p>
Klasy.nazwa.infoStyluje elementy z klasą info
ID#nazwa#headerStyluje element o konkretnym identyfikatorze
Atrybutu[attr] lub [attr=value][type="text"]Styluje elementy z danym atrybutem

➤ Relacje między elementami

RelacjaSkładniaOpis
Rodzic → dzieckorodzic > dzieckoTylko bezpośrednie dziecko
Rodzic → wszyscy potomkowierodzic dzieckoWszystkie zagnieżdżone elementy
Bezpośredni sąsiadA + BStyluje element B, który bezpośrednio następuje po A
Wszyscy późniejsi sąsiedzi (general siblings)A ~ BWszystkie elementy B po A na tym samym poziomie
Dziedziczenie.button*Wszystkie klasy zaczynające się od button będą stylowane

🧠 5. ID i klasy

  • # – odnosi się do identyfikatora (ID)
  • . – odnosi się do klasy (class)

📘 Przykład:

#main-title { color: red; }
.highlight { background-color: yellow; }

⚡ 6. !important

Używane, gdy chcesz wymusić zastosowanie reguły, nawet jeśli inna ma większy priorytet.

📘 Przykład:

p {
color: blue !important;
}

⚠️ Stosować tylko w wyjątkowych sytuacjach, bo utrudnia późniejsze zarządzanie stylami.

✍️ 7. Tekst i czcionki

WłaściwośćZnaczeniePrzykład
font-familyrodzina czcionekfont-family: 'Roboto', sans-serif;
font-sizerozmiar tekstufont-size: 16px; lub 1.2em, 120%
font-weightgrubość czcionkifont-weight: bold; lub 700
font-stylestyl tekstufont-style: italic;
line-heightwysokość linii tekstuline-height: 1.5;
text-alignwyrównanietext-align: center;
colorkolor tekstucolor: #333;

📘 Jednostki:

  • px – piksele (stałe)
  • em – zależne od rozmiaru rodzica
  • rem – zależne od rozmiaru dokumentu
  • % – procentowe

🌈 8. Kolory i przezroczystość

Typ zapisuPrzykładOpis
Nazwaredpodstawowe kolory
HEX#ff0000zapis szesnastkowy
Skrócony HEX#f00skrót dla #ff0000
RGBrgb(255,0,0)kolor w kanałach RGB
RGBArgba(255,0,0,0.5)RGB z kanałem przezroczystości (alpha)
HSLhsl(0, 100%, 50%)odcień, nasycenie, jasność

📘 alpha = przezroczystość (0 – przezroczysty, 1 – pełny kolor)

🖼️ 9. Tło

WłaściwośćZnaczeniePrzykład
background-colorkolor tłabackground-color: lightblue;
background-imageobraz tłabackground-image: url('img/bg.jpg');
background-repeatpowtarzanie obrazuno-repeat, repeat-x, repeat-y
background-positionpozycja tłacenter, top right
background-sizerozmiarcover, contain
background-attachmentprzewijaniefixed, scroll

📘 no-repeat → obraz nie powtarza się.

📦 10. Box Model

Każdy element HTML ma strukturę warstwową:

+----------------------+
| margin |
| +----------------+ |
| | border | |
| | +------------+ | |
| | | padding | | |
| | | +--------+ | | |
| | | | content | | | |
| | | +--------+ | | |
| | +------------+ | |
| +----------------+ |
+----------------------+

WłaściwośćZnaczenie
contentzawartość (tekst, obraz)
paddingodstęp wewnętrzny
borderramka
marginodstęp zewnętrzny

📘 Przykład:

div {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
box-sizing: border-box;
}

box-sizing: border-box; – wlicza padding i border w rozmiar elementu.

🧮 11. Atrybut disabled

Używany w formularzach, by zablokować pole (np. przycisk, input).
📘 Przykład:

<input type="text" disabled value="Nie można edytować">

🧱 12. Relacje elementów (rodzic–dziecko)

  • Rodzic (parent) – element, w którym znajduje się inny.
  • Dziecko (child) – element znajdujący się bezpośrednio w rodzicu.
  • Potomek (descendant) – każdy element zagnieżdżony w rodzicu (nie tylko dziecko).

📘 Przykład:

<div class="parent">
<p class="child">To dziecko div’a</p>
</div>

W CSS:

.parent > .child { color: red; } /* tylko bezpośrednie dziecko */
.parent p { color: blue; } /* każde zagnieżdżone <p> */

🪄 13. Efekty i pseudo-klasy

Pseudo-klasaZnaczenie
:hoverpo najechaniu kursorem
:focuspo kliknięciu lub aktywowaniu pola
:activew momencie kliknięcia
:first-childpierwszy element w rodzicu
:last-childostatni element

📘 Przykład:

button:hover {
background-color: green;
color: white;
}

💾 14. Wstawianie obrazka z dysku w CSS lub HTML

📘 W HTML:

<img src="img/moj_obrazek.jpg" alt="Opis obrazka">

📘 W CSS:

div {
background-image: url('img/moj_obrazek.jpg');
}

Uwaga: plik musi być w folderze projektu (np. /img/ w katalogu głównym).

🔠 15. Google Fonts

Darmowa biblioteka czcionek.

📘 W HTML:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

📘 W CSS:

body {
font-family: 'Roboto', sans-serif;
}

🌐 16. API (poboczne)

  • API (Application Programming Interface) – zestaw reguł umożliwiających komunikację między programami (np. między przeglądarką a serwerem).
  • W CSS nie używamy bezpośrednio, ale np. Google Fonts korzysta z API, by pobierać czcionki online.

🎯 17. Przykład kompletnego kodu HTML + CSS

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">Przykład box model</div>
<button class="btn">Kliknij</button>
</body>
</html>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid navy;
padding: 10px;
margin: 20px;
}

.btn {
background-color: pink;
color: white;
border: none;
padding: 10px 20px;
}

.btn:hover {
background-color: hotpink;
}

    • zmianę kolorów, czcionek, rozmiarów i układu elementów,
    • tworzenie prostych animacji,
    • modyfikację wyglądu bez zmiany struktury HTML.
Wcześniejsze

JavaScript 5.11.2025

 Następne

HTML-notatki, podstawowe tagi

To też może cię zaciekawić...