Czym jest CSS?

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 1 z 76.

CSS to potężny i niezbędny język służący do stylizacji stron internetowych, który pozwala z łatwością tworzyć atrakcyjne wizualnie i dobrze zaprojektowane witryny.

Współpracuje z HTML, ożywiając Twoje treści i przekształcając zwykły tekst oraz elementy w piękne, angażujące układy.

Za pomocą CSS możesz kontrolować wygląd każdego elementu swojej witryny — od kolorów i czcionek po odstępy i położenie.

Wyzwanie

Łatwy

Naciśnij przycisk uruchamiania kodu, aby uruchomić swój pierwszy kod w CSS.

Bonus: spróbuj zmienić kolor akapitu! Czy potrafisz dostrzec, jak to zrobić?

Spróbuj swoich sił

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>Hello CSS!</p>
  </body>
</html>

Sprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Stylizacja za pomocą CSS

1Wprowadzenie

Czym jest CSS?Składnia CSS Komentarze CSS Znacznik head Znacznik title

4Podstawy tekstu

Kolor tekstu Rodzina czcionek Rozmiar czcionki Grubość czcionki Wyrównanie tekstu Dekoracja tekstu Wyzwanie powtórkowe #1 Wyzwanie powtórkowe #2

7Model pudełkowy, część 1

Czym jest model pudełkowy?Odstęp wewnętrzny Marginesy Obramowania Szerokość i wysokość Zadanie podsumowujące

10Formularz logowania

Treść strony Kontener formularza

Pole tekstowe

Przycisk

13Strona internetowa Tonga

Menu nawigacyjne Nagłówek powitalny

2Dodawanie CSS

CSS inline Wewnętrzny CSS Zewnętrzny CSS Wyzwanie: podstawowe stylowanie

5Kolory i tła

Kolor tła Kolory HEX Kolory RGB Przezroczystość z RGBA Wyzwanie podsumowujące nr 1

8Model pudełkowy, część 2

Rozmiar pudełka Zaokrąglenie rogów Przepełnienie Cień pudełka Wyzwanie podsumowujące

11Techniki układu

Elementy blokowe a liniowe Podstawy pozycjonowania Pozycjonowanie względne Pozycjonowanie bezwzględne Pozycjonowanie stałe Podstawy z-index Wyzwanie podsumowujące

14Wyzwania końcowe

Układanie elementów Lista filmów Zaproszenie ślubne Pływające powiadomienie

3Podstawowe selektory

Wprowadzenie do selektorów Selektor typu Selektor klasy Selektor identyfikatora Grupowanie selektorów Selektor uniwersalny Wyzwanie: selektory

6Kawiarniane menu

Podstawy typografii Stylizacja tekstu

Kolory i tła

9Flexbox

Czym jest Flexbox?Kierunek flex Justify Content Align Items Idealne wyśrodkowanie Wyzwanie Flexbox

12Podstawy responsywnego projektowania

Czym jest responsywne projektowanie?Znacznik meta viewport Elastyczne układy Jednostki viewportu Podstawy Media Queries Elastyczne obrazy

Poćwicz samodzielnie: Edytor online Web