Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Grubość czcionki

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

W CSS właściwość font-weight służy do kontrolowania pogrubienia lub grubości tekstu w elemencie HTML.

Typowe wartości liczbowe dla font-weight to:

  • 100: Cienka
  • 200: Bardzo lekka
  • 300: Lekka
  • 400: Normalny 
  • 500: Średni
  • 600: Półgruby
  • 700: Pogrubiona 
  • 800: Bardzo pogrubiona
  • 900: Czarna

Typowe wartości słowne dla font-weight to:

  • normal: Odpowiednik 400
  • bold: Odpowiednik 700
  • lighter: Określa mniejszą grubość niż element nadrzędny
  • bolder: Określa większą grubość niż element nadrzędny

Na przykład:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}
challenge icon

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem div (<div>). Twoim zadaniem jest użycie właściwości font-weight do stylizacji tych elementów. Wykonaj poniższe kroki:

  1. Napisz regułę CSS, która wybiera element <h1>. Ustaw font-weight na 900.
  2. Napisz regułę CSS, która wybiera element <p>. Ustaw font-weight na lighter.
  3. Napisz regułę CSS, która wybiera element <div>. Ustaw font-weight na 600.

Spróbuj swoich sił

<html>
<head>
    <title>Font Weight</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>
quiz iconSprawdź 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 CSSZnacznik headZnacznik title

4Podstawy tekstu

Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #2

7Model pudełkowy, część 1

Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące

10Formularz logowania

Treść stronyKontener formularzaLekcja projektowaPole tekstoweLekcja projektowaPrzyciskLekcja projektowa

13Strona internetowa Tonga

Menu nawigacyjneNagłówek powitalnyLekcja projektowaSekcja „O nas”Lekcja projektowaSekcja kontaktowaLekcja projektowaZnacznik viewportLekcja projektowaMedia queryLekcja projektowa

2Dodawanie CSS

CSS inlineWewnętrzny CSSZewnętrzny CSSWyzwanie: podstawowe stylowanie

5Kolory i tła

Kolor tłaKolory HEXKolory RGBPrzezroczystość z RGBAWyzwanie podsumowujące nr 1

8Model pudełkowy, część 2

Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące

11Techniki układu

Elementy blokowe a liniowePodstawy pozycjonowaniaPozycjonowanie względnePozycjonowanie bezwzględnePozycjonowanie stałePodstawy z-indexWyzwanie podsumowujące

14Wyzwania końcowe

Układanie elementówLista filmówZaproszenie ślubnePływające powiadomienie

3Podstawowe selektory

Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory

6Kawiarniane menu

Podstawy typografiiStylizacja tekstuLekcja projektowaKolory i tłaLekcja projektowa

9Flexbox

Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox

12Podstawy responsywnego projektowania

Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazy

Poćwicz samodzielnie: Edytor online Web