Ostatnio edytowany:

liczby

Autor: Virtual Patriot

Opis

W języku CSS do dyspozycji mamy dwa rodzaje liczb. Liczby całkowite oraz liczby dziesiętne. Zarówno liczby całkowite, jak i liczby dziesiętne mogą być liczbami dodatnimi lub liczbami ujemnymi.

Rodzaje liczb w języku CSS

liczby całkowite

Liczby całkowite tworzymy za pomocą jednego lub kilku znaków z przedziału od 0 do 9. Znak 1 oznacza liczbę jeden. Znak 2 oznacza liczbę dwa. Znaki 19 oznaczają liczbę dziewiętnaście itd.

Przykładowe zapisy

0, 5, 87, 1410, 00009 (oznacza również liczbę 9)

liczby dziesiętne

Liczby dziesiętne tworzymy tak samo jak liczby całkowite z tą różnią, iż po dodatkowym znaku . (kropka) za pomocą jednego lub kilku znaków z przedziału od 0 do 9 możemy określić dodatkową wartość ułamka dla liczby całkowitej występującej przed wspomnianym znakiem kropki.

Każdą liczbę całkowitą możemy zapisać w postaci liczby dziesiętnej, na przykład: "0.0", "1.0", "2.0", "19.0" itd.

Gdy liczba dziesiętna jest z przedziału "0.0 - 1.0", wtedy pierwszy znak "0" możemy pominąć. Innymi słowy zapis ".5" jest równoznaczny z zapisem "0.5", natomiast zapis ".09" jest równoznaczny z zapisem "0.09" itd.

Przykładowe zapisy

0.5, 3.5, 5.375, 99.99, 0010.01 (oznacza również liczbę 10.01), .99 (oznacza również liczbę 0.99)

liczby dodatnie

Liczby dodatnie są tymi liczbami, które nie posiadają znaku - na początku swojego zapisu. Liczby dodatnie są większe od zera. Liczbami dodatnimi mogą być zarówno liczby całkowite, jak i liczby dziesiętne. Liczby dodatnie mogą posiadać znak + na początku swojego zapisu (lecz nie muszą). Innymi słowy zapis +87 jest równoznaczny z zapisem 87.

Liczba "0" nie jest liczbą dodatnią, lecz w języku CSS liczbę "0" możemy zapisać również w postaci "+0".

Przykładowe zapisy

+9, 9, +50, 50, +.8, +0.8, 0.8, +00009

liczby ujemne

Liczby ujemne muszą posiadać znak - na początku swojego zapisu. Liczby ujemne są mniejsze od zera. Liczbami ujemnymi mogą być zarówno liczby całkowite, jak i liczby dziesiętne.

Liczba "0" nie jest liczbą ujemną, lecz w języku CSS liczbę "0" możemy zapisać również w postaci "-0".

Przykładowe zapisy

-9, -50, -0.8, -.8, -00009

Przykład

  transform:scaleX(0.5);

Rozmiar szerokości przykładowego elementu "div" został przeskalowany (w tym wypadku zmniejszony o połowę), ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "scaleX()", w której to funkcji została użyta wartość w postaci liczby dziesiętnej "0.5".

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 {
        transform:scaleX(0.5);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak