Эта глава научит вас, как манипулировать текстом, используя свойства CSS. Вы можете установить следующие текстовые свойства элемента —
-
Свойство color используется для установки цвета текста.
-
Свойство direction используется для установки направления текста.
-
Свойство letter-spacing используется для добавления или вычитания пробела между буквами, составляющими слово.
-
Свойство word-spacing используется для добавления или вычитания пробела между словами предложения.
-
Свойство text-indent используется для отступа текста абзаца.
-
Свойство text-align используется для выравнивания текста документа.
-
Свойство text-украшение используется для подчеркивания, наложения и зачеркивания текста.
-
Свойство text-transform используется для прописного текста или преобразования текста в прописные или строчные буквы.
-
Свойство пробела используется для управления потоком и форматированием текста.
-
Свойство text-shadow используется для установки тени текста вокруг текста.
Свойство color используется для установки цвета текста.
Свойство direction используется для установки направления текста.
Свойство letter-spacing используется для добавления или вычитания пробела между буквами, составляющими слово.
Свойство word-spacing используется для добавления или вычитания пробела между словами предложения.
Свойство text-indent используется для отступа текста абзаца.
Свойство text-align используется для выравнивания текста документа.
Свойство text-украшение используется для подчеркивания, наложения и зачеркивания текста.
Свойство text-transform используется для прописного текста или преобразования текста в прописные или строчные буквы.
Свойство пробела используется для управления потоком и форматированием текста.
Свойство text-shadow используется для установки тени текста вокруг текста.
Установить цвет текста
В следующем примере показано, как установить цвет текста. Возможное значение может быть любым именем цвета в любом допустимом формате.
<html> <head> </head> <body> <p style = "color:red;" > This text will be written in red. </p> </body> </html>
Это даст следующий результат —
Установите направление текста
В следующем примере показано, как установить направление текста. Возможные значения: ltr или rtl .
<html>
<head>
</head>
<body>
<p style = "direction:rtl;" >
This text will be rendered from right to left
</p>
</body>
</html>
Это даст следующий результат —
Установите интервал между символами
В следующем примере показано, как установить расстояние между символами. Возможные значения: нормальное или число, указывающее пробел. ,
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;" >
This text is having space between letters.
</p>
</body>
</html>
Это даст следующий результат —
Установите интервал между словами
В следующем примере показано, как установить пробел между словами. Возможные значения: нормальное или число, указывающее пробел .
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;" >
This text is having space between words.
</p>
</body>
</html>
Это даст следующий результат —
Установить отступ текста
В следующем примере показано, как сделать отступ для первой строки абзаца. Возможные значения: % или число, указывающее отступ .
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;" >
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>
Это даст следующий результат —
Установить выравнивание текста
В следующем примере демонстрируется выравнивание текста. Возможные значения: слева, справа, по центру, выровнять .
<html>
<head>
</head>
<body>
<p style = "text-align:right;" >
This will be right aligned.
</p>
<p style = "text-align:center;" >
This will be center aligned.
</p>
<p style = "text-align:left;" >
This will be left aligned.
</p>
</body>
</html>
Это даст следующий результат —
Украшение текста
В следующем примере демонстрируется, как оформить текст. Возможные значения: none, подчеркивание, подчеркивание, прямая, мигание .
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;" >
This will be underlined
</p>
<p style = "text-decoration:line-through;" >
This will be striked through.
</p>
<p style = "text-decoration:overline;" >
This will have a over line.
</p>
<p style = "text-decoration:blink;" >
This text will have blinking effect
</p>
</body>
</html>
Это даст следующий результат —
Установить текстовые случаи
В следующем примере показано, как установить регистры для текста. Возможные значения: none, прописные, прописные, строчные .
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;" >
This will be capitalized
</p>
<p style = "text-transform:uppercase;" >
This will be in uppercase
</p>
<p style = "text-transform:lowercase;" >
This will be in lowercase
</p>
</body>
</html>
Это даст следующий результат —
Установите пробел между текстом
В следующем примере показано, как обрабатывается пустое пространство внутри элемента. Возможные значения нормальные, предварительно, сейчас .
<html>
<head>
</head>
<body>
<p style = "white-space:pre;" >
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>
Это даст следующий результат —
Установить тень текста
В следующем примере показано, как установить тень вокруг текста. Это может поддерживаться не всеми браузерами.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;" >
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
Это даст следующий результат —