Новые статьи

Архив

Just click it Новости Загадки планеты Земля Знакомства Flash информер погоды Он-лайн игры Карты мира Поиск Даты конца света Ежедневный гороскоп Google gravity Красивая анимация Заработать на сайте Учебник CSS Промо Таблица калорийности Экзотические фрукты Скачать игры Фрукты Погода Партнёрские программы Слушать радио онлайн Приниматель решений (8) Отдых и релаксация Полный бред "Путешественник" Наш опрос Акция.. Все замки мира Интересное в интернете

Форматирование текста в CSS

«Форматирование текста в CSS» – третий урок учебника CSS. Здесь мы поговорим об основных способах форматирования текста средствами CSS.

CSS предоставляют вебмастеру отличную возможность управления отображением текста. Изменение расстояния между символами, всевозможные отступы, стиль символов и управление шрифтами – это и многое другое позволяют изменять таблицы стилей.

Свойства, позволяющие форматировать текст в CSS.

Color – позволяет задает цвет элемента. В качестве параметра может выступать как шестнадцетиричное, так и буквенное значение цвета.

.red { color: red }

красный цвет

Direction – позволяет изменить направление текста.

ltr – слева направо

rtl – справа налево.

div.d1{
direction : ltr;
}
div.d2{
direction : rtl;
}

Я текст, написанный слева – направо

Я текст, написанный справа – налево

К сожалению не во всех браузерах этот параметр будет отображаться правильно.

Letter – spacing – задает интервал между символами.

normal – обычные интервалы

length – пользовательский интервал.

div.c
{
letter – spacing : 7px;
}

Я текст, интервал между моими символами равен 5 пикселей.

Text – align – задает выравнивание текста внутри элемента и может принимать значения:

Left – выравнивает текст слева
Right – выравнивает текст справа
Center – выравнивает текст по центру
Justify – выравнивает текст по ширине

div.e1{
text – align : left;
}
div.e2{
text – align : right;
}
div.e3{
text – align : center;
}
div.e4{
text – align : justify;
}

Left – выравнивает текст слева

Right – выравнивает текст справа

Center – выравнивает текст по центру

Justify – выравнивает текст по ширине

Text – decoration – оформление текста. Может принимать значения:

None – обычный текст
Underline – подчеркнутый снизу текст
Overline – подчеркнутый сверху текст
Line – through – зачеркнутый текст
Blink – мигающий текст

div.f1 {
text – decoration : none;
}
div.f2 {
text – decoration : underline;
}
div.f3 {
text – decoration : overline;
}
div.f4 {
text – decoration : line – through;
}
div.f5 {
text – decoration : blink;
}

None – определяет обычный текст

Underline – подчеркивает текст снизу

Overline – подчеркивает текст сверху

Line – through – зачеркивает текст

Blink – создает мигающий текст

Text – indent – задает отступ для первой строки текста.

div.g
{
text – indent : 25px;
}

Отступ первой строки этого текста равен 25 пикселей.

Text – transform – управляет размером символов и может принимать следующие значения:

None – обычный текст
Capitalize – каждое слово начинается с заглавной буквы.
Uppercase – только большие буквы
Lowercase – маленькие буквы

div.h1 {
text – transform : none;
}
div.h2 {
text – transform : capitalize;
}
div.h3 {
text – transform : uppercase;
}
div.h4 {
text – transform : lowercase;
}

определяет обычный текст.

каждое слово начинается с заглавной буквы.

определяет только заглавные буквы.

только строчные символы.

White – space – задает способ отображения пробелов и может принимать следующие значения:

normal – допускается только один пробел.
pre – вся структура документа, с неограниченным количеством пробелов сохраняется.
nowrap – текст не будет переноситься , пока не встретит тег <br>

Word – spacing – задает интервал между словами.

div.i {
word – spacing : 15px;
}

Я текст, расстояние между словами которого равно 15 пикселей.

Используя данные свойства вы без труда сможете отформатировать текст любой сложности надлежащим образом средствами CSS.

Работа со шрифтами в CSS.

Font – family – определяет список допустимых имен шрифтов для элемента. Использован будет первый, распознанный браузером шрифт.

h1 {
font – family : "Comic Sans MS", "Times New Roman";
}

текст шрифта comic sans , если его нет в системе, то шрифта times new roman

Font – size – задает размер шрифта и может принимать значения:

xx – small – наименьший
x – small – очень маленький
small – маленький
medium – средний
large – большой
x – large – очень большой
xx – large – наибольший
smaller – меньше, чем у порождающего элемента
larger – больше, чем у порождающего элемента
length – задает фиксированное значение шришта
% – размер шришта в % от размера шрифта порождающего элемента

div.j1 {
font – size : xx – small;
}
div.j2 {
font – size : medium;
}
div.j3 {
font – size : xx – large;
}
div.j4 {
font – size : 130%;
}

Наименьший текст

Средний текст

Наибольший текст

130% от размера порождающего элемента

Font – size – adjust – задает значение аспекта шрифта. Аспект шрифта – отношение между размерами маленькой буквы x и размером тшрифта. Чем выше это значение, тем лучше шрифт будет читаться при уменьшении размера.

Font – stretch – позволяет задать интервал между символами внутри шрифта. Принимает значения:

normal – Задает масштаб сжатия или расширения как обычный
wider – Задает масштаб расширения как следующее расширенное значение
narrower – Задает масштаб сжатия как следующее сжатое значение
ultra – condenced – максимальный масштаб сжатия
extra – condenced – сильный масштаб сжатия
condenced – сжатие
semi – condenced – слабое сжатие
semi – expanded – слабое расширение
expanded – расширение
extra – expanded – сильный масштаб расширения
ultra – expanded – максимальный масштаб расширения

div.k1 {
font – stretch : wider;
}
div.k2 {
font – stretch : narrower;
}
div.k3 {
font – stretch : ultra – condensed;
}
div.k4 {
font – stretch : ultra – expanded;
}

следующее расширенное значение

следующее сжатое значение

максимальный масштаб сжатия

максимальный масштаб расширения

Font – style – задает стиль шрифта.

normal – нормальный шрифт.

italic – курсив.

oblique – наклонный шрифт.

div.l1{
font – style : normal;
}
div.l2{
font – style : italic;
}
div.l3{
font – style : oblique;
}

выводит обычный шрифт
выводит курсивный шрифт
наклонный шрифт

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

normal – обычный шрифт

small – caps – шрифт – капиель.

div.m1 {
font – variant : normal;
}
div.m2 {
font – variant : small – caps;
}

normal – обычный шрифт

small – caps – Выводит шрифт – капиель

Font – weight – позволяет задать толщину символов:

normal – обычные символы
bold – жирные символы
bolder – более жирные символы
lighter – более тонкие символы

div.n1 {
font – weight : normal;
}
div.n2 {
font – weight : bolder;
}
div.n3 {
font – weight : lighter;
}
div.n4{
font – weight : 800;
}

normal – Определяет обычные символы

bolder – Определяет более жирные символы

lighter – Определяет более тонкие символы

Толщина задана численно

Параметры размеров элементов CSS

Параметры, приведенные в таблице ниже позволяют управлять всеми возможными размерами элементов.

Параметр	Описание	Значения
height	Задает высоту элемента	auto
		length
		%
line – height	Задает интервал между строками	normal
		number
		length
		%
max – height	Задает максимальную высоту элемента	none
		length
		%
max – width	Задает максимальную ширину элемента	none
		length
		%
min – height	Задает минимальную высоту элемента	length
min – height	Задает минимальную высоту элемента	%
min – width	Задает минимальную ширину элемента	length
min – width	Задает минимальную ширину элемента	%
width	Задает ширину элемента	auto
		%
		length

Сегодня мы разобрались с форматированием текста в CSS. Данный урок получился достаточно объемным, но он действительно важен для понимания основ работы с CSS. Теперь вы можете самостоятельно настроить отображение текстов средствами CSS, которые сильно опережают функционал HTML.

Правильно подобранный фон - неотъемлемый атрибут для любого качественного сайта и в следующем уроке мы поговорим о возможностях работы с фоном в CSS.

Наверх

Источник: Создание сайтов