search

Трансформирование текста text-transform

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


text-transform
Значения:	
none	Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию текста для элемента в группе элементов с установленным свойством.
capitalize	Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
uppercase	Выводит все слова в элементе прописными буквами.
lowercase	Выводит все слова в элементе строчными буквами.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.
Синтаксис

h2 {text-transform: none;}
h2 {text-transform: capitalize;}
h2 {text-transform: uppercase;}
h2 {text-transform: lowercase;}

Направление написания текста direction

Свойство задаёт направление написания текста, направление размещения столбца таблицы, направление, в котором блок заполняет содержимое по горизонтали и положение последней строки выровненного по ширине элемента. Рекомендуется использовать вместе со свойством unicode-bidi. Наследуется.


direction
Значения:	
ltr	Значение по умолчанию, текст отражается слева направо.
rtl	Текст отражается справа налево.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.
Синтаксис

p {direction: ltr;}
p {direction: rtl;}

Направление написания слов в тексте unicode-bidi

Свойство используется вместе со свойством direction для поддержки написания слов в двунаправленном тексте. Не наследуется.


unicode-bidi
Значения:	
normal	Значение по умолчанию, направление отображения текста определяется браузером на основе используемой кодировки.
embed	Устанавливает параметры отображения текста как указано в свойстве direction, но при этом, при изменении направления, изменяется лишь расположение конечных символов пунктуации.
bidi-override	Работает аналогично значению embed, но при этом, при изменении направления, меняется также и направление написания слов в тексте.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.
Синтаксис

p {unicode-bidi: normal;}
p {unicode-bidi: embed;}
p {unicode-bidi: bidi-override;}

Декорирование текста text-decoration

Свойство декорирует текст. Также убирает подчёркивание ссылок. Не наследуется.


text-decoration
Значения:	
none	Выводит текст без оформления, убирает нижнее подчёркивание у ссылок.
underline	Подчёркивает текст.
overline	Добавляет тексту черту сверху.
line-through	Перечёркивает текст.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.
Синтаксис

a {text-decoration: none;}
span {text-decoration: underline;}
span {text-decoration: overline;}
span {text-decoration: line-through;}

Форматирование первой буквы и первой строки абзаца

CSS даёт возможность форматирование абзаца с использованием псевдоэлементов :first-letter и :first-line. Например, можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца. В качестве фона для :first-letter также можно устанавливать градиентую заливку.

	
	Paris_Css
	
/*первый абзац*/
p:first-letter {
  font-size: 2em;
  margin-right: 2px; 
  color: #EE9966;
  font-weight: bold;
  text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99;
}
p:first-line {
  color: #EE9966;
}
/*второй абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  border-radius: 50% 0;
  font-weight: bold;
}
/*третий абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  margin-bottom: 2px;
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
}
/*четвертый абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 3px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
  border-radius: 50%;
}
/*пятый абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: #FAF4F4;
  border: 6px double;
  color: #EE9966;
  float: left;
  font-weight: bold;
}
/*шестой абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: url(https://html5book.ru/wp-content/uploads/2015/01/border-orange.png);
  border: 2px solid #EE9966;
  color: #544E3E;
  float: left;
  font-weight: bold;
  box-shadow: 1px 1px 1px #9E9D99;
}

Форматирование кавычек quotes

Свойство задаёт тип кавычек, используемых в документе для вложенных цитат. По умолчанию кавычками оформляется текст, заключенный в тег . Также кавычки можно сгенерировать помощью свойства content, задав ему значения open-quote и close-quote. В качестве значения используется специальный символ HTML или символ Юникода. Наследуется.

	
quotes
Значения:	
[символ символ]+	Определяет вид открывающей и закрывающей кавычек. Первая пара используется для отображения внешнего уровня цитирования, вторая и последующие — для вложенных уровней цитирования.
none	Текст отображается без кавычек.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.
Синтаксис

p {quotes:'«' '»';}
p {quotes: none;}

Таблица 1. Кавычки в HTML
Описание Внешний вид Номер в Юникоде HTML-код/Мнемоника
Двойная кавычка " \0022 "
Апостроф ' \0027 '
Открывающая одинарная кавычка \2018 ‘
Закрывающая одинарная кавычка \2019 ’
Закрывающая двойная кавычка \201C “
Правая двойная кавычка \201D ”
Двойная нижняя кавычка \2E42 ⹂
Открывающая левая кавычка «ёлочка» « \00AB «
Закрывающая правая кавычка «ёлочка» » \00BB »
Нижняя одинарная открывающая кавычка \201A ‚
Верхняя одинарная обратная кавычка \201B ‛
Нижняя двойная открывающая кавычка \201E „
Двойная верхняя обратная кавычка \201F ‟
Одинарная открывающая (левая) французская угловая кавычка \2039 ‹
Одинарная закрывающая (правая) французская угловая кавычка \203A ›