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

Leave a Comment / Css / By /

Содержание

Строчные буквы все затем заглавные-pure CSS



Я видел эту тему здесь: сначала строчные буквы текста, а затем заглавные. Возможно ли это с CSS?

Но это был не чистый CSS. У меня есть div, который содержит этот текст:

<div>
RaWr rAwR
</div>

Я хочу использовать css, чтобы он выглядел как «Rawr Rawr». Вырезать если я просто текст-трансформирую заглавными буквами, то получается «RaWr RAwR», а уже заглавные буквы остаются заглавными. Поэтому мне нужно сначала записать все это в нижнем регистре, а затем заглавными буквами, есть ли решение обернуть его в div?

Я попытался обернуть его в другой div, но это не сработало:

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div><div>RaWr rAwR</div></div>
capitalize css
Поделиться Источник
Noitidart     17 февраля 2014 в 11:06

4 ответа

  • Разрешать только заглавные и строчные буквы

    Я хотел бы принимать от пользователя только строчные и заглавные буквы. Я попробовал следующий код, он повторяет недопустимое символьное сообщение, но не работает. Я имею в виду, что он не проверяет. Он просто отображает сообщение. Кто-нибудь поможет? <form action= method=post> <input…

  • Как отобразить строчные и прописные буквы

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


17

Это должно быть сделано, когда у вас есть отдельные слова в разных div

#test3 { text-transform: lowercase; }

#test3::first-letter { text-transform: uppercase; }


<div>haLLo</div>

Поделиться bdart     17 февраля 2014 в 11:14


12

К сожалению, вы не можете сделать это с чистым CSS. На данный момент ваша лучшая надежда-либо переписать текст, чтобы избежать медиальных/конечных заглавных букв, либо использовать JavaScript. (Да, мои глаза тоже закатываются.)

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

#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }

… значение text-transform для дочернего элемента теперь равно capitalize, и больше ничего. Это единственное преобразование, применяемое к этому элементу.

Существует проект предложения, позволяющий авторам определять пользовательские таблицы сопоставления с помощью правила @text-transform , но в нынешнем виде я сомневаюсь, что оно сработает для этого сценария. Проблема в том, что дескриптор scope (где в слове применяется преобразование) принимает только одно значение—вы можете определить преобразование для всего слова или некоторой комбинации начальной, конечной или средней частей слова, но это не очевидно, если бы вы могли иметь разные преобразования для каждой части.

Это, по-видимому, признается в выпуске 8 проекта предложения wiki, и несколько преобразований обсуждались пару лет назад в стиле www . В этом потоке предлагается разрешить для элемента только одно значение text-transform и объединить его в правиле @text-transform ; однако в проекте спецификации отмечается, что:

Если упомянутые текстовые преобразования имеют область, отличную от области, указанной в текстовом преобразовании, которое ссылается на них, они применяются на пересечении двух областей.

Так что такое правило не сработает:

@text-transform lowercase-then-capitalize {
    transformation: lowercase, "a-z" to "A-Z" single;
    scope: initial;
}

Я вижу три очевидных решения:

  1. разрешить указывать несколько значений scope в правиле @text-transform ;
  2. добавить дескриптор для наследования предыдущего преобразования без переопределения его значения области действия; или
  3. разрешить несколько значений text-transform для селектора.

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

Поделиться Jordan Gray     17 февраля 2014 в 12:59


1

Вы используете вложенный div,

Так #test3 { text-transform: lowercase; } применяется для родителей div поэтому он применяется как для родителя, так и ребенка ДИВС

когда вы переопределяете #test3 div { text-transform: capitalize; } на дочерний Div, первый стиль text-transform: lowercase; игнорируется

Поделиться Sam1604     17 февраля 2014 в 11:20

  • Определите, все ли буквы строчные

    Как определить в Ruby, есть ли в предложении все строчные буквы? Точно так же, как определить, есть ли в предложении все заглавные буквы? Вы можете предположить, что это английское предложение без каких-либо иностранных символов. Простой вопрос, я знаю. Прошу извинить за краткость.

  • Javascript-заглавные буквы в строчные и наоборот

    Я заинтересован в том, чтобы сделать любые заглавные буквы строчными, а любые строчные буквы-прописными. Если у меня есть код, подобный приведенному ниже, что я должен поместить в пустые места этого оператора if / else: if (string[i] == ) и else if (string [i] == ) . Вот rest моего кода: var…


1

К сожалению, до CSS 3 нет никакого способа сделать это чисто CSS способом, согласно этому документу есть только 5 возможных значений для text-transform , и ни одно из них не решит это требование!

Но в будущем может быть предусмотрено пользовательское правило для преобразования текста, аналогичное Counter Sytle

Поделиться Yogesh     17 февраля 2014 в 11:23

Похожие вопросы:


java + замените строчные буквы на заглавные в args

Пожалуйста, совет: Я пишу здесь часть языка JAVA в args[0] может быть заглавными буквами как A B C или строчными буквами как a b d i моя цель-заменить все строчные буквы в args[0] на заглавные Как…


Сделать textarea все заглавные буквы?

Я пытаюсь сделать textarea, который будет вводить только заглавные буквы, даже если пользователь не удерживает shift или не имеет caps lock. В идеале это будет принимать входные данные независимо от…


Сначала строчные буквы текста, а затем заглавные. Возможно ли это с CSS?

Сначала строчные буквы текста, а затем заглавные. Возможно ли это с CSS? Редактировать: Пример: HELLO WORLD -> Hello World Edit2: у меня есть список стран, которые все прописные, как UNITED KINGDOM…


Разрешать только заглавные и строчные буквы

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


Как отобразить строчные и прописные буквы

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


Определите, все ли буквы строчные

Как определить в Ruby, есть ли в предложении все строчные буквы? Точно так же, как определить, есть ли в предложении все заглавные буквы? Вы можете предположить, что это английское предложение без…


Javascript-заглавные буквы в строчные и наоборот

Я заинтересован в том, чтобы сделать любые заглавные буквы строчными, а любые строчные буквы-прописными. Если у меня есть код, подобный приведенному ниже, что я должен поместить в пустые места этого…


Сделайте все строчные буквы заглавными в файле шрифта

У меня есть файл шрифта .ttf, который я создал. Я получил все заглавные буквы, но не строчные. Есть ли инструмент или простой способ сделать все строчные буквы такими же, как заглавные? Пример:…


Как отличить заглавные и строчные буквы с помощью caps lock

Мне трудно различить заглавные и строчные буквы, если Caps Lock — это ON или OFF . Я попробовал этот пример , но он не определяет Caps Lock . Например, если я нажимаю small a OR capital A с Caps…


Преобразуйте заглавные слова только в строчные буквы, чтобы отменить заглавную букву существительных

Дано : $ cat input Hello Welcome strIng North Korea USA U.K. Я хочу получить: $ cat output hello welcome strIng North Korea USA U.K. Как преобразовать заглавные буквы words* только в строчные ? *:…

Практическое использование CSS: регистр символов | CSS | Статьи | Программирование Realcoding.Net

Часто так бывает — учим что-то только тогда, когда возникает необходимость применения его на практике. В итоге мы хорошо усваиваем только ту часть, которую сразу же применяем. Остальное забывается, а зачастую и не изучается. Так в стороне осталось множество интересных возможностей CSS. Начиная с этой статьи, мы будем делать акцент именно на не очень распространенных, но оттого не менее полезных примемах применения CSS.

Достаточно редкий прием использования CSS — воздействие на регистр отображаемых символов. Для тех, кто не в курсе, регистр символов характеризует их заглавное свойство. Говоря проще, символы в верхнем регистре — это ЗАГЛАВНЫЕ, т.е. большие символы, а символы в нижнем регистре — это строчные, т.е. маленькие буквы.

Уверен, читатель не раз видел на просторах Сети сайты, у которых та или иная часть, например заголовок статьи, был написан заглавными символами. Если открыть просмотреть содержание соответствующего html документа — там, как правило, тоже будут заглавные буквы.

Очень немногие знают о таком интересном свойстве в CCS, как text-transform. С его помощью и можно осуществлять манипуляции с отображаемым текстом, без непосредственного вмешательства в сами символы текста. Свойство text-transform может принимать 5 разных значений: inherit, capitalize, uppercase, lowercase и none. Подробней о них:

 

  • capitalize — первая буква текста с таким значением свойства CSS text-transform всегда будет строчной;

     

  • uppercase — это свойство заставит браузер отображать текст только заглавными буквами;

     

  • lowercase — как многие уже догадались, полная противоположность предыдущему случаю — весь текст отображается только строчными буквами;

     

  • inherit — указывает, что должно использоваться значение родительского элемента;

     

  • none — вывод текста таким, какой он есть, для text-transform это значение по умолчанию;

    И наглядный пример:

     

    <p>ЭТО просто ТеСт</p>
<p>ЭТО просто ТеСт</p>
<p>ЭТО просто ТеСт</p>
<p>ЭТО просто ТеСт</p>
<p>ЭТО просто ТеСт</p>
<p>ЭТО просто ТеСт</p>
    Вот так это будет выглядеть:

     

    ЭТО просто ТеСт

    ЭТО просто ТеСт

    ЭТО просто ТеСт

    ЭТО просто ТеСт

    ЭТО просто ТеСт

    ЭТО просто ТеСт

    У некоторых читателей сейчас, наверное, возникнет вопрос: «Ну и на кой… все это нужно? Не проще сразу написать таким шрифтом, каким нужно отображать???». Хм… отчасти справедливо. А теперь попробуйте представить ситуацию: вам поручили в доработку и администрирование огромный посещаемый портал, с огромным количеством страничек, которые, как правило, генерируются по шаблону и выводятся нормальными символами. И вот, как это бывает, заказчику что-то стукнуло в голову / встал не с той ноги / увидел такое у конкурентов / свой вариант / … И сказал, что хочет, чтобы все заголовки выводились только большими, заглавными символами. Ваши действия: запаниковать и уволиться / нанять сотню людей и начать вручную перепечатывать заголовки / написать скрипт, который переворошит всю базу данных (заодно пару раз перегрузив сервер и грохнув саму базу :)) и изменить регистр символов / … / использовать в нужном месте шаблона CSS свойство text-transform и решить задачу за пару минут. А когда на следующий день заказчик попросит вернуть обратно, вам не захочется искать веревку с мылом, ведь достаточно будет лишь изменить одно свойство в шаблоне генератора. Примеров можно приводить еще много. Одним словом — штука полезная, не забывайте про это свойство.

    На этот раз все, до скорых встреч.

     

    Автор: Владислав Путяк
    Источник: www.ru-coding.com

    • CSS — работаем со шрифтом — Как создать сайт

    В данной статье рассмотрим CSS-свойства, форматирующие шрифт контента сайта.

      Всего их существует 5 штук, относятся они к семейству font:
    1. font-family — отвечает за имя шрифта
    2. font-size — отвечает за размер шрифта
    3. font-style — отвечает за стиль начертания шрифта
    4. font-variant — отвечает за возможность создания капители
    5. font-weight — отвечает за толщину шрифта

    Рассмотрим эти CSS-свойства и их значения, с помощью примеров :

    font-family

    font-family — CSS-свойство, назначает имя шрифту, в качестве значений принимает имена шрифтов. Имена могут быть как стандартные, так и экзотические. Здесь находится список стандартных шрифтов. Для использования экзотических шрифтов, вам нужно их поставить на свой сайт самостоятельно и сделать так, чтобы они при открытии сайта, автоматически загружались на компьютер посетителя.

    Назначим элементам страницы, например абзацам p, имя шрифта 'Times New Roman':

    
<style>
 p {
  font-family: 'Times New Roman';
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

    Результат:

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

    font-size

    font-size — CSS-свойство, назначает размер шрифту, в качестве значений принимает единицы измерения CSS.

    Присвоим абзацам страницы, размер шрифта 22px.

    
<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

    Результат:

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

    font-style

    font-style — CSS-свойство, назначает стиль шрифту, в качестве значений принимает следующие ключевые слова:

    • normal — обычное начертание
    • italic — курсивное начертание
    • oblique — наклонное начертание

    Изначально вам может показаться, что значения italic и oblique одинаковы и что оба они просто делают шрифт наклонным. Однако между ними, всё же имеется разница.

    Заключается она в следующем, некоторые шрифты имеют возможность создавать красивый рукописный почерк, так вот чтобы его увидеть нужно CSS-свойству font-style присвоить значение italic. Если рукописный почерк не поддерживается, то шрифт будет просто наклонным.

    
<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
  font-style: italic;
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

    Результат:

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

    font-variant

    font-variant — CSS-свойство, отвечает за создание капители. Капитель — это когда строчные буквы выглядят как заглавные (прописные), но размером меньше их, в качестве значений принимает следующие ключевые слова: normal или small-caps.

    
<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
  font-style: italic;
  font-variant: small-caps;
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

    Результат:

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

    font-weight

    font-weight — CSS-свойство, отвечающее за толщину шрифта, в качестве значений принимает следующие ключевые слова: normal или bold.

    
<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

    Результат:

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

    Гостиница Набережные Челны — список всех гостиниц города Набережные Челны, для туристов и гостей.

    Дата публикации поста: 5 февраля 2016

    Дата обновления поста: 25 октября 2014


    Навигация по записям

    Заглавная буква в html и css

    Заглавная буква, в соответствии с определением, – это элемент текста, который увеличен в размере относительно строчных букв. Практически во всех языках с заглавной буквы начинается предложение. А оформление начала абзаца выделяющейся заглавной буквой позволяет структурировать текст и облегчает его восприятие. Когда оформляется интернет-страница, текст может быть написан в соответствии с предпочтениями автора и правилами русского языка. Также его оформление можно «автоматизировать» путем внесения определенных «команд» в файл с расширением css – таблицу стилей – или дополнить Ваш html файл разделом style. CSS обычно изучают дополнительно с html, чтобы быстро менять какие-то элементы оформления сразу во всем тексте. Это особенно актуально, если сайт имеет сотни страниц, и вносить изменения на каждую из них является очень трудоемким процессом.

    Если вы примените css, заглавные буквы в начале каждого абзаца могут выглядеть особенным образом. К примеру, введенный в html без круглых скобок нижеприведенный код позволяет для текста, оформляемого тегом «р», сделать заглавную букву — first letter — более крупной – 220% от стандартного размера, желтого цвета – значение color равно yellow, и написать ее шрифтом, отличным от остального текста – Georgia против batangche.

    (<) style(>)

    p {font-family: batangche; font-size:93%;}

    p: first-letter {font-family: Georgia; font-size:220%; color: yellow;}

    (<)/style(>)

    Красивые заглавные буквы можно получить, если создать собственный шрифт в виде картинок – на каждую букву отдельная картинка, например, в древнерусском или готическом стиле. Их можно нарисовать в графическом редакторе. Тогда в требуемых местах на место заглавной буквы можно вставлять код без круглых скобок (<) img src=”ссылка на место, где лежит картинка”(>). Дополнительными атрибутами тега Img будут heigh и width – ширина и высота изображения, которую можно установить в пикселях для гармоничного сочетания с остальным текстом. Пример: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Круглые скобки вокруг < и > убираем.

    Если у вас нет возможности самостоятельно нарисовать алфавит, то заглавная буква может быть оформлена с помощью шрифтов, выложенных в свободном доступе на «Гугле» (раздел Fonts) или других поисковиках и ресурсах. Для этого вышеприведенный код нужно оформить следующим образом:

    (<) style(>)

    p {font-family: batangche; font-size:93%;}

    p: first-letter {font-family: Kelly+Slab; font-size:220%; color: blue;}

    (<)/style(>)

    А в тег «head» добавить ссылку без круглых скобок для «подключения», где после family указывается выбранное семейство шрифтов, подставляемое, кроме того, также в p: first-letter.

    (<)link href=’http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic’ rel=’stylesheet’ type=’text/css’ (>).

    Сервис «Гугла» позволяет выбрать тот или иной вид шрифта и предоставляет готовые ссылки для вставки в html или css. Обращаем ваше внимание на то, что необходимо обязательно выбрать группу шрифтов – латиницу или кириллицу, т.к. почти все латинские шрифты не работают при оформлении русскоязычного текста. На данный момент поисковик предоставляет около 40 видов русских шрифтов на бесплатной основе.

    Заглавная буква или ее прописной антипод могут быть оформлены с помощью свойства CSS text transform. Если в таблице стилей установить значение text transform: none, то текст будет выглядеть так, как вы его напишете. Для перевода всех букв в строчный регистр нужно через двоеточие установить значение text transform: lowercase, а для прописного регистра – uppercase. Установка же для свойства значения text transform: capitalize сделает так, что в начале каждого слова будет заглавная буква.

    CSS свойство text-transform

    Свойство text-transform используется для отображения всего текста в верхнем регистре (заглавные буквы) или в нижнем регистре (строчные буквы). Или же каждое слово может начинаться заглавной буквой.

    Свойство text-transform подчеркивает правила регистра, отражающие специфику данного языка.

    Значения «full-width» и «full-width-kana» экспериментальные и пока не поддерживаются каким-либо браузером.

    Значение по умолчаниюnone
    ПрименяетсяКо всем элементам, а также к ::first-letter и ::first-line.
    НаследуетсяДа
    АнимируемоеНет
    ВерсияCSS1
    DOM синтаксисobject.style.textTransform = «capitalize»;

    Синтаксис¶

    text-transform: none | capitalize | uppercase | lowercase | full-width | full-width-kana | initial | inherit;

    Пример¶

    <!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p{text-transform:uppercase}
    </style>
  </head>
  <body>
    <h3>Пример свойства text-transform</h3>
    <p>Какой-нибудь параграф.</p>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</div>
  </body>
</html>
    Попробуйте сами!

    Пример, где для первого предложения установлено значение «capitalize», а для второго «lowercase»:

    Пример¶

    <!DOCTYPE html>
<html>
  <head>
    <style>
      .a {text-transform:capitalize}
      .b {text-transform:lowercase}
    </style>
  </head>
  <body>
    <h3>Пример свойства text-transform</h3>
    <div>"Пример свойства text-transform"</div>
    </br>
    <div>"Какой-нибудь параграф".</div>
  </body>
</html>
    Попробуйте сами!

    Значения¶

    ЗначениеОписание
    noneЗаглавные буквы не применены. Значение по умолчанию.
    capitalizeПервая буква каждого слова заглавная.
    uppercaseПервая буква каждого слова заглавная.
    lowercaseВсе буквы каждого слова строчные.
    full-widthСимволы переведены в полноширинную форму (идеографические символы и латинский алфавит).
    full-width-kanaВсе малые кана символы переведены в большие для компенсации проблем удобочитаемости при малых размерах шрифта.
    initialУстанавливает свойство в значение по умолчанию.
    inheritЗначение элемента наследуется от родительского элемента.

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

    1.0+ 12.0+ 1.0+ 1.0+ 7.0+

    Введение в HTML и CSS

    Главная / Интернет-технологии / Введение в HTML и CSS / Тест 6 Упражнение 1:
    Номер 1
    Что определяет строка <p> ?

    Ответ:

    &nbsp(1) тип шрифта&nbsp

    &nbsp(2) регистр букв&nbsp

    &nbsp(3) кодировку&nbsp


    Номер 2
    Какими будут буквы после применения <p> ?

    Ответ:

    &nbsp(1) в нижнем индексе&nbsp

    &nbsp(2) подчеркнутыми&nbsp

    &nbsp(3) заглавными&nbsp


    Номер 3
    Чтобы все буквы в абзаце были заглавными необходимо применить

    Ответ:

    &nbsp(1) <p> &nbsp

    &nbsp(2) <p> &nbsp

    &nbsp(3) <p> &nbsp


    Упражнение 2:
    Номер 1
    Что определяет строка <p>?

    Ответ:

    &nbsp(1) тип шрифта&nbsp

    &nbsp(2) регистр букв&nbsp

    &nbsp(3) кодировку&nbsp


    Номер 2
    Что изменится после применения <p>?

    Ответ:

    &nbsp(1) все буквы будут строчными&nbsp

    &nbsp(2) все буквы будут заглавными&nbsp

    &nbsp(3) все слова будут начинаться с заглавных букв&nbsp


    Номер 3
    Чтобы все слова в абзаце начинались с заглавной буквы необходимо применить:

    Ответ:

    &nbsp(1) <p>&nbsp

    &nbsp(2) <p>&nbsp

    &nbsp(3) <p>&nbsp


    Упражнение 3:
    Номер 1
    Горизонтальный отступ от левого края параграфа определяется свойством

    Ответ:

    &nbsp(1) text-indent&nbsp

    &nbsp(2) text-content&nbsp

    &nbsp(3) text-select&nbsp


    Номер 2
    Какое свойство определяет отступ от левого края параграфа?

    Ответ:

    &nbsp(1) text-set&nbsp

    &nbsp(2) text-indent&nbsp

    &nbsp(3) text-trace&nbsp


    Номер 3
    Что определяется свойством text-indent?

    Ответ:

    &nbsp(1) отступ от левого края абзаца&nbsp

    &nbsp(2) расстояние между буквами&nbsp

    &nbsp(3) межстрочное расстояние&nbsp


    Упражнение 4:
    Номер 1
    Для чего используется свойство line-height?

    Ответ:

    &nbsp(1) для межбуквенного расстояния&nbsp

    &nbsp(2) для межстрочного расстояния&nbsp

    &nbsp(3) для определения количества символов в табуляции&nbsp


    Номер 2
    Что определяется с помощью свойства line-height?

    Ответ:

    &nbsp(1) межстрочное расстояние&nbsp

    &nbsp(2) расстояние отступа абзаца&nbsp

    &nbsp(3) расстояние между словами&nbsp


    Номер 3
    Межстрочное расстояние определяется свойством

    Ответ:

    &nbsp(1) line-height&nbsp

    &nbsp(2) line-width&nbsp

    &nbsp(3) line-struct&nbsp


    Упражнение 5:
    Номер 1
    Что определяет строка <ul>?

    Ответ:

    &nbsp(1) изменение маркера списка&nbsp

    &nbsp(2) изменение типа шрифта&nbsp

    &nbsp(3) изменение расстояния между элементами списка&nbsp


    Номер 2
    Что определяет строка <ul>?

    Ответ:

    &nbsp(1) замещение элементами списка других элементов&nbsp

    &nbsp(2) изменение маркера списка&nbsp

    &nbsp(3) тип построения и уровни списка&nbsp


    Номер 3
    Чтобы маркером списка был круг необходимо использовать

    Ответ:

    &nbsp(1) <ul>&nbsp

    &nbsp(2) <ul>&nbsp

    &nbsp(3) <ul>&nbsp


    Упражнение 6:
    Номер 1
    Укажите доступные значения свойства letter-spacing:

    Ответ:

    &nbsp(1) {letter-spacing: normal}&nbsp

    &nbsp(2) {letter-spacing: none}&nbsp

    &nbsp(3) {letter-spacing: auto}&nbsp


    Номер 2
    Какое свойство позволяет управлять расстоянием между словами?

    Ответ:

    &nbsp(1) word-spacing&nbsp

    &nbsp(2) letter&nbsp

    &nbsp(3) letter-spacing&nbsp


    Номер 3
    С помощью какого свойства можно управлять выравниванием?

    Ответ:

    &nbsp(1) text-align&nbsp

    &nbsp(2) text-indent&nbsp

    &nbsp(3) text-shadow&nbsp


    Упражнение 7:
    Номер 1
    В каком правиле все индивидуальные свойства специфицированы?

    Ответ:

    &nbsp(1) BODY {background: red}&nbsp

    &nbsp(2) P {background: url("chess.png") gray 50% repeat fixed}&nbsp

    &nbsp(3) BODY {background: gray}&nbsp


    Номер 3
    Из приведенных ниже записей выделите доступное значение свойства  widows:

    Ответ:

    &nbsp(1) inherit&nbsp

    &nbsp(2) none&nbsp

    &nbsp(3) auto&nbsp


    Упражнение 8:
    Номер 1
    Какой параметр задает высоту элемента?

    Ответ:

    &nbsp(1) height&nbsp

    &nbsp(2) line-height&nbsp

    &nbsp(3) max-height&nbsp


    Номер 2
    Из приведенных ниже записей выберите доступные значения параметра max-height

    Ответ:

    &nbsp(1) 2.1&nbsp

    &nbsp(2) 10pt&nbsp

    &nbsp(3) auto&nbsp


    Номер 3
    К доступным значениям параметра max-width следует отнести

    Ответ:

    &nbsp(1) 10pt&nbsp

    &nbsp(2) auto&nbsp

    &nbsp(3) none&nbsp


    Упражнение 9:
    Номер 1
    Какой параметр можно использовать для задания всех характеристик списка в одном объявлении?

    Ответ:

    &nbsp(1) list&nbsp

    &nbsp(2) list-style&nbsp

    &nbsp(3) style&nbsp


    Номер 2
    К доступным значениям параметра list-style относят

    Ответ:

    &nbsp(1) list-style-type&nbsp

    &nbsp(2) list-style-image&nbsp

    &nbsp(3) list-style-border&nbsp


    Номер 3
    Выберите все доступные значения параметра list-style:

    Ответ:

    &nbsp(1) list-style-position&nbsp

    &nbsp(2) list-style-type&nbsp

    &nbsp(3) list-margin&nbsp


    Упражнение 10:
    Номер 1
    Какой параметр задает изображение в качестве маркера элемента списка?

    Ответ:

    &nbsp(1) list-style-image&nbsp

    &nbsp(2) list-style-glyph&nbsp

    &nbsp(3) list-style-icon&nbsp


    Номер 2
    Какой параметр задает размещение маркера элемента списка?

    Ответ:

    &nbsp(1) list-style-position&nbsp

    &nbsp(2) list-style-pos&nbsp

    &nbsp(3) list-position&nbsp


    Номер 3
    Из приведенных ниже записей выберите доступные значения параметра list-style-position:

    Ответ:

    &nbsp(1) default&nbsp

    &nbsp(2) inside&nbsp

    &nbsp(3) left&nbsp


    Упражнение 11:
    Номер 1
    Какой параметр задает тип выводимого курсора?

    Ответ:

    &nbsp(1) display&nbsp

    &nbsp(2) setcursor&nbsp

    &nbsp(3) cursor&nbsp


    Номер 2
    Определите из приведенных ниже записей доступные значения параметра cursor:

    Ответ:

    &nbsp(1) default&nbsp

    &nbsp(2) text&nbsp

    &nbsp(3) stop&nbsp


    Номер 3
    Как установить курсор в виде песочных часов?

    Ответ:

    &nbsp(1) clock&nbsp

    &nbsp(2) wait&nbsp

    &nbsp(3) time&nbsp


    Упражнение 12:
    Номер 1
    Какой параметр позволяет задать способ визуализации элемента?

    Ответ:

    &nbsp(1) monitor&nbsp

    &nbsp(2) show&nbsp

    &nbsp(3) display&nbsp


    Номер 2
    Каковы допустимые значения параметра display?

    Ответ:

    &nbsp(1) block&nbsp

    &nbsp(2) table&nbsp

    &nbsp(3) off&nbsp


    Номер 3
    С помощью какого параметра можно задать вывод элемента в виде списка?

    Ответ:

    &nbsp(1) list&nbsp

    &nbsp(2) list-item&nbsp

    &nbsp(3) listing&nbsp


    Строчные элементы

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

    Строчные элементы — это элементы веб-страницы, которые формируют строчные блоки с характерным для них поведением.

    К строчным элементам относятся элементы со значением свойства display: ‘inline’, ‘inline-table’ и ‘inline-block’.

    Это:

    button, textarea, input, select, img, span, a, q, code, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, tt, u, var

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

    Давайте прямо сейчас рассмотрим, что это за поведение и чем оно отличается от блоков, которые формируют блочные элементы.

    1) Самой главной особенностью строчных блоков является то, что при размещении их на веб-странице, они становятся частью строки, в которую они вставляются.

    <p><span>Строчный элемент 1</span> <span>Строчный элемент 2</span> <span>Строчный элемент 3</span></p>

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

    2) В строчные элементы запрещена вставка блочных элементов. Внутри строчных элементов могут содержаться только строчные элементы и анонимные блоки.

    Следующая запись не пройдет валидацию.

    <a><p>Абзац</p></a>

    Необходимо написать так:

    <p><a>Абзац</a></p>

    3) Схлопование margin для строчных элементов не действует.

    4) Свойства width и height для строчных элементов не работают.

    margin-top и margin-bottom не работают.

    <p>Блочный элемент</p>
<span>Строчный элемент</span>
<p>Блочный элемент</p>

    Исключение элемент img, который относится к строчным элементам с замещаемым контентом. Для него все эти свойства работают.

    5) Ширина строчных элементов состоит из следующих составляющих:

    width = margin-left+margin-right+padding-left+padding-right + border-left + border-right + width(ширина, необходимая для того, чтобы вместить содержимое)

    6) Высоту строчных элементов можно регулировать следующими свойствами:

    line-height + padding-top + padding-bottom + border-top + border-bottom + height (высота необходимая, чтобы вместить содержимое)

    7) Для строчных элементов можно использовать свойство vertical-align

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

    Понимание принципа работы строчных элементов и их свойств может значительно сэкономить ваше время при верстке веб-страниц.

    преобразование текста | CSS-уловки

    Свойство text-transform в CSS управляет регистром текста и заглавными буквами.

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

    Значения преобразования текста

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

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

    См. Перо 0f4293fce0d14aafc3818c950ab0ded3 от mariemosley (@mariemosley) на CodePen.

    Достопримечательности

    заглавная буква будет использовать заглавные буквы в одинарных или двойных кавычках, а также в первой букве после дефиса. Первая буква после числа в нем не будет заглавной, поэтому даты вроде «4 февраля 2015 года» не преобразуются в «4 февраля 2015 года».

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

    CSS не может использовать «регистр заголовков», стиль использования заглавных букв, используемый в названиях книг, фильмов, песен и стихов, где статьи пишутся строчными буквами (как в «В поисках утраченного ковчега»). Но есть JavaScript-решения для заголовков, в том числе toTitleCase () Дэвида Гоуча.

    Сопутствующие объекты

    Дополнительная информация

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

    Хром Safari Firefox Opera IE Android iOS
    Любая любой любой любой любой любой любой

    Firefox поддерживает специфичные для языка правила использования заглавных букв для тюркских языков, немецкого, голландского и греческого языков, которые не поддерживаются другими браузерами.Firefox также является единственным браузером, который поддерживает text-transform: full-width; , который может помочь улучшить читаемость текста, который включает сочетание латинских и восточноазиатских шрифтов. Подробности смотрите на MDN.

    CSS: свойство преобразования текста

    В этом руководстве по CSS объясняется, как использовать свойство CSS под названием text-transform с синтаксисом и примерами.

    Описание

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

    Синтаксис

    Синтаксис CSS-свойства text-transform:

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

    Параметры или аргументы

    значение

    Использование заглавных букв в шрифте. Это может быть одно из следующих значений:

    Элемент
    Значение Описание
    прописные буквы Все буквы преобразуются в верхний регистр
    p {text-transform: uppercase; }
    строчная Все буквы преобразуются в нижний регистр
    p {text-transform: lowercase; }
    увеличить Первая буква каждого слова преобразуется в верхний регистр
    p {text-transform: capitalize; }
    нет Заглавные буквы не изменены
    p {text-transform: none; }
    унаследовать унаследует преобразование текста от своего родительского элемента
    p {преобразование текста: наследование; }

    Примечание

    • Если в качестве преобразования текста выбрано значение , заглавная буква , первая буква каждого слова будет заглавной, а все остальные буквы не будут изменены.
    • Свойство CSS text-transform — отличный способ сделать ваши заголовки прописными, не редактируя HTML-страницы.

    Совместимость с браузером

    Свойство CSS text-transform имеет базовую поддержку в следующих браузерах:

    • Хром
    • Android
    • Firefox (Gecko)
    • Firefox Mobile (Gecko)
    • Internet Explorer (IE)
    • IE Телефон
    • Opera
    • Opera Mobile
    • Safari (WebKit)
    • Safari Mobile

    Пример

    Мы обсудим свойство text-transform ниже, исследуя примеры использования этого свойства в CSS.

    Использование прописных букв

    Давайте посмотрим на пример CSS text-transform, где мы устанавливаем text-transform на в верхнем регистре .

      h2 {преобразование текста: прописные буквы; }

    В этом примере преобразования текста CSS мы использовали свойство CSS text-transform, чтобы изменить весь текст в теге

    на

    в верхнем регистре . Это позволяет быстро изменять отображение тега

    без необходимости редактировать HTML-страницы.

    В нижнем регистре

    Давайте посмотрим на пример CSS-преобразования текста, в котором мы устанавливаем текстовое преобразование на в нижнем регистре .

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

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

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

    Давайте посмотрим на пример CSS-преобразования текста, в котором мы устанавливаем текстовое преобразование на с заглавной буквы .

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

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

    Использование верхнего регистра CSS3 и нижнего регистра CSS3 для изменения текста

    При работе с текстом вы захотите воспользоваться множеством опций, которые предлагает CSS. Одним из них является изменение использования прописных, строчных и заглавных букв. Как вы увидите в следующем примере кода, это просто. Обратите внимание, что здесь используется тег h2 и свойство CSS text-transform с атрибутами верхнего регистра CSS3 и нижнего регистра CSS3.

    Листинг 1. Отображение преобразования текста CSS 

      



 Документ без названия 
<стиль>
h2.верхний регистр {
    преобразование текста: прописные буквы;
}
h2.lowercase {
    текст-преобразование: нижний регистр;
}
h2.capitalize {
    текст-преобразование: заглавные буквы;
}



 
     Вот базовый текст. 
     
 
     Вот базовый текст. 
     
 
     Вот базовый текст.

    Вывод HTML-разметки отображается как:

    Как видите, в этом примере используются заглавные буквы CSS, строчные буквы CSS и заглавные буквы.Что интересно в результате, так это то, что не имеет значения, как написан текст, как вы можете видеть в первом листинге. Текст вынужден принимать атрибуты выбранного случая.

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

    В листинге 2 были добавлены следующие свойства для изменения функций цвета и шрифта:

      цвет: # 000DFF;
шрифт: 15px, шрифт без засечек;
цвет: # 9E03D9;
font-weight: жирный;
стиль шрифта: наклонный;
высота строки: 1.5;

    Также теги шрифтов были изменены на h2, h3 и P. Вот код:

    Листинг 2: Добавление в текст большего количества атрибутов CSS 

      



 Документ без названия 
<стиль>
h2.uppercase {
преобразование текста: прописные буквы;
цвет: # 000DFF;
}
h3.lowercase {
    текст-преобразование: нижний регистр;
}
p.capitalize {
текст-преобразование: заглавные буквы;
шрифт: 15px, шрифт без засечек;
цвет: # 9E03D9;
font-weight: жирный;
стиль шрифта: наклонный;
высота строки: 1.5;
}



 
     Вот текст в верхнем регистре 
     
 
     Вот текст в нижнем регистре 
     

     Вот текст с заглавной буквы 
    
Вот текст с заглавной буквы 
    
Вот текст с заглавной буквы 
    
Вот текст с заглавной буквы 
    
Вот текст с заглавной буквы

    Отображение HTML из листинга 2 в вашем браузере приводит к отображению следующего:

    Как видите, в этом примере сочетаются использование атрибутов верхнего регистра CSS, нижнего регистра CSS и заглавных букв CSS, а также других эффектов шрифта и текста.Это дает вам общее представление о том, что вы можете делать с текстом и шрифтами в CSS (и многое другое).

    Об авторе

    Натан Сигал работал писателем-фрилансером 18 лет. За это время он опубликовал более 1000 статей и написал 9 книг. Вы можете узнать о нем больше на http://NathanSegal.org.

    CSS Прописные, строчные и заглавные буквы

    Работая с CSS, вы должны научиться ценить форматирование текста — в большей степени — жить или умереть — так, как это может соперничать с печально известным рассказчиком American Psycho Патриком Бейтманом.Это начинается с простых вещей, таких как управление регистром текста: верхний регистр, нижний регистр и т. Д. Верхний регистр CSS — это один из нескольких основных методов, позволяющих замаскировать код, чтобы он не выглядел так. . . ну код. Сначала мы рассмотрим исходное свойство, которое управляет настройками регистра в CSS, свойство Text Transform. Затем мы познакомим вас с Font Variant, чтобы узнать о дополнительных параметрах форматирования и, наконец, о расширенных параметрах Font Variant в CSS3. Максимально расширьте себя с помощью расширенного обучения CSS.

    Свойство «Преобразование текста» позволяет соответствующим образом форматировать различные элементы. Давайте посмотрим на три преобладающих значения падежа, их описания, возможные варианты использования и, наконец, их синтаксис:

    Нижний регистр: преобразование всех символов в нижний регистр

    Верхний регистр: переводит все символы в верхний регистр

    Заглавные буквы: переводит первый символ каждого слова в верхний регистр

    Технически, преобразование текста не имеет значения по умолчанию; или, скорее, если вы не укажете свойство Text Transform, текст останется неизменным.Однако Text Transform может быть унаследованным свойством, поэтому дочерние элементы будут принимать форматирование своих родителей (просто укажите значение как «наследовать»). Хотя это свойство поддерживается в большинстве основных браузеров, важно отметить, что «наследование» не поддерживается в Internet Explorer 7 и более ранних версиях; IE8 требует! DOCTYPE; но с IE9 все в порядке.

    Как вы в конечном итоге заставите Text Transform работать, зависит от вас, но для примера давайте подойдем к этому логически: изначально имеет смысл использовать верхний регистр для заголовка (первый заголовок), использовать заглавные буквы для субтитров (второй заголовок, третий заголовок , так далее.) и строчные буквы для содержания (абзац). Итак, без лишних слов, я даю вам синтаксис преобразования текста:

    • h2: {преобразование текста: верхний регистр; }
    • h3: {преобразование текста: заглавные буквы; }
    • p: {преобразование текста: нижний регистр; }

    Другое распространенное использование — это выделение ссылок и пунктов меню, а также использование: hover,: active,: loaded и: link, чтобы ссылки отображались заглавными буквами при наведении курсора.

    Так что, возможно, вы не впечатляете высшее общество Нью-Йорка на данном этапе, но давайте продолжим и посмотрим, что мы можем сделать с помощью Font-Variant.В CSS Font Variant принимает только два возможных значения: Normal (отображение текста по умолчанию) и Small Caps (уменьшенная версия Uppercase; другими словами, текст по-прежнему набирается заглавными буквами, только меньше). Структура синтаксиса для варианта шрифта такая же, как у Text Transform:

    .
    • h3: {font-variant: small-caps;}

    Вот интересный небольшой лакомый кусочек: Font Variant зависит от рендеринга текста в разметке. Например, если ваш контент написан в разметке прописными буквами, он все равно будет иметь обычный размер в верхнем регистре даже с маленькими заглавными буквами в варианте шрифта.Это дает вам несколько интересных вариантов. Взгляните на следующий HTML-код:

    ТАМ ИДЕА БАТАРЕЙСКИХ БАТАРЕЙ.

    Есть идея Патрика Бейтмана.

    Теперь в CSS:

    п: {

    размер шрифта: x;

    обивка x;

    вариант шрифта: капители;

    }

    Результат будет выглядеть так (увеличено):

    Как вы можете видеть, буквы, которые в разметке пишутся с заглавной буквы, сохраняют обычную заглавную букву, а строчные буквы принимают формат маленьких заглавных букв.В первой строке я более или менее чередовал прописные и строчные буквы в стиле социальных сетей, и, таким образом, результатом стало чередование обычных прописных и маленьких заглавных букв. Во второй строке я выбрал более профессиональный редакторский стиль, в котором только первая буква пишется заглавной, в результате первая буква отображается в обычном верхнем регистре, а остальная часть — в маленькой. Хороший. И легко. Точно так же, как научиться профессионально печатать.

    Теперь давайте рассмотрим и расширим способы взаимодействия Text Transform и Font Variant.В определенной степени существует иерархия. Если мы возьмем приведенный выше пример и установим для него оба значения: {font-variant: small caps} и {text-transform: uppercase}, все будет отображаться в обычном верхнем регистре. По сути, происходит то, что Font Variant полностью заменяется. Поскольку заглавные буквы имеют приоритет перед преобразованием текста, преобразование текста не окажет никакого влияния на текст, который состоит только из заглавных букв. И наоборот, если взять наш пример и установить для него значения {font-variant: small-caps} и {text-transform: lowercase}, все будет отображаться в маленьких заглавных буквах.Причина должна быть достаточно очевидной: Font Variant творит чудеса со строчными буквами, которые являются значением, указанным с помощью Text Transform. Бум!

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

    • Unicase
    • Все мелкие заглавные буквы
    • Колпачки откидные
    • Маленькие кепки
    • Кепки All-Petite-Caps
    • Слэш-ноль
    • Числовые значения
    • Значения числового интервала

    Все хорошее.Наконец, краткое примечание о «капитализации». Если вы используете CSS3, вы можете прочитать здесь историческую справку, но это несущественная информация. В CSS 1 и 2 «заглавные буквы» (как в: text-transform: capitalize) были недооценены. С прямым предложением, например: «Я люблю собак», нет проблем. Но многие браузеры, а также Gecko и Webkit интерпретируют определенные символы как буквы, такие как «-» и «_», а также несколько буквенных символов. CSS3 наконец-то визуализировал это в четком определении, вы можете перейти к строке «использовать заглавные буквы» в таблице совместимости браузеров и найти исчерпывающий список первой версии каждого браузера, поддерживающей преобразование текста в полностью определенном состоянии.

    Имея в своем распоряжении функцию преобразования текста и вариант шрифта, вы можете, по крайней мере, отформатировать текст в соответствии с основными правилами английского языка (или любого другого языка, если на то пошло). Немного творчества поможет вам пройти долгий путь. Существует ряд других относительно простых свойств форматирования текста — цвет, выравнивание, оформление — и вы можете изучить все это в управляемом хаосе этого ускоренного курса CSS и CSS3.

    Последнее обновление страницы: январь 2014 г.

    html — преобразование прописных букв в нижний регистр и первых прописных букв в предложении с использованием CSS

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

    CSS предлагает преобразования текста для использования заглавных букв, но поддерживает только заглавными буквами , заглавными и строчными . Ни один из них не сделает то, что вы хотите. Вы можете использовать селектор : первая буква , который применит любой стиль к первой букве элемента, но не к последующим.

      п {
    текст-преобразование: нижний регистр;
}
p: first-letter {
    текст-преобразование: заглавные буквы;
}
  
      
     ОБРАЗЕЦ ТЕКСТА.НЕКОТОРЫЕ ПРЕДЛОЖЕНИЕ. ЧТО-ТО ДРУГОЕ

    Это не то, что вам нужно (и: first-letter не поддерживает кроссбраузерность … снова IE).
    Единственный способ сделать то, что вы хотите, — это использовать какой-нибудь язык программирования (серверный или клиентский), например Javascript или PHP. В PHP у вас есть функция ucwords (задокументированная здесь), которая, как и CSS, использует заглавные буквы в каждом слове, но, выполняя некоторую магию программирования (см. Комментарии к документации для ссылок), вы можете добиться использования заглавных букв для каждого слова. первая буква каждого предложения.

    Более простое решение, и вы, возможно, не захотите использовать PHP, — это использование Javascript. На следующей странице — Заглавные буквы — вы найдете полномасштабный пример Javascript, в котором делает именно то, что вы хотите, . Javascript довольно короткий и использует заглавные буквы с некоторыми манипуляциями со строками — у вас не будет проблем с настройкой capitalize-questions.js в соответствии с вашими потребностями.

    В любом случае: Использование заглавных букв обычно должно выполняться в самом контенте, а не через Javascript или языки разметки.Подумайте о том, чтобы очистить ваш контент (ваши тексты) другими способами. Например, Microsoft Word имеет встроенные функции, позволяющие делать то, что вы хотите.

    Почему вы не должны писать свой контент в верхнем регистре, вместо этого используйте CSS. | Мэнди Майкл

    Верхний регистр часто используется в веб-дизайне, вы часто видите его в навигации, на кнопках, в заголовках или подзаголовках. Недавно я изменил текст на панели навигации с верхнего регистра на нижний и столкнулся с ситуацией, когда вместо того, чтобы полагаться на CSS, последний редактор этого навигатора писал текст в верхнем регистре.Это вызвало крик в твите, потому что меня это действительно беспокоит. В результате моего твита я обратил внимание на то, что многие люди не знают, почему это проблема (людей легко забыть, извините). Я подумал, что это хорошая возможность разобраться, почему вам не следует писать свой контент в верхнем регистре, а вместо этого следует полагаться на CSS.

    В ветке этого твита есть несколько отличных твитов от Jen Simmons , которые вы должны полностью прочитать, также подписывайтесь на нее, она — отличный источник знаний!

    Во-первых, предостережение: если что-то должно быть написано заглавными буквами, например аббревиатурой, это нормально писать заглавными буквами, например, e.g CSS. Если ваш текст семантически имеет смысл в верхнем регистре, это не проблема. (Примечание: HTML имеет элемент аббревиатуры , который вы должны полностью использовать)

    Имея это в виду, если ваш контент в верхнем регистре, только для целей дизайна или стилизации, тогда это всегда следует делать с помощью CSS. Это можно сделать с помощью свойства CSS text-transform .

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

    В нашем случае это будет:

     text-transform: uppercase;

    Почему это важно?

    1. Как и в моем первоначальном примере, намного сложнее изменить дизайн позже, если вы написали все в верхнем регистре. В моем случае это было небольшое исправление, потому что это был только один случай. Однако представьте себе это на большом веб-сайте.Вы не можете легко изменить регистр, не редактируя все содержимое сайта. CSS был буквально создан, чтобы упростить этот процесс, положитесь на него!
    2. Когда вы копируете и вставляете текст, написанный в верхнем регистре, он копируется в верхнем регистре. В отличие от текста, стилизованного с помощью CSS, который будет копировать, как бы вы его ни написали. (Это постоянный источник разочарования для меня, особенно когда это слово у меня проблемы с написанием, я скопировал его по какой-то причине, и теперь вы собираетесь заставить меня перепечатать или использовать какой-то инструмент, чтобы преобразовать его в любом случае, давай друзья, сделайте мою жизнь легкой не сложной 😭!).
      Примечание. Было указано, что Chrome по-прежнему копирует и вставляет в верхнем регистре, если вы выполняете стиль с помощью CSS. Могу подтвердить, что Firefox этого не делает.
    3. Это не очень хорошо для программ чтения с экрана — текст в верхнем регистре будет читаться отдельными буквами (например, сокращениями). Итак, CSS читается как C.S.S. Так же, как JELLO будет читаться как J.E.L.L.O, а не как слово Jello.
      Примечание: некоторые программы для чтения с экрана, такие как Macs Voiceover, по-прежнему будут делать это с текстом в верхнем регистре с использованием CSS — вы можете решить эту проблему с помощью aria-label .
    4. Не работают режимы чтения. У меня особый интерес к режимам чтения (ознакомьтесь с моим сообщением в блоге «Создание веб-сайтов для режима чтения Safari»). Режимы чтения и другие приложения для чтения обычно работают, беря контент с вашей страницы и применяя новые стили. Он, помимо прочего, полагается на правильное использование семантического HTML, но также предполагает, что вы написали контент таким, каким он должен быть. Если вы прописываете свой текст в контенте, он будет восприниматься как прописной, поэтому любые попытки применить режим чтения стилей для улучшения восприятия чтения не будут работать.То же самое применимо к таким экземплярам, ​​как результаты поиска Google, или если вы хотите повторно использовать контент в другой области вашего сайта с другой обработкой. (Вспомните CSS Zen Garden!)

    Главный вывод, который следует запомнить:

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

    Спасибо за чтение и спасибо всем за поддержку моих разочарований в отношении твитов 💜

    Mandy

    CSS All Caps: A Step-by-Step Guide

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

    При написании и разработке веб-сайта разработчики могут использовать свойства CSS для корректировки регистра шрифта текста, если это необходимо. В этой статье мы поговорим о двух способах: использование text-transform и font-variant. Давайте посмотрим на синтаксис обоих.

    CSS All Caps

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

    Чтобы сделать блок текста заглавными буквами, используйте text-transform: uppercase в вашем селекторе CSS:

    Найдите свой учебный лагерь