Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

Форматирование текста в 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 – width Задает минимальную ширину элемента length
%
width Задает ширину элемента auto
%
length





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

 

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



Основы CSS
Фон в CSS
       
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение