Pisząc jakikolwiek artykuł lub dokument, często potrzebujemy kilku znaków, aby były w konkretnych przypadkach. Na stronie internetowej element HTML, którego tekst wymaga przekształcenia, jest stosowany z właściwością CSS „ przekształcanie tekstu ”. Właściwość ta oszczędza również czas w taki sposób, że po dodaniu wszystkich znaków można od razu przekształcić ich wielkość liter.

Ten post nauczy Cię, jak możemy zmieniać wielkość liter za pomocą CSS. A więc zacznijmy!

Jak pisać wielkimi i małymi literami za pomocą CSS?

W CSS „ przekształcanie tekstu ” kontroluje wielkość liter w tekście. Służy również do konwersji tekstu na wielkie lub małe litery.

text-transform Wartości właściwości

Możliwe wartości właściwości CSS text-transform są wymienione poniżej:

• • “ duże litery ”: Ta wartość powoduje, że wszystkie znaki w tekście elementu są pisane wielkimi literami.
  • “ małe litery ”: Ta wartość zmienia tekst elementu na małe litery.
  • “ skapitalizować ”: Ta wartość zmienia pierwszą wielką literę każdego słowa.
  • “ Żaden ”: Ta wartość ogranicza tekst elementu do modyfikacji.
  • “ Inicjał ”: Ta wartość ustawia wartość domyślną.
  • “ dziedziczyć ”: Ta wartość ustawia swoją wartość na podstawie elementu nadrzędnego.

Przeanalizuj poniższy przykład!

Przykład: przekształcanie tekstu na wielkie i małe litery

Najpierw dodaj element div z nazwą klasy „ skrzynka ”. Wewnątrz treści dodaj trzy znaczniki nagłówka

,

i

, gdzie tekst nagłówka

jest pisany wielkimi literami,

małymi literami, a trzeci również małymi literami.

Poniżej znajduje się kod HTML:

< dz klasa = 'skrzynka' >
< h1 > małe litery: WITAMY W LINUXHINT h1 >
< h2 > wielkie litery: witamy w linuxhint h2 >
< h3 > pisz wielką literą: witamy w linuxhint h3 >
dz >

Pole stylu div

.skrzynka {
wysokość: 200px;
szerokość: 80 % ;
obramowanie: pełne 4 piksele #e4cfcf;
kolor tła: cadetblue;
margines: automatyczny 1px;
wypełnienie: 10px;
}

Div utworzony w powyższym pliku HTML jest teraz stylizowany za pomocą właściwości CSS, które wyjaśniono poniżej:

• • “ wzrost ” służy do ustawiania wysokości elementu div.
  • “ szerokość ” służy do ustawiania szerokości elementu div.
  • “ granica ” służy do zastosowania obramowania wokół elementu, które ma szerokość 4px, typ linii ciągłej i kolor #e4cfcf.
  • “ kolor tła ” określa kolor tła elementu.
  • “ margines ” dostosowuje przestrzeń z każdej strony elementu.
  • “ wyściółka ” służy do tworzenia przestrzeni wokół zawartości elementu div lub wewnątrz obramowania elementu.

Poniższe bloki kodu wskazują, że wszystkie elementy nagłówka mają style z różnymi wartościami właściwości przekształcania tekstu. Element

jest stosowany z właściwością text-transform o wartości ustawionej jako „ małe litery ”:

h1 {
transformacja tekstu: małe litery;
}

Element

jest stosowany wraz z właściwością text-transform o wartości ustawionej jako „ duże litery ”:

h2 {
transformacja tekstu: wielkie litery;
}

Dla elementu

wartość właściwości text-transform jest ustawiona jako „ skapitalizować ”:

h3 {
przekształcanie tekstu: wielkie litery;
}

Podając powyższy kod, tekst pierwszego nagłówka jest w całości przekształcany na małe litery, a drugi nagłówek na duże. podczas gdy pierwsza litera każdego słowa jest pisana wielką literą w trzecim nagłówku:

Świetny! Z powodzeniem nauczyliśmy się przekształcać tekst na wielkie, małe i wszystkie pisane wielkimi literami.

Wniosek

Właściwość text-transform CSS kontroluje wielkość liter w tekście i jest wykorzystywana do zmiany wielkości liter w tekście dokumentu. Ta właściwość ma zastosowanie do wszystkich elementów, w których wartościami tej właściwości mogą być wielkie, małe litery, wielkie litery lub brak. Ten blog wyjaśnił procedurę konwersji tekstu na wielkie i małe litery za pomocą właściwości CSS text-transform.