Pisząc dowolny artykuł lub dokument, często potrzebujemy niektórych znaków, aby być w określonych przypadkach. Na stronie internetowej element HTML, którego tekst musi zostać przekształcony, jest stosowany do właściwości CSS ”Tekst-transform". Ta właściwość oszczędza również czas w taki sposób, że po dodaniu wszystkich postaci ich obudowa można od razu przekształcić.

Ten post nauczy Cię, w jaki sposób możemy zmienić przypadki tekstu za pomocą CSS. A więc zacznijmy!

Jak podnosić tekst i małe tekst za pomocą CSS?

W CSS „Tekst-transform„Własność kontroluje kapitalizację tekstu. Jest również wykorzystywany do konwersji tekstu na wielkie lub małe litery.

Wartości właściwości transformacji tekstowej

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

• • "duże litery”: Ta wartość sprawia, że ​​wszystkie znaki w tekście elementu są kapitalizowane.
  • "małe litery”: Ta wartość zmienia tekst elementu na małe litery.
  • "skapitalizować”: Ta wartość zmienia pierwszą literę każdego słowa.
  • "nic”: Ta wartość ogranicza tekst elementu do modyfikacji.
  • "wstępny”: Ta wartość ustawia wartość domyślną.
  • "dziedziczyć”: Ta wartość ustawia swoją wartość z elementu nadrzędnego.

Przeanalizuj poniższy przykład!

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

Najpierw dodaj element DIV z nazwą klasy „skrzynka". Wewnątrz ciała dodaj trzy znaczniki nagłówka

,

, I

, gdzie tekst

Nagłówek jest w dużej mierze,

jest małymi literami, a trzecia jest również małymi literami.

Poniżej znajduje się kod HTML:

Małe litery: Witamy w Linuxhint

Ogromne: Witamy w Linuxhint

Kapitalizuj: Witamy w Linuxhint

Style Box Div

.skrzynka
Wysokość: 200px;
Szerokość: 80%;
Border: 4px solid #e4cfcf;
kolor tła: kadetblue;
Margines: 1px Auto;
Wyściółka: 10px;

Div utworzony w powyższym pliku HTML jest teraz stylizowany z właściwościami CSS, które zostały wyjaśnione poniżej:

• • "wysokość”Jest wykorzystywany do ustawiania wysokości div.
  • "szerokość”Jest wykorzystywany do ustawiania szerokości div.
  • "granica„Właściwość jest wykorzystywana do zastosowania granicy wokół elementu, która ma szerokość 4px, typ linii ciągłej i kolor #e4cfcf.
  • "kolor tła”Określa kolor tła elementu.
  • "margines„Właściwość dostosowuje przestrzeń z każdej strony elementu.
  • "wyściółka„Własność jest wykorzystywana do produkcji przestrzeni wokół zawartości elementu DIV lub wewnątrz granicy elementu.

Poniższe bloki kodu wskazują, że wszystkie elementy nagłówka są stylizowane z różnymi wartościami właściwości transformowania tekstu.

Element jest stosowany z transformą tekstową właściwości z ustawioną wartością jako „małe litery”:

H1
Tekst-transform: małe litery;

Element jest stosowany z właściwością transformowania tekstu z ustawioną wartością jako „duże litery”:

H2
TEXT-TRANSFORM: UpperCase;

Dla

element, wartość właściwości tekstowej jest ustawiona jako „skapitalizować”:

H3
Tekst-transform: kapitalizacja;

Zapewniając wyżej wymieniony kod, tekst pierwszego nagłówka jest przekształcany w małe litery, a drugie na kierunku wielkimi. Podczas gdy pierwsza litera każdego słowa jest kapitalizowana w trzecim kierunku:

Świetnie! Z powodzeniem nauczyliśmy się przekształcić tekst w wielkie, małe litery i całość.

Wniosek

Właściwość tekstu tekstowego CSS kontroluje kapitalizację tekstu i jest wykorzystywana do zmiany przypadków tekstu dokumentu. Ta właściwość ma zastosowanie do wszystkich elementów, w których wartości tej właściwości mogą być wielkie, małe litery, kapitalizację lub brak. Ten blog wyjaśnił procedurę przekształcania tekstu na wielkie i małe litery za pomocą właściwości Tekst-transform CSS.