Свойства текста

Выравнивание текста.


Если Вы помните, из курса HTML, для того что бы выровнять тест, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align(выравнивание) и одно из его возможных значений center(по центру)

Запись имела такой вид:
<p align="center">текст по центру</p>

В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.

  • left - Выровнять текст по левому краю элемента (по умолчанию).
  • rigth - Выровнять текст по правому краю.
  • center - Выровнять текст по центру.
  • justify - Выровнять текст по обоим краям.



Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:
<p style="text-align: center">текст по центру </p>

- это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.

А вот в примере ниже используется тег <style> в заголовке документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Выравнивание текста</title>
<style type="text/css">
h1 { text-align: center }
p { text-align: justify }
</style>
</head>
<body>
<h1>Всё о слонах</h1>
<p>Слон - самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон - "животное, которое превосходит всех других в остроумии и интеллекте".</p>
</body>
</html>

 

Оформление текста.

Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.

Возможные значения:

  • blink - Текст будет мигать.
  • line-through - Делает текст перечеркнутым.
  • overline - Надчёркивание текста.
  • underline - Подчеркивание текста.
  • none - Текст без оформления.



Пишется так:
<a href="/index.html" style="text-decoration:none">Ссылка без подчёркивания</a>

Пример:
Файл mystyle.css

h1 {text-align: center}
h3 {text-align: left; text-decoration: underline}
a {text-decoration: underline}
a:hover {text-decoration:none}
p {text-align: justify}
Файл index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Оформление текста</title>
<link rel="stylesheet" href="/mystyle.css" type="text/css">
</head>
<body>
<h3>Меню:</h3>
<a href="/index.html">Всё о слонах.</a><br>
<a href="/elephant.html">Купить слона.</a>
<hr>
<h1>Всё о слонах</h1>
<p> Слон - самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>

смотреть пример

Обратите внимание на внешний файл CSS в нем мы "декорировали" ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}

 

Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться "живым".

 

Трансформация текста

 

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

Значения:

  • none - Текст отображается без каких-либо изменений.(по умолчанию)
  • capitalize - Каждое слово в тексте отображается с заглавного символа.
  • lowercase - Все символы преобразуются в нижний регистр.
  • uppercase - Все символы преобразуются в верхний регистр.



Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Трансформация текста</title>
</head>
<body>
<p style="text-transform: capitalize">союз советских социалистических республик</p>
<p style="text-transform: lowercase">СССР ссср</p>
<p style="text-transform: uppercase">ссср СССР</p>
</body>
</html>

 

Расстояние между словами.


Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.

Значения:
normal - Нормальное расстояние. (по умолчанию)
px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Расстояние между словами</title>
</head>
<body>
<p align="left" style="word-spacing: 10px">Расстояние между словами равно десяти пикселям</p>
<p align="left" style="word-spacing: -10px">Расстояние между словами может иметь отрицательное значение</p>
</body>
</html>

Автор: Семикопенко Алексей Алексеевич

www.webremeslo.ru