CSS урок 6. Основные стили CSS: оформление текста

Авторadmin / Опубликовано

Цель урока: Знакомство с основными свойствами для оформления текста; свойства color, text-align, text-decoration, text-transform, text-indent, direction, line-height, letter-spacing, word-spacing, vertical-align

Назад
К оглавлению
Далее

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

Перечислим основные свойства для оформления fkтекста и их значения

color (цвет)

Цвет текста

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

  • red (название)
  • rgb(255,0,0) (код RGB)
  • #ff0000 (шестнадцатиричный код)

Пример:

.ex {color:blue;}
 h1 {color:#00ff00;}
 p {color:rgb(255,0,0);}

Результат:

пример оформления текста css

text-align (выравнивание)

Выравнивание текста по горизонтали

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

  • center (по центру)
  • left (по левому краю)
  • right (по правому краю)
  • justify (по ширине)

Пример:

<style type="text/css">
 h1 {text-align:center;}
 p.date {text-align:right;}
 p.main {text-align:justify;}
</style></head> 
<body> 
<h1>Алгоритм</h1>
<p class="main">
Название "алгоритм" произошло от латинской формы имени величайшего среднеазиатского математика Мухаммеда ибн Муса ал-Хорезми (Alhorithmi), жившего в 783—850 гг. В своей книге "Об индийском счете" он изложил правила записи натуральных чисел с помощью арабских цифр и правила действий над ними "столбиком", знакомые теперь каждому школьнику. В XII веке эта книга была переведена на латынь и получила широкое распространение в Европе.
</p>
<p class="date">Мухаммед ибн Муса ал-Хорезми, 783—850 гг</p>

Результат:

пример выравнивания текста в css

text-decoration (оформление)

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

  • overline (подчеркивание сверху)
  • line-through (перечеркивание)
  • underline (подчеркивание)
  • blink (мигание текста)
  • none (без оформления)

Пример:

...
<style type="text/css">
 a{text-decoration:none}
 p.class1{text-decoration:overline}
 p.class2{text-decoration:line-through}
 p.class3{text-decoration:underline}
 p.class4{text-decoration:blink}
</style></head> 
<body> 
<a href="#">Гиперссылка</a>
<p class="class1">класс 1</p>
<p class="class2">класс 2</p>
<p class="class3">класс 3</p>
<p class="class4">класс 4</p>
...

Результат:

Гиперссылка

класс 1

класс 2

класс 3

класс 4

text-transform (преобразование текста)

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

  • uppercase (верхний регистр)
  • lowercase (нижний регистр)
  • capitalize (каждое слово с заглавной буквы)
  • none (без преобразования)

Пример:

...
<style type="text/css">
 p.uppercase{text-transform:uppercase}
 p.lowercase{text-transform:lowercase}
 p.capitalize{text-transform:capitalize}
</style></head> 
<body> 
<p class="uppercase">Это параграф для примера</p>
<p class="lowercase">Это параграф для примера</p>
<p class="capitalize">Это параграф для примера</p>

Результат:

Это параграф для примера

Это параграф для примера

Это параграф для примера

text-indent (красная строка)

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

  • 20px (значение в пикселях)

Пример:

...
<style type="text/css">
p{text-indent:50px}
</style></head>
<body>
<p>Оформление текста в значительной степени влияет на то, как будет воспринята передаваемая им информация. Зачастую плохо, неграмотно оформленный текст вообще не читают, так как он вызывает дискомфорт у читателя на подсознательном уровне.</p>

Результат:

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

direction (направление текста)

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

  • ltr (слева направо)
  • rtl (справа налево)

Пример:

...
<style type="text/css">
p{direction:rtl}
</style></head>
<body>
<p>Это текст</p>

Результат:

Это текст

line-height (межстрочный интервал)

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

  • normal

    • Межстрочное расстояние вычисляется автоматически (значение по умолчанию)

  • число

    • Множитель, на который будет умножен размер текущего шрифта для вычисления межстрочного расстояния

  • размер

    • Фиксированное межстрочное расстояние в px (пикселях), pt (пунктах), cm (сантиметрах) и т.д.

  • %

    • Межстрочное расстояние в % от размера текущего шрифта

Пример:

...
<style type="text/css">
 p.small{line-height:90%}
 p.big{line-height:200%}
</style></head>
<body>
<p class="small">Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. </p>
<p class="big">Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. </p>

Результат:

Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера.

Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера.

letter-spacing (межсимвольное расстояние)

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

  • значение

Пример:

...
<style type="text/css">
h5{letter-spacing:2px}
h3{letter-spacing:-1px}
</style></head> 
<body>
<h5>Первый заголовок</h5>
<h6>Второй заголовок</h6>

Результат:

Первый заголовок
Второй заголовок

word-spacing (расстояние между словами)

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

  • значение

Пример:

...
<style type="text/css">
p{word-spacing:30px}
</style></head> 
<body>
<p>Пример параграфа для демонстрации стиля.</p>
...

Результат:

Пример параграфа для демонстрации стиля.

vertical-align (вертикальное выравнивание)

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

Значение Описание
число Поднимает или опускает элемент относительно базовой строки. Положительные числа поднимают элемент, отрицательные — опускают (можно использовать пиксели, сантиметры и т.д.)
% Поднимает или опускает элемент относительно базовой строки на величину % от высоты строки ("line-height"). Положительные % поднимает элемент, отрицательный — опускает.
baseline Выравнивание по базовой линии родительского элемента. Значение по умолчанию
sub Выравнивание, как подстрочный индекс (H2O)
super Выравнивание как надстрочный индекс (x2)
top Верхний край элемента выравнивается по верхнему краю самого высокого элемента строки
text-top Верх элемента выравнивается по верху самого высокого текстового элемента на строке
middle Элемент выравниваетя по середине родительского элемента
bottom Низ элемента выравнивается по низу самого низкого элемента строки
text-bottom Низ элемента выравнивается по низу самого низкого элемента строки
inherit Значение наследуется от родительского элемента

text-align выравнивание css
Пример:

...
<style type="text/css">
 h5 {text-align:center}
 p.main {text-align:justify}
 p.date {text-align:right}
</style></head> 
<body>
<h5>Стих 1</h5>
<p class="main">
Вопрос такой: зачем все это мне? Но, не найдя ответа на подходе, Я понял, что пришедшее извне Стремительно вовне же и уходит. Другой вопрос — как быть? Но тут Ответ просился сам: бездействуй! (Угли недолго проживут В костре, где все без происшествий.)
</p>
<p class="date">31/01/2017</p>
...

Результат:

Стих 1

Вопрос такой: зачем все это мне? Но, не найдя ответа на подходе, Я понял, что пришедшее извне Стремительно вовне же и уходит. Другой вопрос — как быть? Но тут Ответ просился сам: бездействуй! (Угли недолго проживут В костре, где все без происшествий.)

31/01/2017

Назад
К оглавлению
Далее