Оформление текста с помощью CSS

Содержание:

0.1 михаил зощенко

1 Кочерга
- 1.1 МИХАИЛ ЗОЩЕНКО
2 Кочерга

В CSS так-же как и в HTML можно определять стиль и вид текста. Но в CSS значительно сократиться код.

Синтаксис.

Свойство:значение;

Свойства шрифта.

Изменения шрифта и размера происходит с помощью свойств CSS.

font-family – Задает список шрифтов которые будут использоваться на сайте.

Пример:

p {font-family: arial;}
p {font-family:symbol;}

Итог
Текст написанный шрифтом Arial
Текст написанный шрифтом Symbol

font-style – Задает стиль шрифта.

normal – Нормальный шрифт
italic – Текст пишется курсивом.
oblique – Текст пишется наклонным шрифтом.

Пример:

p {font-style: normal;}
p {font-style: italic;}
p {font-style: oblique;}

Итог

Текст написанный наклонным шрифтом
Текст написанный курсивом
Текст написанный наклонным шрифтом

font-variant – Используется для создания шрифта – капители (все маленькие символы преобразуются в большие).

normal – Обычный шрифт
small-caps – Шрифт – капиель.

Пример:

p {font-variant: normal;}
p {font-variant: small-caps;}

Итог

Текст написанный обычным шрифтом.
ТЕКСТ НАПИСАННЫЙ КАПЕЛЬЮ.

font-weight – Используется для задания толщины символов.

normal – Нормальная жирность
lighter – Светлое начертание
bold – Полужирный
bolder – Жирный
100-900 – 100- светлый шрифт, 900- жирный шрифт

Пример:

p {font-weight: normal;}
p {font-weight: lighter;}
p {font-weight: bold;}
p {font-weight: bolder;}
p {font-weight: 300;}

Итог

Нормальная жирность
Светлое начертание
Полужирный
Жирный
100- светлый шрифт, 900- жирный шрифт

font-size – Используется для задания размера символам.

normal – Обычный размер.
pt – Размер задается в пунктах.
px – Размер задается в пикселях.
% – Размер задается в процентах.

Пример:

p {font-size: normal;}
p {font-size:13pt;}
p {font-size: 15px;}
p {font-size: 110%;}

Итог

Нормальный размер.
Текст размером в 13 пунктов.
Текст размером в 15 пикселей.
Текст размером в 110 процентов.

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

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста.

line-height – Задает интервал между строк.

normal – Обычный интервал.
number – Интервал пишется цифрами.
px – Интервал пишется в пикселях.
% – Интервал пишется в процентах.

Пример:

p {line-height: normal;}
p {line-height:1.5;}
p {line-height: 15px;}
p {line-height: 110%;}

Итог

Читайте также: Оформление кнопок в CSS

text-decoration – Используется для оформления текста.

none – Оформлений нет
underline – Подчеркивание
overline – Линия над текстом
line-through – Перечеркивание
blink – Мигание текста

Пример:

p {text-decoration: none;}
p {text-decoration:underline;}
p {text-decoration: overline;}
p {text-decoration: line-through;}
p {text-decoration: blink;}

Итог

Оформлений нет
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста

text-transform – Управляет размером символов.

none – По умолчанию
capitalize – Начинать с прописных
uppercase – Все прописные
lowercase – Все строчные

Пример:

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

Итог

Обычный текст
Текст Начинается С Прописных
ВЕСЬ ТЕКСТ ПРОПИСНОЙ
весь текст строчный

text-align – Используется для выравнивания текста.

left – Выравнивание по левому боку.
right – Выравнивание по правому боку.
center – Выравнивание по центру.
justify – Выравнивание по всей ширине.

Пример:

p {text-align: left;}
p {text-align:right;}
p {text-align: center;}
p {text-align:justify;}

Итог

Читайте также: Таблица зебра на CSS

text-indent – Задает отступ первой строки.

px – Отступ задается пикселями.
% – Отступ задается процентами.

Пример:

p {text-indent: 25px;}
p {text-indent:110%;}

Итог

vertical-align – Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

baseline – Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom – Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle – Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub – Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super – Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom – Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top – Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top – Выравнивание верхнего края элемента по верху самого высокого элемента строки.
inherit – Наследует значение родителя.

Например нам надо записать формулу H₂O

<p>H<span style="vertical-align: sub;">2</span>O</p>

Таким образом из сплошного некрасивого текста.

михаил зощенко

Кочерга

Забавное происшествие случилось минувшей зимой в одном учреждении. Надо сказать, что это учреждение занимало небольшой отдельный дом. Причём дом был старинной постройки. Обыкновенные вульгарные печи отапливали это здание. Специальный человек — истопник — наблюдал за печами. Он меланхолично ходил со своей кочергой из этажа в этаж, шевелил дрова, разбивал головёшки, закрывал трубы и так далее, всё в этом духе. При современной технике, при водяном и паровом отоплении картинка это была, можно сказать, почти что неприличная картинка, древняя картинка, рисующая варварский быт наших предков. Поэтом году, в феврале, истопник, спускаясь по лестнице, слегка обжёг кочергой одну служащую, Надю Р. Причём служащая эта была отчасти сама виновата. Она вихрем неслась по лестнице и сама наскочила на истопника. На ходу она отстранила его рукой и, по несчастной случайности, наткнулась на кочергу, которая была довольно-таки горяча, если не сказать — раскалена. Девушка ахнула и закричала. И истопник тоже ахнул. В общем, ладонь и пальцы этой суетливой девушки были слегка обожжены. Конечно, случай этот мелкий, пустой, недостойный попасть на страницы художественной литературы. Однако неожиданные последствия этого дела были весьма забавны. И они-то и настроили нас на этот маленький рассказ.

Можно сделать вполне красивый читабельный текст

МИХАИЛ ЗОЩЕНКО

Кочерга

При современной технике, при водяном и паровом отоплении картинка это была, можно сказать, почти что неприличная картинка, древняя картинка, рисующая варварский быт наших предков. Поэтом году, в феврале, истопник, спускаясь по лестнице, слегка обжёг кочергой одну служащую, Надю Р. Причём служащая эта была отчасти сама виновата. Она вихрем неслась по лестнице и сама наскочила на истопника. На ходу она отстранила его рукой и, по несчастной случайности, наткнулась на кочергу, которая была довольно-таки горяча, если не сказать — раскалена.

Девушка ахнула и закричала. И истопник тоже ахнул. В общем, ладонь и пальцы этой суетливой девушки были слегка обожжены. Конечно, случай этот мелкий, пустой, недостойный попасть на страницы художественной литературы. Однако неожиданные последствия этого дела были весьма забавны. И они-то и настроили нас на этот маленький рассказ.

Оформление текста с помощью CSS

михаил зощенко

Кочерга

МИХАИЛ ЗОЩЕНКО

Кочерга

Похожие записи:

Добавить комментарий Отменить ответ