Css строчные буквы: строчные и заглавные буквы — учебник CSS

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

<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

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

Буквы верхнего и нижнего регистра CSS

Управление регистрами символов в HTML

text-transform : uppercase;

uppercase – данная опция создаёт условия для вывода всех символов прописными (верхний регистр).

HTML

<h2>Прописные буквы</h2>

CSS

.box{
    width: 250px;
    display: inline-block;
    padding-top: 4px;
    padding-right: 40px;
    padding-bottom: 4px;
    padding-left: 40px;
    border: 3px solid #444;
    background-color: #FC0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 12px;	
}
h2{
    text-transform: uppercase;
}

 
text-transform : lowercase;

lowercase – данный параметр задаёт вывод строчных символов (нижний регистр).

HTML

<div>
  <div>
    ПЕРВАЯ БУКВА В ВЕРХНЕМ РЕГИСТРЕ, ПОСЛЕДУЮЩИЕ СИМВОЛЫ В НИЖНЕМ РЕГИСТРЕ
  </div>
</div>

CSS

.block{
    font-size: 20px;
    font-weight: bold;
    text-transform: lowercase;
}
.block:first-letter{
    text-transform: uppercase;
}

text-transform : capitalize;

capitalize – параметр устанавливает отображение всех слов в предложении с заглавной буквы.

HTML

<div>
  <p>Каждое слово начинается с заглавной буквы</p>
</div>

 
 

CSS

p{
    font-size: 19px;
    font-weight: bold;
    text-transform: capitalize;	
}

none – регистр символов остаётся неизменным.

HTML

<div>
  <div>
    <span>П</span>ЕРВАЯ БУКВА БЕЗ ИЗМЕНЕНИЙ, ОСТАЛЬНЫЕ СТРОЧНЫЕ
  </div>
</div>

CSS

.block{  
    font-size: 20px;
    font-weight: bold;
    text-transform: lowercase;
}
.no-changes{ 
    text-transform: none; 
}

font-variant | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

font-variant: normal | small-caps | inherit

Значения

normal

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

small-caps

Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1.

inherit

Наследует значение родителя

Рис. 1. Обычный текст и текст в виде капители

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-variant</title>
  <style>
   h2 {
    font-variant: small-caps; /* Устанавливаем капитель для заголовка */
   } 
  </style>
 </head>
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства font-variant

Объектная модель

[window.]document.getElementById(«elementID»).style.fontVariant

Браузеры

/* Стили для первой буквы элемента <p> */
p::first-letter {
  font-size: 130%;
}

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat.</p>
<p>-Начало специального знака препинания.</p>
<p>_Начало специального знака препинания.</p>
<p>"Начало специального знака препинания.</p>
<p>'Начало специального знака препинания.</p>
<p>*Начало специального знака препинания.</p>
<p>#Начало специального знака препинания.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

p::first-letter {
  color: red;
  font-size: 130%;
}

 
преобразование текста: нет;
преобразование текста: строчные буквы;
преобразование текста: заглавные буквы;
преобразование текста: использование заглавных букв;
преобразование текста: во всю ширину;
преобразование текста: полноразмерная кана;


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

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

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

  
 это свойство css устанавливает всю строчную текстовую строку в верхний регистр 
  

  p.css-all-caps {
   преобразование текста: верхний регистр
}  

  
 НА ЭТОЙ СОБСТВЕННОСТИ CSS УСТАНАВЛИВАЕТСЯ ВСЕ СТРАНИЦА ВЕРХНЕГО ТЕКСТА В НИЖНЮЮ КОРПУС   

 .строчная css {
    преобразование текста: строчные буквы;
}  

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

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

p :: первая буква {
    размер шрифта: 4em;
    вес шрифта: полужирный;
    семейство шрифтов: без засечек;
    преобразование текста: заглавные буквы;
}