Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Text

Свойства, изменяющие текст

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

Свойство text-align в CSS

Text-align используется для выравнивания текста. Очень часто используется разработчиками для выравнивания заголовков статей. Например, на этом сайте вы можете увидеть, что все заголовки выровнены по правому краю.
Это свойство имеет 6 основных значений:

В качестве ознакомления с данным свойством предлагаю вам рассмотреть вот такой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Свойство text-align в CSS</title>
 <style type="text/css">
h1{ text-align:center;}
h2 {text-align:right;}
p {text-align:justify;}
</style>
 </head> 
 <body>
<h1>Этот заголовок первого уровня выровнен по центру</h1>
<h2>Заголовок второго уровня выровнен по правому краю</h2>
<p>Этот текст выровнен по ширине (одновременно и по правому и
 по левому краю)</p>
 </body>
</html>

В результате вы должны получить следующую картину:

Применение свойства text-align в css

Свойство text-decoration в CSS

Свойство text-decoration позволяет оформлять текст определенным способом. Рассмотрим основные значения данного свойства:

Вот вам небольшой пример использования данного свойства:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Свойство text-decoration в CSS</title>
 <style type="text/css">
h1{
 text-align:center;
text-decoration:underline;
}
h2 {
text-align:right;
text-decoration:overline;
}
p {
text-align:justify;
text-decoration:line-through;
}
</style>
 </head> 
 <body>
<h1>Этот заголовок первого уровня выровнен по центру</h1>
<h2>Заголовок второго уровня выровнен по правому краю</h2>
<p>Этот текст выровнен по ширине (одновременно и по правому
 и по левому краю)</p>
 </body>
</html>

В результате получается следующее:

Свойство text-decoration в CSS

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

Свойство text-indent в CSS

Свойство text-indent позволяет делать отступ первой строки. То есть таким образом можно обозначить красную строчку абзаца. Задаётся данное свойство очень просто, например вот так:

p {
text-indent:30px;
}

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

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

Вот небольшой пример использования данного свойства:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
  <title>Свойство text-transform</title>
  <style type="text/css">
   h1 { 
    text-transform: uppercase; 
   }
   p { 
    text-transform: capitalize; /* Каждое слово  в тексте будет
 начинаться с заглавной буквы */
   }
  </style>
 </head>
 <body> 
   <h1>text-transform uppercase</h1>
   <p>text-transform capitalize</p> 
  </body>
</html>

Результат вы можете увидеть на рисунке:

text-transform

Свойство letter-spacing в CSS

Свойство letter-spacing позволяет задать расстояние межу буквами в тексте. Синтаксис написания довольно простой:

h1 { letter-spacing: 8px;}
p{ letter-spacing :5px; }

Свойство word-spacing в CSS

Свойство word-spacing позволяет задать расстояние между словами в тексте. Прописать это свойство можно вот так:

h1 { word-spacing:15px;}
h2{ word-spacing :10px; }

Последние два свойства применяются крайне редко, да и применять их особо негде. Разве в каких-нибудь дизайнерских работах (в виде исключения). В следующим уроке я расскажу вам о редактировании списков с помощью CSS



наверх