Autor publikacji: Virtual Patriot - Administrator

liczby

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Październik 01 2019

Zobacz również: w3.org - numeric data types (LV4)

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 dziesiętne, liczby dodatnie, liczby ujemne

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.

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.

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".

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ł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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja

: tak
: tak
: tak
: tak
: tak
: tak