Большие буквы html: Свойство text-transform, регистр символов — Оформление текста — HTML Academy

Разное 

Text-transform и копирование — Веб-стандарты

Что происходит при копировании текста с text-transform.

Alphabet, Le Bistronome (CC BY-NC 2.0)

В CSS есть свойство text-transform. С помощью него можно менять регистр текста: можно преобразовать текст в ПРОПИСНЫЕ, строчные или Капитализировать Только Первые Буквы Слов. Это делается значениями uppercase, lowercase и capitalize, соответственно. Помимо них есть значения full-width и full-size-kana, про которые мы в этот раз говорить не будем.

Пример текста с text-transform: uppercase

Пример текста с text-transform: lowercase

Пример текста с text-transform: capitalize

Выше приведен пример использования свойства text-transform. Попробуйте скопировать любой из них и вставить куда-нибудь. Результат будет отличаться в зависимости от вашего браузера:

  • Если у вас браузер на WebKit или Blink (Chrome, Safari, Opera 15+, Яндекс. Браузер и вскоре даже Edge), то вставится измененный текст — тот, который вы видите в браузере.
  • В остальных браузерах (Firefox, IE и пока Edge) вставится исходный текст — тот, который написан в HTML.

Стандарт до недавнего времени не определял, какое поведение является верным, поэтому оно стало предметом споров в баг-трекерах. Баг для Firefox завели еще в 2000 году, баг для WebKit с противоположным смыслом — в 2010. У сторонников обоих вариантов есть аргументы.

Главный аргумент за копирование измененного текста, как в WebKit — соответствие ожиданиям пользователя. Человек не может понять, в результате чего текст отображается заглавными буквами. Может быть, он прописан таким образом в исходном коде, а может быть, к нему применено text-trasform: uppercase. Если пользователь будет копировать текст в верхнем регистре, а потом вставлять его и иногда видеть что-то другое, ему будет казаться, что веб сломался и глючит.

Аргумент другой стороны в том, что такое поведение нарушает принцип разделения содержимого и оформления. CSS не должен влиять на контент страницы. А раз создатели сайта решили менять регистр через CSS, то они относятся к этому как к стилизации, и у пользователя должен быть доступ к изначальному варианту текста.

В 2016 году за этот вопрос взялась Рабочая группа CSS (CSSWG). При обсуждении выделили основные сценарии использования text-transform:

  • p::first-line { text-transform: uppercase } — первую строку набирают прописными буквами, как это иногда делают в англоязычной художественной литературе. В этом случае лучше копировать исходный текст, иначе он будет выглядеть странно.
  • abbr { text-transform: lowercase; font-variant: small-caps } — аббревиатуры в тексте набирают капителью. Свойство font-variant: small-caps берёт специальное начертание для капители из шрифта или отображает строчные буквы как прописные, только уменьшенного размера, если их нет. В этом случае тоже лучше копировать исходный текст, иначе аббревиатуры будут набраны строчными буквами.
  • h2 { text-transform: uppercase } — стилизуют заголовки с помощью прописных букв. Здесь применимы аргументы за оба варианта поведения.
  • em { font-style: normal; text-transform: uppercase } — используют прописные буквы для выделения важных фрагментов. Здесь тоже применимы оба аргумента.

В результате обсуждений в рабочей группе, в 2018 году было принято решение: дополнить стандарт CSS указанием, что свойство text-transform не должно влиять на копируемый текст.

Коммит, который вносит изменения в стандарт.

Сейчас баг в Firefox закрыт как «wontfix», баг в WebKit по-прежнему открыт. Но уже можно надеяться, что скоро его поправят, и копирование текста с text-transform начнет работать во всех браузерах одинаково.

Создание заглавных букв с помощью CSS. Заглавные HTML буквы и CSS расстояние между буквами Большие буквы в html

Здравствуйте, читатели этого блога. Сегодня я расскажу о том, как можно сделать через css все заглавные буквы. Конечно, для этого можно включить Caps Lock и писать нужный текст, но это достаточно примитивный метод. А что, если вам надо выделить отдельный абзац в уже готовой статье?

Делаем в css все буквы заглавными

Для этого есть свойство text-transform , которое, как вы уже догадались, трансформирует текст. У него есть такие значения:

  • lowercase – весь текст выводится строчными буквами
  • uppercase – все слова выводятся заглавными (то, что нам и нужно)
  • capitalize – первая буква каждого слова выводится заглавной

Вот, собственно, и все, что вам нужно знать. Остается только понять, как обратиться к нужному элементу. Давайте представим такой пример: вам нужно пятому абзацу в статье сделать все заглавные буквы. И как это можно реализовать?

Как дотянуться до нужного элемента?

Как вы знаете, параграф создается с помощью парного html-тега , все содержимое которого и становится абзацем. Остается всего лишь задать новый стилевой класс для него:

Теперь мы имеем возможность обратиться через язык css к этому конкретному абзацу, не затронув остальных. Сделать это можно так:

Uppercase-letter{
Text-transform: uppercase;
}

Этот способ подойдет, когда вам нужно в какой-то отдельной статье выделить фрагмент. А что, если на всех страницах должен быть определенный текст заглавными буквами. В таком случае лучше поместить блок в файл шаблона, чтобы не писать его каждый раз.

А возможно вам нужно в каждой статье второй абзац выделить с помощью css заглавными буквами. Тогда вам подойдет другой вариант. Найдите блок, в котором выводится статья и обратитесь ко второму абзацу с помощью псевдокласса nth-child. В данном примере у нас блок со статьей имеет класс article .

Article p:nth-child(2){
Text-transform: uppercase
}

Как видите, для каждого конкретного случая подходит свое решение. Самое важное, это помнить о свойстве text-transform , которое и меняет регистр букв.

В целом, использовать выводить текст так не рекомендуется, потому что это сильно ухудшает его восприятие, но отдельные особенно важные фрагменты выделить можно.

Сегодня мы разобрали свойство text-transform . Подписывайтесь на блог, чтобы получать новые статьи.

Позволяет изменять регистр букв текста.

По-умолчанию устанавливается значение none , которое не оказывает на текст никакого воздействия. Регистр текста остается прежним. Значения uppercase и lowercase преобразуют символы в верхний и нижний регистр, соответственно. Если указать значение capitalize , то только первые символы каждого слова будут прописными. Inherit наследует значение родителя.

Пример

h4 { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; }

text-transform

Это заголовок. К нему применено свойство text-transform со значением uppercase. Все символы будут прописными.

К данному абзацу применено Свойство Text-transform со Значением Lowercase, а значит все буквы будут в нижнем регистре.

А к этому, последнему абзацу применено свойствоо text-transform со свойством CAPITALIZE. Первые буквы каждого слова будут прописными, и только они.

Верхнее свойство CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите верхний край позиционированного элемента

на 50 пикселей ниже верхнего края его ближайший предок:

div {
  position: absolute;

  вверху: 50 пикселей;
  граница: 3 пикселя сплошного зеленого цвета;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство top влияет на вертикальное положение позиционируемого элемента. Это свойство не влияет на непозиционированные элементы.

  • Если положение: абсолютное; или положение: фиксированное; — Свойство top устанавливает верхний край элемента на единицу выше/ниже верхний край своего ближайшего расположенного предка.
  • Если положение: относительное; — свойство top делает элемент вершина край, чтобы переместиться выше/ниже своего нормального положения.
  • Если положение: липкое; — свойство top ведет себя так, как будто его позиция относительный, когда элемент находится внутри области просмотра, и, как и его положение, фиксируется, когда он снаружи.
  • Если позиция: статическая; — свойство top не действует.

Показать демо ❯

Значение по умолчанию: авто
По наследству: нет
Анимация: да. Читать про
анимированный Попробуй
Версия: CSS2
Синтаксис JavaScript: объект .style.top=»100px» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
верх 1,0 5,0 1,0 1,0 6,0

Синтаксис CSS

top: auto| длина |начальный|наследовать;

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

Значение Описание Демо
авто Позволяет браузеру вычислить позицию верхнего края. Это по умолчанию Демонстрация ❯
длина Устанавливает положение верхнего края в пикселях, см и т. д. Допускаются отрицательные значения. Читать о единицах длины Демонстрация ❯
% Устанавливает положение верхнего края в % содержащего элемента. Допускаются отрицательные значения Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Дополнительные примеры

Пример

Используйте свойство top с отрицательным значением и для элемента без позиционированные предки:

div.b {
  позиция: абсолютная;
верх: -20px;
  граница: 3 пикселя сплошного синего цвета;
}

div.

c {
  position: absolute;
верх: 150 пикселей;
  граница: 3 пикселя сплошного зеленого цвета;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Позиционирование CSS

Ссылка CSS: свойство bottom

Ссылка CSS: свойство left

Ссылка CSS: свойство right

Ссылка HTML DOM: свойство top

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

2 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.

W3Schools работает на основе W3.CSS.

Прописные буквы в теге HTML по сравнению с преобразованием текста CSS

спросил

Изменено 3 года, 3 месяца назад

Просмотрено 43к раз

Есть ли разница между прямым написанием текста в верхнем регистре в теге HTML, например:

  
 МОЙ ТЕКСТ ЗДЕСЬ

или не иметь прямого верхнего регистра и преобразовать его с помощью CSS следующим образом:

  
 Мой текст здесь

CSS:

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

Что будет быстрее загружаться в браузере? И почему?

  • HTML
  • CSS

8

Вопрос не в том, что будет загружаться быстрее, хотя верхний регистр будет «загружаться быстрее», чем загрузка дополнительных байтов из css.

На мой взгляд, в этом вопросе есть вопрос доступности.

Вы должны написать текст так, как он должен быть написан, чтобы его мог прочитать читатель (для слепых).

Кроме того, я бы лично написал это с помощью преобразования текста, поскольку его легко изменить, если у вас много h4 на вашем веб-сайте, и вы не хотите писать их снова и снова, если вы измените внешний вид ваших h4.

1

Существует разница в содержимом документа , «МОЙ ТЕКСТ ЗДЕСЬ» и «Мой текст здесь» (просто оформленный как , отображаемый как в верхнем регистре). Это имеет значение в ситуациях рендеринга без CSS, в сценариях и другой автоматизированной обработке. Похоже, что большинство поисковых систем обрабатывают тексты без учета регистра, но это не гарантируется и может измениться, по крайней мере, в некоторых ситуациях. Когда текст копируется и вставляется из документа HTML, все стили часто теряются, поэтому вы получаете только содержимое.

Любая разница в скорости загрузки, скорее всего, несущественна, но очевидно, что версия с нужным написанием в содержимом быстрее, чем та, для которой требуется загрузить и применить правило таблицы стилей.

1

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

Но разница в скорости загрузки страницы была бы несущественной, и не заметила бы…

Помните о проблемах с доступностью при использовании заглавных букв.

text-transform: верхний регистр лучше для доступности, чем ввод всех заглавных букв в разметке HTML. Тем не менее, согласно WebAIM, использование всех заглавных букв может быть проблемой доступности в целом, независимо от того, используются ли они в вашем HTML или с использованием CSS.

Вот некоторые проблемы, связанные с использованием заглавных букв:

  1. «Длинные сегменты контента с заглавными буквами труднее читать».

    No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *