Autor publikacji
Virtual Patriot - Administrator

font-size

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości font-size

Za pomocą właściwości font-size możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości font-size

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

medium

wyjątki initial

h1, h2, h3, h4, h5, h6, small, sub, sup

animowanie

tak

Interpretacja właściwości font-size

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości font-size

rozmiar

Wyjaśnienie

Za pomocą właściwości font-size oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru czcionki tekstu elementu rodzica

Przykład

  font-size:24px;
rozmiar czcionki tekstu tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "24px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font-size:24px;
        padding:1em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar czcionki tekstu tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "24px"
    </div>

  </body>
</html>

rozmiar absolutny

Wyjaśnienie

Za pomocą właściwości font-size oraz jednej z dodatkowych wartości reprezentującej rozmiar absolutny możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Dodatkowe wartości właściwości font-size reprezentujące poszczególne rozmiary absolutne

xx-small

Wartość xx-small właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo bardzo mały.

x-small

Wartość x-small właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo mały.

small

Wartość small właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar mały.

medium

Wartość medium właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar średni.

large

Wartość large właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar duży.

x-large

Wartość x-large właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo duży.

xx-large

Wartość xx-large właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo bardzo duży.

Przykład

  font-size:x-large;
rozmiar czcionki tekstu tego elementu "div" jest bardzo duży, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "x-large"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font-size:x-large;
        padding:1em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar czcionki tekstu tego elementu "div" jest bardzo duży, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "x-large"
    </div>

  </body>
</html>

rozmiar relatywny

Wyjaśnienie

Za pomocą właściwości font-size oraz jednej z dodatkowych wartości reprezentującej rozmiar relatywny możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Dodatkowe wartości właściwości font-size reprezentujące poszczególne rozmiary relatywne

smaller

Wartość smaller właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar mniejszy od rozmiaru dziedziczonego od elementu rodzica.

larger

Wartość larger właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar większy od rozmiaru dziedziczonego od elementu rodzica.

Przykład

  font-size:smaller;
czcionka tekstu tego elementu "div" posiada rozmiar mniejszy od rozmiaru dziedziczonego od elementu "body", ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "smaller"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font-size:smaller;
        padding:1em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      czcionka tekstu tego elementu "div" posiada rozmiar mniejszy od rozmiaru dziedziczonego od elementu "body", ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "smaller"
    </div>

  </body>
</html>