Składnia CSS

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

W CSS składnia odnosi się do zbioru reguł określających, jak należy pisać kod CSS. Zrozumienie składni CSS jest niezbędne do tworzenia dobrze zorganizowanych i funkcjonalnych arkuszy stylów. Podstawowa reguła CSS składa się z selektora i bloku deklaracji.

Oto proste wyjaśnienie:

Selektor: Określa element HTML, który chcesz stylizować (np. p, div, img).
Blok deklaracji: Zawiera jedną deklarację lub więcej, ujętych w nawiasy klamrowe {}.

Deklaracja: Składa się z właściwości i wartości oddzielonych dwukropkiem :(np. color:green;). Każda deklaracja powinna kończyć się średnikiem (;).

Właściwość: Atrybut stylu, który chcesz zmienić (np. color, font-size).
Wartość: Wartość, którą chcesz ustawić dla właściwości (np. blue, 16px).

Na przykład:

p {
    color: blue;
    font-size: 16px;
}

W tym przykładzie p jest selektorem, który wybiera wszystkie elementy akapitu. Blok deklaracji zawiera dwie deklaracje: jedna ustawia kolor tekstu na niebieski, a druga rozmiar czcionki na 16 pikseli.

Wyzwanie

Łatwy

Otrzymujesz kod HTML z elementem akapitu i regułą CSS dla tego akapitu. Zmodyfikuj regułę CSS, aby zmienić kolor tekstu na red.

Spróbuj swoich sił

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</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 CSSKomentarze 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