При написании любой статьи или документа нам часто нужно, чтобы некоторые символы стояли в определенных падежах. На веб-странице элемент HTML, текст которого необходимо преобразовать, применяется со свойством CSS « преобразование текста ». Это свойство также экономит время, так как после добавления всех символов их регистр может быть преобразован сразу.

Этот пост научит вас, как мы можем изменить текстовые регистры с помощью CSS. Итак, начнем!

Как преобразовать текст в верхний и нижний регистр с помощью CSS?

В CSS « преобразование текста Свойство » управляет регистром текста в верхнем регистре. Он также используется для преобразования текста в верхний или нижний регистр.

Значения свойств text-transform

Возможные значения свойства text-transform CSS перечислены ниже:

• • “ верхний регистр ”: это значение делает все символы в тексте элемента заглавными.
  • “ нижний регистр ”: Это значение изменяет текст элемента на нижний регистр.
  • “ капитализировать ”: это значение делает первую букву каждого слова заглавной.
  • “ никто ”: Это значение ограничивает текст элемента для изменения.
  • “ исходный ”: это значение устанавливает значение по умолчанию.
  • “ вы наследуете ”: это значение задает свое значение из родительского элемента.

Проанализируйте пример ниже!

Пример: Преобразование текста в верхний и нижний регистр

Сначала добавьте элемент div с именем класса « коробка ». Внутри тела добавьте три тега заголовков

,

и

, где текст заголовка

весь в верхнем регистре,

в нижнем регистре, а третий также в нижнем регистре.

Ниже приведен HTML-код:

< див учебный класс знак равно 'коробка' >
< h1 > нижний регистр: ДОБРО ПОЖАЛОВАТЬ В LINUXHINT h1 >
< h2 > верхний регистр: добро пожаловать в linuxhint h2 >
< h3 > капитализировать: добро пожаловать в linuxhint h3 >
див >

Блок стилей div

.коробка {
высота: 200 пикселей;
ширина: 80 % ;
граница: 4px сплошная #e4cfcf;
цвет фона: кадетский синий;
поле: 1px авто;
отступ: 10 пикселей;
}

Элемент div, созданный в приведенном выше HTML-файле, теперь оформлен с использованием свойств CSS, которые объясняются ниже:

• • “ рост ” используется для установки высоты div.
  • “ ширина ” используется для установки ширины div.
  • “ граница ” используется для применения границы вокруг элемента шириной 4 пикселя, типом сплошной линии и цветом #e4cfcf.
  • “ фоновый цвет ” определяет цвет фона элемента.
  • “ прибыль » регулирует пространство с каждой стороны элемента.
  • “ набивка ” используется для создания пространства вокруг содержимого элемента div или внутри границы элемента.

Приведенные ниже блоки кода указывают на то, что все элементы заголовков оформлены с разными значениями свойств text-transform. Элемент

применяется со свойством text-transform со значением, установленным как « нижний регистр ”:

h1 {
преобразование текста: нижний регистр;
}

Элемент

применяется со свойством text-transform со значением, установленным как « верхний регистр ”:

h2 {
преобразование текста: верхний регистр;
}

Для элемента

значение свойства text-transform установлено как « капитализировать ”:

h3 {
преобразование текста: использовать заглавные буквы;
}

При предоставлении вышеупомянутого кода весь текст первого заголовка преобразуется в строчные буквы, а второй заголовок — в верхний. Принимая во внимание, что первая буква каждого слова в третьем заголовке заглавная:

Большой! Мы успешно научились преобразовывать текст в верхний, нижний и все заглавные буквы.

Заключение

Свойство CSS text-transform управляет регистром текста и используется для изменения регистра текста документа. Это свойство применяется ко всем элементам, где значения этого свойства могут быть прописными, строчными, заглавными или отсутствовать. В этом блоге объясняется процедура преобразования текста в верхний и нижний регистр с использованием свойства CSS text-transform.