Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Podstawowe właściwości tekstu

Podstawowe właściwości tekstu

Frontend SELF PL
Poziom 14 , Lekcja 0
Dostępny

1.1 Kolor

CSS (Cascading Style Sheets) dostarcza wiele właściwości do stylizacji tekstu. Kluczowymi z nich są color, font-size i font-weight. Pozwalają one kontrolować kolor tekstu, jego rozmiar i grubość odpowiednio. Przyjrzyjmy się każdemu z tych właściwości bardziej szczegółowo.

Właściwość color ustala kolor tekstu. Może być ustawiony przy użyciu różnych formatów kolorów, włączając nazwy kolorów, wartości szesnastkowe, RGB, RGBA, HSL i HSLA.

Przykłady użycia

1. Nazwy kolorów:

CSS 
    
      p {
        color: red;
      }

2. Wartości szesnastkowe:

CSS 
    
      p {
        color: #ff0000;
      }
Java university

3. RGB i RGBA:

CSS 
    
      p {
        color: rgb(255, 0, 0);
        color: rgba(255, 0, 0, 0.5); /* Przezroczysty czerwony */
      }

4. HSL i HSLA:

CSS 
    
      p {
        color: hsl(0, 100%, 50%);
        color: hsla(0, 100%, 50%, 0.5); /* Przezroczysty czerwony */
      }

Przykład użycia w HTML:

CSS 
    
      p {
        color: #3498db; /* Niebieski kolor */
      }
HTML 
    
      <body>
        <p>Ten tekst będzie niebieski.</p>
      </body>

1.2 Właściwość font-size

Właściwość font-size ustala rozmiar tekstu. Wartość może być podana w różnych jednostkach, takich jak piksele (px), jednostki względne (em, rem, %), "pochodne" od piksela (mm, cm, pt, pc), vw i vh (viewport width i viewport height), oraz inne.

Przykłady użycia

1. Piksele:

CSS 
    
      p {
        font-size: 16px;
      }

2. Względne:

%, em, rem

CSS 
    
      p {
        font-size: 150%; /* 150% bazowego rozmiaru czcionki */
        font-size: 1.5em; /* 1.5 razy większy niż bazowy rozmiar czcionki */
        font-size: 1.5rem; /* rozmiar względem rozmiaru czcionki elementu <html> */
      }

3. Jednostki "viewportowe":

CSS 
    
      p {
        font-size: 2vw; /* 2% szerokości "viewportu" */
        font-size: 2vh; /* 2% wysokości "viewportu" */
      }

Przykład użycia w HTML:

CSS 
    
      p {
        font-size: 18px; /* Rozmiar tekstu 18 pikseli */
      }
HTML 
    
      <body>
        <p>Ten tekst będzie miał rozmiar 18 pikseli.</p>
      </body>

1.3 Właściwość font-weight

Właściwość font-weight ustala grubość tekstu. Wartości mogą być podane jako słowa kluczowe (normal, bold, bolder, lighter) lub wartości liczbowe od 100 do 900, gdzie 400 odpowiada normal, a 700 odpowiada bold.

Przykłady użycia

1. Słowa kluczowe:

CSS 
    
      p {
        font-weight: bold;
      }

2. Wartości liczbowe:

CSS 
    
      p {
        font-weight: 300; /* Lekki tekst */
        font-weight: 700; /* Odpowiednik bold */
      }

Przykład użycia w HTML:

CSS 
    
      p {
        font-weight: 700; /* Gruby tekst */
      }
HTML 
    
      <body>
        <p>Ten tekst będzie gruby.</p>
      </body>
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION