Text uppercase css: text-transform | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

CSS text-transform Property — GeeksforGeeks

Улучшить статью

Сохранить статью

Нравится Статья

ManasChhabra2

ученый

1625 опубликованных статей

Читать

Обсудить

Улучшить статью

Сохранить статью

Нравится Статья

Свойство text-transform используется для управления капитализацией текста.
Синтаксис:

 преобразование текста: нет|заглавные|верхние|нижние регистры|начальные|наследовать;

Значения свойств:

нет: Имеет значение по умолчанию. У него нет заглавной буквы.
Синтаксис:

 преобразование текста: нет;

Пример:

html

90 003

< HTML >

< головка >

< 90 069 title >

CSS text-transform Property

название >

< стиль >

ч2 {

цвет: зеленый;

}

p. gfg {

text-transform: нет;

}

стиль >

головка >

< корпус >

< центр > 9 0069

< h2 >GeeksForGeeks h2 >

 9000 2  
            <   p   class   =   "gfg"   >GeeksforGeeks  p   > 
  
  
             <   p   класс   =   "gfg"   > 
              Это информационный портал для гиков. 
               p   > 
  
  
    корпус   > 
  
   9 0068 html   >

Вывод:

с большой буквы :

Синтаксис:

 text-transform:capitalize;

Пример:

html

900 68 < html >

< головка >

< title >

CSS text-transform Property

90 069 заголовок >

< стиль >

h2 {

цвет: зеленый;

}

p. gfg {

text-transform: заглавные буквы;

}

стиль >

головка >

< корпус >

< 900 69 центр >

< h2 >GeeksForGeeks h2 >

< h3 >text-transform: capitalize: h3 >

9 0068 < p класс = "gfg" > GeeksforGeeks p >

< p класс = "gfg" >

Это информационный портал для гиков.

p >

90 068 корпус >

html >

Вывод:

верхний регистр: Используется для преобразования или преобразования всех символов в каждом слове в верхний регистр.
Синтаксис:

 text-transform:uppercase;

Пример:

html

90 003

< html >

< головка >

< Название >

CSS Text-Transform. 69 Стиль >

h2 {

цвет: зеленый;

}

p.gfg {

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

}

стиль >

головка >

< корпус >

< центр >

< h2 >GeeksForGeeks h2 >

< h3 >текстовое преобразование: верхний регистр: h3 >

< p класс = "gfg" >Гики для гиков p >

< p класс = 90 069 "gfg" >

Это информационный портал для гиков.

p >

90 068 корпус >

html >

Вывод:

нижний регистр: Используется для преобразования или преобразования всех символов в каждом слове в нижний регистр.
Синтаксис:

 text-transform:lowercase;

Пример:

html

< html >

< головка > 9000 3

< title >

CSS text-transform Property

90 067

   заголовок   > 
         <   стиль   > 90 069
             h2 { 
                 цвет: зеленый; 
             } 
             
             p. gfg { 
                 text-transform: нижний регистр; 
             } 
           стиль   > 
   головка   > 
  
  <   корпус   > 
        9 0068 <   центр   > 
             <   h2   >GeeksForGeeks 9006 8 ч2   > 
  
             <   h3   >text-transform: нижний регистр:  h 3   > 
             <   p   class   =   "gfg"   >GeeksforGeeks  р   > 
  
  
             <   р  900 68 класс   =   "gfg"   > 
              Это информационный портал для гиков. 
             
    html   >

Вывод:

начальный: Устанавливает для свойства значение по умолчанию.
Синтаксис:

 text-transform:initial;

Пример:

html

900 68 < html >

< головка >

< title >

CSS text-transform Property

90 069 заголовок >

< стиль >

h2 {

цвет: зеленый;

}

              p. gfg { 
                 text-transform: initial; 
            } 
           стиль   > 
    голова   > 
  
  <   корпус   > 
         <  90 068 центр   > 
             <   h2   >GeeksForGeeks  h2   > 
  
              <   h3   >text-transform: initial:  h3   >  90 068            <   p   класс   =   "gfg"   > GeeksforGeeks  p   > 
  
  
             <   p   класс   =   "gfg"   > 
              Это информационный портал для гиков. 
               p   > 
  
  
 90 068 
   корпус   > 
  
    html   >

Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством CSS Text-Transform , перечислены ниже:

Google Chrome 1.0 и выше
Edge 12.0 и выше
Internet Explorer 4.0 и выше
Firefox 1. 0 и выше
Opera 7.0 и выше
Safari 1.0 и выше

Последнее обновление: 07 июн, 2022
Нравится статья
Сохранить статью
Преобразование текста CSS | Как работает преобразование текста CSS
Свойство text-transform определяет капитализацию текста. Используя свойства CSS, вы можете регулировать, как в тексте пишется заглавная буква. С помощью свойств преобразования текста CSS вы можете изменить текст объекта HTML на заглавный, верхний и нижний регистры. Объединив свойства text-transform с псевдоселекторами, вы можете сделать еще больше настроек, которые отделят ваши страницы от конкурентов.
Свойство CSS text-transform — это хороший способ перевести заголовки в верхний регистр без редактирования HTML-страниц. Это свойство изменяет заглавные буквы содержимого внутри элемента. Свойство text-transform поддерживает все виды веб-браузеров.
Синтаксис
Синтаксис свойства text-transform может быть описан следующими значениями text-transform:
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
нет: Этот параметр не имеет заглавных букв и будет иметь значение по умолчанию. Это отображает текст как есть.

Capitalize: Этот параметр используется для преобразования первого символа каждого слова в верхний регистр.
верхний регистр: Этот параметр используется для преобразования всех символов в верхний регистр.
нижний регистр: Этот параметр используется для преобразования всех символов в нижний регистр.
начальный: Этот параметр можно использовать для установки значения свойства по умолчанию.
inherit: Этот параметр можно использовать для наследования свойства от родительского элемента.
Как работает свойство преобразования текста в CSS?
Свойство CSS text-transform используется для управления текстом в верхнем и нижнем регистре. Вы можете использовать приведенные выше значения, чтобы увидеть лучшие результаты.

Например, мы будем использовать значение в верхнем регистре для преобразования приведенного ниже текста.
Добро пожаловать в Educba…
Мы будем использовать свойство text-transform: uppercase для преобразования текста в верхний регистр.
ДОБРО ПОЖАЛОВАТЬ В EDUCBA…
Таким образом, свойство text-transform можно использовать для работы с содержимым элементов HTML.
Примеры
Ниже приведены упомянутые примеры:
Пример #1
Код:
<голова> <мета-кодировка="utf-8"> Пример преобразования текста CSS <стиль> .mytext1 { преобразование текста: использовать заглавные буквы; } <тело>
Исходный текст

EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.

Использовать заглавные буквы

EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.

Результат: Откройте файл в браузере, и он выдаст следующий результат:
Объяснение: Текст класса mytext1. Свойство Capitalize может использовать заглавные слова в одинарных или двойных кавычках, а также первую букву после дефиса. Первая буква после числа не будет заглавной

Пример #2
Код:
<голова> <мета-кодировка="utf-8"> Пример преобразования текста CSS <стиль> .mytext1 { преобразование текста: верхний регистр; } <тело>
Исходный текст

EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.

Использовать заглавные буквы

EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.

Вывод:
Объяснение: В приведенном выше примере мы использовали свойство text-transform, чтобы преобразовать текст в верхний регистр в тексте класса mytext1.
Пример #3
Код:
<голова> <мета-кодировка="utf-8"> Пример преобразования текста CSS <стиль> . mytext1 { преобразование текста: нижний регистр; }
<тело>
Исходный текст

EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.

Использовать заглавные буквы

EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.

Вывод:
Объяснение: В приведенном выше примере мы использовали свойство text-transform для преобразования текста в нижний регистр в тексте класса mytext1.

Пример #4
Код:

<голова> <мета-кодировка="utf-8"> Пример преобразования текста CSS <стиль> .mytext1 { преобразование текста: нет; } <тело>
Исходный текст
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.
Нет значения
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей.