Ostatnio edytowany:

text-transform

Autor: Virtual Patriot

Opis właściwości text-transform

Za pomocą właściwości text-transform możemy określić dodatkowy sposób przekształcenia liter tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości text-transform

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości text-transform

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości text-transform

none

Opis

Wartość none jest domyślną wartością właściwości text-transform.

Domyślnie litery tekstu elementu HTML nie posiadają żadnego dodatkowego sposobu przekształcenia.

Przykład

LITERY TEKSTU tego elementu "DIV" nie posiadają ŻADNEGO dodatkowego SPOSOBU przekształcenia

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 {
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      LITERY TEKSTU tego elementu "DIV" nie posiadają ŻADNEGO dodatkowego SPOSOBU przekształcenia
    </div>

  </body>
</html>

capitalize

Opis

Za pomocą wartości capitalize właściwości text-transform możemy sprawić, że pierwsze litery wszystkich wyrazów tekstu interesującego nas elementu HTML zostaną zamienione na duże litery.

Przykład

pierwsze litery wszystkich wyrazów tekstu tego elementu "div" zostały zamienione na duże litery, ponieważ do tego elementu "div" została dodana właściwość "text-transform" wraz z wartością "capitalize"

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 {
        text-transform:capitalize;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      pierwsze litery wszystkich wyrazów tekstu tego elementu "div" zostały zamienione na duże litery, ponieważ do tego elementu "div" została dodana właściwość "text-transform" wraz z wartością "capitalize"
    </div>

  </body>
</html>

uppercase

Opis

Za pomocą wartości uppercase właściwości text-transform możemy sprawić, że wszystkie litery tekstu interesującego nas elementu HTML zostaną zamienione na duże litery.

Przykład

wszystkie litery tekstu tego elementu "div" zostały zamienione na duże litery, ponieważ do tego elementu "div" została dodana właściwość "text-transform" wraz z wartością "uppercase"

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 {
        text-transform:uppercase;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      wszystkie litery tekstu tego elementu "div" zostały zamienione na duże litery, ponieważ do tego elementu "div" została dodana właściwość "text-transform" wraz z wartością "uppercase"
    </div>

  </body>
</html>

lowercase

Opis

Za pomocą wartości lowercase właściwości text-transform możemy sprawić, że wszystkie litery tekstu interesującego nas elementu HTML zostaną zamienione na małe litery.

Przykład

WSZYSTKIE LITERY TEKSTU TEGO ELEMENTU "div" zostały zamienione na MAŁE LITERY, ponieważ do tego elementu "div" została dodana właściwość "text-transform" wraz z wartością "lowercase"

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 {
        text-transform:lowercase;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      WSZYSTKIE LITERY TEKSTU TEGO ELEMENTU "div" zostały zamienione na MAŁE LITERY, ponieważ do tego elementu "div" została dodana właściwość "text-transform" wraz z wartością "lowercase"
    </div>

  </body>
</html>