InnoMarts logo
InnoMarts
Fast websites
← Back to course

Pierwsze Kroki z CSS

Pierwsze Kroki z CSS

Witaj w pierwszej lekcji CSS.

W kursie HTML nauczyłeś się budować strukturę strony internetowej.

Teraz do pokoju wchodzi CSS.

CSS patrzy na twój prosty HTML i mówi:

“Ładna struktura. Bardzo odpowiedzialnie. Ale dlaczego jesteś ubrany jak formularz z urzędu?”

CSS nadaje stronie styl.

Kontroluje kolory, fonty, odstępy, layout, obramowania, tła i wiele innych wizualnych szczegółów.

HTML tworzy treść.

CSS sprawia, że treść jest czytelna, atrakcyjna i mniej skłonna do straszenia odwiedzających.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Czym Jest CSS?

CSS oznacza Cascading Style Sheets.

To język używany do stylowania dokumentów HTML.

HTML mówi:

<h1>Hello World</h1>

CSS mówi:

h1 {
  color: blue;
  font-size: 48px;
}

Razem tworzą stronę, która ma strukturę i styl.

HTML to szkielet.

CSS to ubrania, fryzura, buty i może okulary przeciwsłoneczne.

Ale nie za dużo okularów.

Budujemy strony internetowe, a nie zaczynamy dramatyczny teledysk.

Dlaczego Istnieje CSS?

Wyobraź sobie, że piszesz style bezpośrednio w każdym elemencie HTML.

Tak:

<h1 style="color: blue; font-size: 48px;">Hello World</h1>
<p style="color: gray; font-size: 18px;">This is my paragraph.</p>

To działa.

Ale bardzo szybko robi się bałagan.

Jeśli masz 50 nagłówków i chcesz zmienić ich kolor, musisz edytować 50 miejsc.

To nie jest development.

To kara z dodatkowym pisaniem na klawiaturze.

CSS pozwala pisać reguły stylu w jednym miejscu.

Przykład:

h1 {
  color: blue;
  font-size: 48px;
}

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

Teraz wszystkie elementy h1 i wszystkie elementy p mogą używać tych samych reguł.

Czysto.

Uporządkowanie.

Mniej chaosu.

CSS już teraz ratuje twoje przyszłe ja przed cierpieniem.

Stwórz Swój Pierwszy Projekt CSS

Stwórz folder dla tej lekcji:

mkdir css-lesson1
cd css-lesson1
touch index.html
touch style.css

Masz teraz dwa pliki:

css-lesson1/
  index.html
  style.css

index.html będzie zawierał strukturę strony.

style.css będzie zawierał style.

To rozdzielenie jest ważne.

HTML robi strukturę.

CSS robi wygląd.

Jak dwie osoby przy tym samym projekcie.

Jedna buduje ścianę.

Druga mówi: “Ładna ściana. Pomalujmy ją.”

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pierwsze Kroki z CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Moja Pierwsza Strona CSS</h1>
    <p>CSS sprawia, że HTML wygląda lepiej.</p>
  </header>

  <main>
    <section>
      <h2>O Tej Stronie</h2>
      <p>To prosta strona stworzona do ćwiczenia podstaw CSS.</p>
    </section>

    <section>
      <h2>Czego Się Uczę</h2>
      <ul>
        <li>Jak połączyć CSS z HTML</li>
        <li>Jak stylować nagłówki</li>
        <li>Jak zmieniać kolory i odstępy</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Stworzone podczas nauki CSS.</p>
  </footer>
</body>
</html>

Najważniejsza linia tutaj to:

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

Ta linia łączy plik HTML z plikiem CSS.

Bez niej plik CSS może krzyczeć cały dzień.

Strona HTML i tak go nie posłucha.

Element link

Element link znajduje się wewnątrz head.

Przykład:

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

Mówi przeglądarce:

Załaduj plik style.css i użyj go jako arkusza stylów dla tej strony.

Atrybut rel oznacza relację.

Atrybut href podaje ścieżkę do pliku.

Jeśli plik CSS jest w tym samym folderze co index.html, to działa:

href="style.css"

Jeśli plik CSS jest w folderze css, ścieżka wyglądałaby tak:

href="css/style.css"

Ścieżki mają znaczenie.

Przeglądarka nie jest telepatą.

Niestety.

Napisz Swój Pierwszy CSS

Otwórz style.css i dodaj to:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
}

h1 {
  color: #2563eb;
}

h2 {
  color: #111827;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Zapisz plik.

Otwórz index.html w przeglądarce.

Strona powinna teraz wyglądać inaczej.

Gratulacje.

Właśnie wystylizowałeś swoją pierwszą stronę za pomocą CSS.

Ceremonia nie jest wymagana.

Ale mała celebracja kawą jest dozwolona.

Jak Działają Reguły CSS

Reguła CSS zwykle ma trzy części:

selector {
  property: value;
}

Przykład:

h1 {
  color: blue;
}

Tutaj:

To oznacza:

Znajdź każdy element h1 i ustaw jego tekst na niebieski.

CSS daje instrukcje przeglądarce.

Czasem przeglądarka słucha.

Czasem zrobiłeś literówkę.

Zwykle to literówka.

Bądź silny.

Selektory

Selektor wybiera to, co chcesz stylować.

Przykład:

p {
  color: gray;
}

To wybiera wszystkie elementy p.

Przykład:

h2 {
  font-size: 32px;
}

To wybiera wszystkie elementy h2.

Na razie używamy prostych selektorów elementów.

Później poznamy klasy, ID, kombinacje i mocniejsze selektory.

Selektory CSS są jak powiedzenie:

“Ty. Tak, ty. Załóż ten styl.”

Bardzo bezpośrednio.

Bardzo teatralnie.

Właściwości i Wartości

Właściwość to rzecz, którą chcesz zmienić.

Wartość mówi, jak chcesz ją zmienić.

Przykład:

color: red;

color to właściwość.

red to wartość.

Inny przykład:

font-size: 24px;

font-size to właściwość.

24px to wartość.

CSS używa wielu właściwości:

Nie próbuj zapamiętać wszystkiego dzisiaj.

Tak początkujący zamieniają się w zmęczone meble.

Ucz się krok po kroku.

Dodaj Lepsze Odstępy

Teraz poprawimy odstępy na stronie.

Dodaj to do style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

header {
  background-color: #111827;
  color: white;
  padding: 40px;
  text-align: center;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

section {
  background-color: white;
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 12px;
}

footer {
  text-align: center;
  padding: 20px;
  color: #666;
}

Teraz strona powinna wyglądać bardziej uporządkowanie.

Nie idealnie.

Ale zdecydowanie mniej jak HTML, który uciekł z piwnicy.

Czym Jest margin?

margin to przestrzeń na zewnątrz elementu.

Przykład:

section {
  margin-bottom: 20px;
}

To dodaje przestrzeń pod każdą sekcją.

Margin jest jak przestrzeń osobista.

Elementy jej potrzebują.

Ludzie jej potrzebują.

Twój layout zdecydowanie jej potrzebuje.

Czym Jest padding?

padding to przestrzeń wewnątrz elementu.

Przykład:

section {
  padding: 24px;
}

Tworzy przestrzeń między krawędzią sekcji a treścią w środku.

Bez padding tekst przykleja się do krawędzi.

I wygląda niewygodnie.

Jak siedzenie zbyt blisko kogoś w pustym autobusie.

Czym Jest background-color?

background-color zmienia tło elementu.

Przykład:

header {
  background-color: #111827;
}

To sprawia, że header jest ciemny.

Możesz używać nazw kolorów:

color: blue;

Albo wartości hex:

color: #2563eb;

Wartości hex na początku wyglądają tajemniczo.

Jak sekretne kody.

Ale to tylko kody kolorów.

Żadnej magii.

Tylko piksele udające magię.

Testowanie z Lokalnym Serwerem

Możesz otworzyć index.html bezpośrednio w przeglądarce.

Ale możesz też użyć Caddy, żeby uruchomić folder lokalnie:

caddy file-server --listen :8080

Potem otwórz:

http://localhost:8080

To przydatne, gdy chcesz, żeby projekt zachowywał się bardziej jak prawdziwa strona.

Nie jest obowiązkowe.

Ale wygodne.

I tak, używanie lokalnego serwera sprawia, że wyglądasz odrobinę bardziej profesjonalnie.

Nawet jeśli twój CSS nadal kłóci się z marginem.

Częste Błędy

Zapomnienie linku do CSS

Jeśli CSS nie działa, sprawdź tę linię:

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

Upewnij się, że jest w head.

Upewnij się, że nazwa pliku jest poprawna.

style.css to nie to samo co styles.css.

Komputery są surowe.

Nie wybaczają ortograficznych dramatów.

Pisanie CSS przypadkiem w HTML

CSS należy do style.css.

Nie do body w taki sposób:

<body>
  h1 {
    color: blue;
  }
</body>

To nie jest poprawne.

HTML spojrzy na to i powie:

“Nie wiem, co to jest, ale wygląda podejrzanie.”

Brak średników

Lepiej tak:

h1 {
  color: blue;
  font-size: 48px;
}

Każda linia właściwości zwykle powinna kończyć się średnikiem.

CSS czasem przeżyje bez ostatniego.

Ale nie testuj jego cierpliwości.

Praktyka

Stwórz własną stronę z:

Potem wystylizuj ją za pomocą CSS.

Twój CSS powinien zmienić:

Zachowaj prostotę.

Dzisiaj nie chodzi o zostanie designerem.

Dzisiaj chodzi o to, żeby HTML zaczął słuchać CSS.

Mini Wyzwanie

Zmień stronę tak, aby:

Zmieniaj jedną rzecz naraz.

Zapisz.

Odśwież.

Obserwuj.

To jest cykl CSS.

Pisz.

Zapisz.

Odśwież.

Zamieszanie.

Popraw.

Zwycięstwo.

Powtórz.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Napisałeś swój pierwszy CSS.

To prawdziwy krok naprzód.

Strona może nie jest jeszcze arcydziełem.

Ale nie jest już nagim HTML-em stojącym na deszczu.

Następna Lekcja

W następnej lekcji dokładniej poznamy selektory i podstawowe stylowanie.

Selektory to sposób, w jaki mówisz CSS dokładnie, co ma stylować.

Bardzo ważne.

Bo CSS bez selektorów to po prostu osoba krzycząca instrukcje projektowe w pustkę.