Свойства текста
В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.
Выравнивание текста
Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align(выравнивание) и одно из его возможных значений center(по центру)
Запись имела такой вид:
<p align="center">текст по центру</p>
В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.
text-align (так же как и htmlловский атрибут align) имеет следующие значения:
- left — Выровнять текст по левому краю элемента (по умолчанию).
- right — Выровнять текст по правому краю.
- center — Выровнять текст по центру.
- justify — Выровнять текст по обоим краям.
Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:
<p style="text-align: center">текст по центру </p>
— это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.
А вот в примере ниже используется тег <style> в заголовке документа:
<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 — Tекст элемента начинает мерцать, не поддерживается большинством современных браузеров.
- 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
<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-indent — задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает «красную строку».
Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.
В примере ниже расстояние отступа от левого края задаётся в пикселях (px):
<html>
<head>
<title>Красная строка</title>
<style type="text/css">
h1 {text-align: center}
p {text-align: justify; text-indent: 20px}
</style>
</head>
<body>
<h1>Всё о слонах</h1>
<p>Слон - самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон - "животное, которое превосходит всех других в остроумии и интеллекте".</p>
</body>
</html>
Трансформация текста
Свойство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.
Значения:
• none — Текст отображается без каких-либо изменений.(по умолчанию)
• capitalize — Каждое слово в тексте отображается с заглавного символа.
• lowercase — Все символы преобразуются в нижний регистр.
• uppercase — Все символы преобразуются в верхний регистр.
Пример:
<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>
Вертикальное выравнивание
Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства vertical-align:
• baseline — Выравнивает базовую линию элемента по базовой линии родителя.
• bottom — Выравнивает элемент по нижней части строки.
• middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
• sub — Нижний индекс (размер шрифта не меняется).
• super — Верхний индекс (размер шрифта не меняется).
• text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
• text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
• top — Выравнивает элемент по верхней части строки.
Базовая линия — это линия, на которой располагаются «сидят» символы в текстовой строке, Например буква «А» сидит прямо на этой линии, а вот строчная буква «у» сидит на ней же, но свесив ноги..
Взгляните на рисунок с разметкой строки:
Так же вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения.
Пример:
<html> <head> <title>Вертикальное выравнивание текста</title> </head> <body> <font size="+3">А и Б </font> <span style="vertical-align: +5px">сидели на трубе </span> <span style="vertical-align: bottom">А упало </span> <span style="vertical-align: top">Б пропало.. </span> <span style="vertical-align: 50%">что осталось на трубе?</span> <hr> формула воды: H<span style="vertical-align: sub">2</span>O <hr> <span>н</span> <span style="vertical-align: -10px">а</span> <span style="vertical-align: -20px">и</span> <span style="vertical-align: -30px">с</span> <span style="vertical-align: -40px">к</span> <span style="vertical-align: -50px">о</span> <span style="vertical-align: -60px">с</span> <span style="vertical-align: -70px">о</span> <span style="vertical-align: -80px">к</span> </body> </html>
Пробелы и перенос строки
Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.
Может иметь следующие значения:
- normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
- nowrap — запрещает автоматический перенос строки.
- pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.
Пример:
<html> <head> <title>Пробелы и перенос строки</title> </head> <body> <p style="white-space: pre"> Слон. Дали туфельки слону. Взял он туфельку одну И сказал: - Нужны пошире, И не две, а все четыре! С. Я. Маршак. </p> <hr> <p style="white-space: nowrap"> Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали? </p> </body> </html>
<html> <head> <title>Расстояние между словами</title> </head> <body> <p align="left" style="word-spacing: 10px">Расстояние между словами равно десяти пикселям</p> <p align="left" style="word-spacing: -10px">Расстояние между словами может иметь отрицательное значение</p> </body> </html>
Межсимвольное расстояние
А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:
- normal — Нормальное расстояние. (по умолчанию)
- px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Пример:
<html> <head> <title>Расстояние между символами</title> </head> <body> <p style="letter-spacing: 5px">Расстояние между буковками равно пяти пикселям</p> <p style="letter-spacing: -3px">А здесь буквы, из за отрицательного значения, будут наплывать друг на друга</p> </body> </html>
Интерлиньяж
Интерлиньяж — это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:
- normal — Норма (по умолчанию).
- % — Проценты. за сто процентов берется высота шрифта
- 0.5 — Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 — двойному.
- px — Пиксели и любые другие единицы измерения, принятые в CSS.
Пример:
<html> <head> <title>Интерлиньяж</title> </head> <body> <div style="line-height: 150%"> строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая </div> <hr> <div style="line-height: 0.5"> строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая </div> <hr> <div style="line-height: 25px"> строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая </div> </body> </html>
Полезные советы
- При декорировании текста, свойство —text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.
- А Вам точно нужно использовать значениеnowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..
- Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.
Свойства шрифта
В предыдущей главе мы рассмотрели свойства текста, в этой поговорим о том что можно сделать с шрифтом используя инструменты CSS.
Стиль шрифта
Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.
Шрифт может иметь следующие стили:
- normal — обычный (по умолчанию)
- italic — курсив
- oblique — наклонный
Пример:
<html> <head> <title>Стиль шрифта</title> </head> <body> <p style="font-style: italic">это курсив</p> <p style="font-style: oblique">а это наклонный текст</p> <p style="font-style: normal">И чем спрашивается, они отличаются?</p> </body> </html>
Чем отличается курсив от наклонного текста? Курсив — это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст — это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.
Начертание шрифта
Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.
Значения:
- normal — нормальный (по умолчанию)
- small-caps — все буквы заглавные и уменьшенные
Пример:
<html> <head> <title>Все буквы заглавные</title> </head> <body> <p style="font-variant: small-caps">Купи слона!!</p> </body> </html>
Размер шрифта
Свойство CSS font-size — определяет размер шрифта.
Размер шрифта может быть задан в процентах или пикселях и любых других допустимых единицах измерения CSS, а так же абсолютным или относительным значением.
значения абсолютного размера шрифта:
- xx-small — очень очень маленький
- x-small — очень маленький
- small — маленький
- medium — средний
- large — большой
- x-large — очень большой
- xx-large — очень очень большой
значения относительного размера шрифта:
- larger — больше чем размер шрифта родительского элемента
- smaller — меньше чем размер шрифта родительского элемента
Пример:
<html> <head> <title>Размер шрифта</title> </head> <body> <div style="font-size: 18px; background-color: #ecfef2; border: 5px double #245404"> <p>Размер шрифта родительского элемента (блока DIV) равен 18 пикселям</p> <p style="font-size: larger">Этот шрифт будет крупнее относительно элемента родителя</p> <p style="font-size: smaller">А этот шрифт будет мельче относительно элемента родителя</p> </div> <p style="font-size: 14px;">В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.</p> <div style="font-size: 60pt; background-color: #ecfef2; border: 5px double #245404"> <p style="font-size: xx-small">xx-small - очень очень маленький</p> <p style="font-size: x-small">x-small - очень маленький </p> <p style="font-size: small">small - маленький </p> <p style="font-size: medium">medium - средний</p> <p style="font-size: large">large - большой</p> <p style="font-size: x-large">x-large - очень большой</p> <p style="font-size: xx-large">xx-large - очень очень большой</p> </div> </body> </html>
Жирность шрифта
Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:
- normal — обычный шрифт
- bold — полужирный шрифт
- bolder — жирный шрифт
- lighter — тонкий шрифт
А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.
Пример:
<html> <head> <title>Жирность шрифта</title> </head> <body> <div style="font-size: 18pt"> <p style="font-weight: bolder">жирный шрифт</p> <p style="font-weight: lighter">тонкий шрифт</p> <p style="font-weight: 600">жирность шрифта равна 600</p> </div> </body> </html>
Семейство шрифта
Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.
Возможность указывать до трёх имен шрифтов через запятую используется разработчиками во избежание возможных проблем связанных с отсутствием, по тем или иным причинам, указанных имен в библиотеке шрифтов на компьютере пользователя.
Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} — будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.
Если же браузер не найдёт в библиотеке шрифтов пользователя ни одного шрифта из указанных то он будет использовать тот шрифт который указан в его настройках «по умолчанию»
Однако также можно указать браузеру не только какой то конкретный шрифт, но и обозначить предпочтительное семейство шрифтов из перечисленных ниже возможных
- serif — шрифты с засечками
- sans-serif — рубленые шрифты
- cursive — курсивные шрифты
- fantasy — декоративные шрифты
- monospace — моношириные шрифты
Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif — рубленых шрифтов.
Пример:
<html>
<head>
<title>Семейство шрифта</title>
<style type="text/css">
h3 {font-family: Times New Roman, Verdana, sans-serif;}
p {font-family: Monotype Corsiva, Verdana;}
span {font-family: Comic Sans MS;}
</style>
</head>
<body>
<h3>Купи слона</h3>
<p>У нас Вы можете по <span>выгодным ценам</span> приобрести лучших слонов!!</p>
</body>
</html>
Параметры шрифта
Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..
Так вот это неспроста.. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.
Речь будет недолгой.. )) Итак font — (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:
- font-style
- font-variant
- font-weight
- font-size
- font-family
Для более детального ознакомления с возможными параметрами смотрите каждый атрибут отдельно.
Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial
Все это можно осуществить, написав следующие:
span{
font-style: italic;
font-weight: bolder;
font-size: 20px;
font-family: Arial
}
А можно обойтись всего одной строчкой используя базовый атрибут font.
Вот так:
span{font: italic bold 20px Arial}
Мы просто перечислили нужные нам параметры «марки» font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.
Пример:
<html>
<head>
<title>Параметры шрифта</title>
<style type="text/css">
span{font: italic bold 20px Arial}
</style>
</head>
<body>
<span>Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial</span>
</body>
</html>
Полезные советы:
- Используйте базовый атрибут font если необходимо применить к шрифту элемента более одного свойства.
- Помните что текст, прежде всего, должен быть удобным для чтения и только потом красивым и стильным, а по сему советую избегать следующих вещей:
Не стоит использовать огромные и малюсенькие шрифты, это напрягает, ищите золотую середину. Так же не стоит злоупотреблять декоративными шрифтами, конечно, все эти закорючки весьма красивы, но читать длинный текст с таким шрифтом невыносимо. Выделяйте жирным только те фразы и выражения, на которых хотели бы произвести акцент, а курсивом «особые места» в тексте, к примеру, цитаты или афоризмы.
- По мнению психологов, в длинном тексте должно использоваться не менее двух шрифтов, но и не более четырёх.. Причем выделение текста «особым» шрифтом должно иметь систематический характер.. Например все заголовки одним шрифтом, «основной текст» вторым, и «особый текст» третьим.