Содержание

Оформление текста css – как оформить его красиво

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

Цвет

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

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

Цвет в css задается с помощью свойства color. Значения можно записывать в виде ключевых слов (white, brown, orange), шестнадцатеричных hex-кодов (#000, #fff, #ccc) и в режиме rgb (red, green, blue) где определяется насыщенность каждого из этих цветов в числовом значении от 0 до 255.

Сам шрифт

Не менее важным фактором при визуальном восприятии является и сам шрифт. Ни для кого ни секрет, что для основного текста лучше всего подбирать один из стандартных шрифтов без засечек.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Задать шрифт можно с помощью свойства font-family, а значением выступает имя или семейство. Для надежности можно записать пару вариантов через запятую. Например, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут мы записали аж четыре варианта. Если браузер найдет шрифт Lato, то будет использовать именно его. Если же он не будет обнаружен, то следующим веб-обозреватель попытается использовать Georgia, а если и его не будет, то Arial. Этот шрифт есть на любых компьютерах с операционной системой Windows.

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

Размер шрифта

Также помогает оформить текст css-свойство font-size. Оно, как понятно из названия, задает размер текста. Обычно его записывают в пикселях, хотя часто также используются относительные единицы em.

У некоторых html элементов размер текста определен изначально. Например, если вы заключите текст в теги h2, то он автоматически выведется большими жирными буквами. На самом деле вы легко можете изменить эту установку по умолчанию:

h2{ font-weight: normal; font-size: 50px; }

h2{

font-weight: normal;

font-size: 50px;

}

Например, убрать жирность и увеличить базовый размер. Например, название сайта иногда выводится очень большим шрифтом

Тень текста

Любому текстовому фрагменту можно задать тень с помощью правила text-shadow. Давайте разберем его синтаксис на примере:

span{ text-shadow: 2px 2px 5px red; }

span{

text-shadow: 2px 2px 5px red;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Все текстовые фрагменты, заключенные в теги span, получат такую тень. Выглядит она так:

Первое числовое значение задает смещение по горизонтали, второе – смещение по вертикали, третье – размытие тени, это позволяет снизить ее резкость и насыщенность. Последний параметр – цвет.

Если какое-то из значений вам не нужно, просто поставьте 0. Цвет записывать обязательно. Параметры тени зависят в первую очередь от размера шрифта – чем он больше, тем больше можно делать смещение.

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

Множественная тень

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

span{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua; } div{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua, 0 0 30px blue, 0 0 35px purple; } p{ font-size: 40px; text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green; }

span{

font-size: 40px;

text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua;

}

div{

font-size: 40px;

text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua,

0 0 30px blue, 0 0 35px purple;

}

p{

font-size: 40px;

text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green;

}

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

Тени являются мощным css3-инструментом для оформления текста и уже сегодня активно используются, в основном в заголовках, которые нужно по-особенному выделить среди остального текста.

Другие свойства

На этом, конечно, арсенал css приемов для стилизации текста не заканчивается. В этой статье вы можете прочитать еще о некоторых параметрах, таких, как жирность, начертание, варианты написания букв и их трансформация (ссылка на статью “Как задать шрифт”). Там же описывается и letter-spacing – межбуквенный интервал, который можно добавлять к нужным текстовым фрагментам, если это будет необходимо.

Оформление при наведении

Также можно и подчас нужно оформить текст красиво в css при наведении на него курсора мышки. В чем может заключаться такая стилизация? Например, в появлении подчеркивания, изменения цвета текста, или фонового цвета, изменения размера шрифта и т.д.

Интересно, что в последнее время в сайтостроении популярно делать все изменения плавно. Для этого просто пропишите нужному элементу на странице:

#header{ transition: (задержка в секундах или миллисекундах) например 1s; }

#header{

transition: (задержка в секундах или миллисекундах) например 1s;

}

Теперь если к шапке добавить стили с псевдоклассом hover (то есть добавить изменение внешнего вида при наведении), то изменение некоторых значений будет происходить плавно, что само по себе немного красивее, по сравнению с резким переходом.

Итог

В css огромный арсенал средств для изменения внешнего вида текста. Самый мощный из них – это возможность использовать любые шрифты, задавая их через font-family, а также добавившаяся в css3 возможность добавлять тень. На этом я заканчиваю эту статью, посвященную приемам изменения текста, а вам желаю успешно использовать эти знания при разработке веб-сайтов. Дополнительную информацию по теме вы можете найти в премиум курсе по css3

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

выравнивание, отступ, обтекание и другое форматирование

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

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

Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги <div>, <p>). Свойству может быть задано одно из четырех значений:

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

Вот код HTML-страницы, текст которой выровнен по правому краю:

<!DOCTYPE html>
<html>
<head>
    <title>Выравнивание по правому краю</title>
    <style type="text/css">
    p { text-align: right; }
    </style>
</head>
<body>
<p>Текст, который вы сейчас читаете, выровнен по правому краю.</p>
</body>
</html>

Выглядеть страница будет так:

Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.

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

Может задаваться только для строчных элементов (картинок, форм), определяется свойством

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

  • baseline. задаётся свойству по умолчанию и выравнивает базовую линию элемента по базовой линии родителя. Если у родителя её нет, то выравнивание происходит по нижней границе.
  • top и bottom. Если задано первое значение, то верхний край элемента будет совпадать с верхним краем самого высокого элемента строки. Можно сказать, что top — это выравнивание по верхнему краю. Второе свойство выполняет противоположную функцию — совмещает нижний край оформляемого элемента с нижней частью элемента, расположенного в строке ниже всех, то есть происходит выравнивание по нижнему краю.
  • text-top и text-bottom. От предыдущих свойств отличаются тем, что выравнивание происходит по самым нижним и верхним текстовым элементам, а не любым.
  • sub и super. Аналоги HTML-тегов <sub> и <sup>. Первое свойство делает элемент подстрочным, второе — надстрочным. Шрифт текста при этом не меняется.
  • middle. Выравнивание по центру относительно элемента-родителя.

Также с помощью vertical-align можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная — вниз.

Отступ первой строки

Свойство text-indent позволяет задать отступ первой строки текста. Например, так можно отформатировать абзацы, чтобы лучше визуально отделить их друг от друга. В качестве значения используется цифра, задающая длину в процентах, единицах или пикселях. Отрицательное число превратит отступ в выступ.

<p style=”text-indent: 3em;”>Текст</p>

Межстрочный интервал

Задаётся свойством line-height, в качестве значения которого может указываться:

  • Процент. Высчитывается от размера шрифта элемента.
  • Число. Определяется как множитель от размера шрифта, который принимается за единицу. Например line-height: 1.5; установит полуторный интервал.
  • Пиксели или пункты. Определяют не переменное, как предыдущие варианты, а постоянное расстояние.

Декорирование текста

Значение свойства text-decoration позволяет сделать текст зачёркнутым (line-through), подчёркнутым (underline) — линия появляется под текстом, надчёркнутым (overline) — линия появляется над текстом, или отменить эффекты (none).

Вот пример кода:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p>Это зачёркнутый текст.</p>
<p>Это подчёркнутый текст.</p>
<p>Это надчёркнутый текст.</p>
</body>
</html>

Результатом работы будет такая страница:

Интервал между символами и словами

Расстояние между словами можно изменить с помощью свойства word-spacing. Межсимвольное расстояние задаётся свойством letter-spacing. В качестве значений используются любые принятые в CSS единицы длины.

Смена регистра

Указав свойство text-transform, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase), строчными (lovercase), или чтобы каждое слово начиналось с большой буквы (capitalize).

Код:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p>Здесь все буквы будут большими.</p>
<p>Все буквы этой строки будут строчными.</p>
<p>Здесь каждое слово будет начинаться с заглавной буквы.</p>
</body>
</html>

Результат:

Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль.

Полезные ссылки:

www.seostop.ru

text-decoration | CSS | WebReference

Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Анимируетсяtext-decoration-line: Нет
text-decoration-style: Нет
text-decoration-color: Да

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечёркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчёркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчёркивание у ссылок, которое задано по умолчанию.

Песочница

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчёркивание 
                                   при наведении курсора мыши на ссылку */
   }
  </style> 
 </head> 
 <body>
  <p><a href="page/1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

Объект.style.textDecoration

Примечание

Линия, полученная с помощью значения line-through, в IE7 располагается выше чем в других браузерах; в IE8 эта ошибка исправлена.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

webref.ru

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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать размер шрифта в CSS. В данной статье я бы хотел рассказать, как задать стиль и насыщенность (по-другому называют жирность) для шрифта в CSS. В данной статье мы изучили некоторые теги, с помощью которых можно задавать стиль и насыщенность для текста на html-странице. Но это неправильно, html должен задавать только структуру сайта, всё оформление должно быть сделано с помощью CSS. Курсив мы задавали с помощью тега <i>. В CSS за это отвечает свойство font-style со значением italic. Давайте создадим тестовую html-страницу:


<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

Для абзацев в файле стилей style.css зададим стиль шрифта:


p {
font-style:italic;
}

После обновления страницы вы увидите, что шрифт стал курсивным. Другие значения для свойства font-style:
normal — стандартное начертание текста
oblique — наклонное начертание текста (не то же самое, что курсивное). Разницу можно будет заметить не для всех шрифтов.

Я всегда использовал только значение italic, других никогда нигде не использовал.

Давайте теперь зададим насыщенность или жирность для нашего текста. Делается это с помощью свойства font-weight (weight с англ «вес», так сказать вес шрифта) со значением bold:


p {
font-weight:bold;
}

Если вы запустите данную страницу, то увидите, что текст стал полужирным. Значение для насыщенности можно задавать равным от 100 до 900 с шагом 100. 100 — это самое светлое начертание, которое способен отобразить браузер, 900 — самое темное. Стандартный шрифт соответствует значению 400, полужирный (тот, который получается при значении bold — 700). Задание насыщенности в числах как-то не прижилось, и не все браузеры это отобразят (я сам тестировал в некоторых браузерах, но так и не заметил разницы между 100 и 600). Стандартную насыщенность можно задать с помощью свойства normal, что иногда требуется:


p {
font-weight:normal;
}

Следующее свойство, которое служит для оформления текста — это text-decoration. Оно служит для того, чтобы мы могли сделать текст, например, подчеркнутым (значение underline). В html для этого служит тег <u>. С помощью этого свойства мы можем также подчеркнуть текст сверху (overline) и перечеркнуть текст (line-through). Убрать декорацию текста можно с помощью значения none. Давайте создадим тестовую html-страницу и применим на ней inline-стиль для каждого абзаца:


<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
<p>Подчеркнутый абзац данного текста</p>
<p>Надчеркнутый абзац данного текста</p>
<p>Перечеркнутый абзац данного текста</p>
<p>Простой абзац данного текста</p>
</body>
</html>

Запустите данную страницу и убедитесь, что всё работает, как нужно.

Домашнее задание: в данной статье мы рассмотрено 3 свойства и у данных свойств много значений. Запомнить их все трудно, но если практиковаться, то будет намного проще. Поэтому создайте свою html-страницу и примените к ней все те свойства, которые вы изучили в данной статье.

В данной статье вы узнали как оформлять текст с помощью свойств font-style, font-weight, text-decoration.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Следующая статья >

alekseygulynin.ru

cвойства текста и шрифтов в CSS с примерами.

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

Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.

Каждое правило CSS состоит из селектора и определения. Селектор — обычно это тег, к которому мы применяем наш стиль, а определение — это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство — цвет, значение — красный.

Синтаксис CSS следующий:

селектор { свойство: значение }

Пример правила CSS:

p { color: blue }

В этом примере задано правило тегу <p> отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство : значение).

p { color: blue; font-size: 10pt }

В этом примере задано правило тегу <p> отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство : значение) применённые к одному селектору, в данном случае к тегу абзаца <p>.

В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS.

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

Свойство font-family
Свойство Значение Описание Пример
font-family имя шрифта Устанавливает шрифт из списка P {font-family: Arial, sans-serif}

Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.

Универсальные семейства шрифтов:

  • serif — антиквенные шрифты (шрифты с засечками), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
  • fantasy — семейство декоративных шрифтов;
  • cursive — семейство курсивных шрифтов;

Пример с использованием:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-family</title>
	<style>
		h2 { font-family: Arial, sans-serif }
		h3 { font-family: Georgia, Times, serif }
	</style>
</head>
<body>
	<h2>Заголовок h2</h2>
	<h3>Заголовок h3</h3>
</body>
</html>

Следующее свойство:

Свойство font-style
Свойство Значение Описание Пример
font-style normal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P {font-style: oblique}

Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-style</title>
</head>
<body>
<p>Пример нормального шрифта.</p>
<p>Пример курсива.</p>
<p>Пример наклонного шрифта.</p>
</body>
</html>

Видно что курсив от наклонного шрифта внешне не отличается.

Следующее свойство:

Свойство font-variant
Свойство Значение Описание Пример
font-variant normal
small-caps
Устанавливает капитель (особые прописные буквы) P {font-variant: small-caps}

Капитель — так в типографике называется текст, в котором строчные знаки выглядят, как уменьшенные прописные. Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-variant</title>
</head>
<body>
	<p>Обычный текст.
	<span>Текст капителью</span>.</p>
	<p>Опять обычный текст.</p>
</body>
</html>

Следующее свойство:

Свойство font-weight
Свойство Значение Описание Пример
font-weight normal
lighter
bold
bolder
100–900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный
P {font-weight: bolder}

Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold — полужирное начертание, normal — нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, — значению 700.

Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-weight</title>
</head>
<body>
	<p>Обычный текст. <span>Текст bold</span>.</p>
	<p>Опять обычный текст.</p>
</body>
</html>

Следующее свойство:

Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.

Свойство font-size
Свойство Значение Описание Пример
font-size normal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 11pt
font-size: 11px
font-size: 110%

Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.

Для изменения размера текста относительно родителя используется другой набор констант (larger — увеличивает размер относительно родительского, smaller — уменьшает размер).

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-size.</title>
</head>
<body>
	<p>Обычный текст.</p>
	<p>Текст xx-small.
	<span>Текст larger</span>.</p>
	<p>Текст small.</p>
	<p>Текст medium.</p>
	<p>Текст large.</p>
	<p>Текст x-large.</p>
	<p>Текст xx-large.</p>
	<p>Опять обычный текст.</p>
	<p>Текст 150%.</p>
	<p>Текст 15px.
	<span>Текст larger</span>.</p>
</body>
</html>

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

Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.

Рассмотрим первое свойство:

Свойство line-height
Свойство Значение Описание Пример
line-height normal
множитель
значение
%
Межстрочный интервал (интерлиньяж) line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%

При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.

<!DOCTYPE html>
<html>
<head>
	<title>Работа с межстрочным интервалом</title>
</head>
<body>
	<p>Обычный текст. Первая строка.
	<br>Вторая строка.
	<br>Третья строка.</p>
	<p>Изменённый текст. Первая строка.
	<br>Вторая строка.
	<br>Третья строка.</p>
</body>
</html>

При процентной записи за 100% берется высота шрифта.

Следующее свойство:

Свойство text-decoration
Свойство Значение Описание Пример
text-decoration none
underline
overline
line-through
blink
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
text-decoration: line-through

При помощи определения { text-decoration: none } можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

<!DOCTYPE html>
<html>
<head>
	<title>Работа с свойством text-decoration.</title>
	<style>
		a { text-decoration: none }
	</style>
</head>
<body>
	<p>Поисковик <a href="http://google.com">Google</a>.</p>
</body>
</html>

В примере ссылка не имеет линии подчёркивания.

Следующее свойство:

Свойство text-transform — управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения.

Свойство text-transform
Свойство Значение Описание Пример
text-transform none
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: uppercase

Пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Работа с свойством text-transform.</title>
</head>
<body>
	<p>Текст none.</p>
	<p>Текст capitalize.</p>
	<p>Текст uppercase.</p>
	<p>Текст lowercase.</p>
</body>
</html>

Сравните текст который содержится в html-коде с текстом в окне браузера.

Следующее свойство:

Свойство text-align — служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

Свойство text-align
Свойство Значение Описание Пример
text-align left
right
center
justify
Выравнивание текста text-align: right

Подробное описание значений:

  • center — текст выравнивается по центру.
  • justify — выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
  • left — выравнивание по левопу краю. Это значение используется по умолчанию.
  • right — выравнивание по правому краю.

Пример использования этого свойства будет совмещён с примером работы следующего свойства.

Следующее свойство:

Свойство text-indent — служит для создания величины отступа первой строки блока текста (например, для абзаца <p>).

Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

Свойство text-indent
Свойство Значение Описание Пример
text-indent значение
%
Отступ первой строки text-indent: 15px;
text-indent: 10%
<!DOCTYPE html>
<html>
<head>
	<title>Работа со свойствами text-align и text-indent.</title>
	<style>
		p { text-indent: 15px }
	</style>
</head>
<body>
<p>Работа со свойствами text-align и text-indent.
Для лучшего понимания работы кода откройте страницу
в новом окне и уменьшите его размер.</p>
</body>
</html>

komotoz.ru

Оформление текста text-decoration средствами CSS .

Продолжаем работу с текстом. Давайте рассмотрим еще одно свойство — text-decoration: ;. Для чего оно нужно? Бывают моменты, когда нужно сделать текст подчеркнутым или сделать линию над текстом или вовсе его зачеркнуть. Так вот, используя данное свойство, и меняя только его значения можно удовлетворить все выше заявленные требования.

  • text-decoration: underline ;— Устанавливает подчеркнутый текст
  • text-decoration: overline ; — Линия проходит над текстом
  • text-decoration: line-through ; — Создает перечеркнутый текст
  • text-decoration: none ; — Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию

Свойство text-decoration: ; очень часто используется при работе с ссылками. Так у браузера есть свой встроенный стиль, который изначально выделяет все ссылки подчёркиванием. Очень много сайтов страниц, где по дизайну идут ссылки без подчеркивания и нам нужно удалять такие подчеркивания. И делается это как раз с помощью свойства text-decoration: ;

Но давайте все по порядку и для начала научимся подчеркивать текст.

Подчеркнуть текст CSS

Возьмем пример из прошлого урока, и в четвертом и пятом абзаце подчеркнем жирную область. Там уже использовался класс, когда задавалось свойство жирного и курсивного шрифта, а теперь к нему еще и добавим свойство для подчеркивания. Для подчеркивания используется значение underline

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

</body> </html>

И для класса .bold зададим еще одно свойство подчеркивания.

CSS

.bold{
    font-weight: bold;
    text-decoration: underline;
}

Теперь жирный текст стал еще и подчеркнутым.

Надчеркутый текст CSS

Теперь давайте расположим линию над текстом для этого в свойстве text-decoration: ; меняем значение на overline и линия появятся над текстом.

CSS

.bold{
    font-weight: bold;
    text-decoration: overline;
}

Зачеркнутый текст CSS

Для того чтобы перечеркнуть текст то вновь нужно изменить значение в свойстве text-decoration: ; на line-through после чего у нас появится перечеркнутый текст.

CSS

.bold{
    font-weight: bold;
    text-decoration: line-through;
}

Такое свойство также частенько используется, когда нужно отобразить какое-то отрицание

Удаление лини подчеркивания

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

CSS

a{
    text-decoration: none;
}

Теперь создано общее правило для всех ссылок, которые теперь все будут отображается без подчеркивающей линии.

В Демо можно просмотреть пример работы данного свойства с каждым из значений в отдельности. На этом с оформлением текста все, а мы движемся дальше.


webteoretik.ru

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


С помощью CSS можно задать тексту множество свойств. В этом уроке мы рассмотрим основные из них.

Для примера создадим два файла Index.html и style.css

Index.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset= «utf-8»>
          <link rel= «stylesheet» type= «text/css» href= «style.css» />
          <title>Текст CSS</title>
     </head>
     <body>
          <h2>Заголовок</h2>
          <p>Этот текст мы сделали специально длинным, чтобы получилось несколько строк.
Так проще и наглядней будет понять работу языка CSS. Для примера <span>этот текст мы сделали зачёркнутым</span>.
          </p>
     </body>
</html>

Файл style.css пока пуст.

Итак, поехали…

Шрифт текста.

Чтобы задать тексту определённый шрифт, используем свойство font-family.

* {
font-family: verdana;
}

В этом примере для всех элементов HTML – документа используется только шрифт Verdana.

Размер шрифта.

За размер шрифта отвечает свойство font-size, значением которого будет число в пикселях.

* {
font-family: verdana;
}
h2 {
font-size: 30px;
}
p {
font-size: 18px;
}

Для заголовка размер шрифта составляет 30px, для абзаца 18px.

Цвет текста.

Цвет текста определяется свойством color. Значением цвета будет  шестнадцатиричный  RGB код с символом решётки (#) впереди. Найти код цвета можно либо в Photoshop, либо в программе ColorMania, либо в поисковике по запросу «HTML палитра цветов”.

* {
font-family: verdana;
}
h2 {
font-size: 30px;
color: #ff0c00;
}
p {
font-size: 18px;
color: #092a60;
}

Выравнивание текста.

Выровнять текст можно с помощью свойства text-align. Это свойство может иметь несколько значений:

Center – текст по центру

Left – текст слева

Right – текст справа

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

* {
font-family: verdana;
}
h2 {
font-size: 30px;
color: #ff0c00;
text-align: center;
}
p {
font-size: 18px;
color: #092a60;
text-align: left;
}

Начертание шрифта.

За начертание шрифта отвечает свойство font-style со следующими значениями:

Normal – нормальное начертание

Italic — курсив

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

За насыщенность шрифта отвечает свойство font-weight. Значения могут устанавливаться числами от 100 до 900, чем больше число, тем жирнее шрифт. Также значения могут устанавливаться с помощью ключевых слов:

Normal – нормальное начертание.

Bold – полужирное начертание.

* {
font-family: verdana;
}
h2 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
}
p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
}

Декорирование текста.

Декорировать текст позволяет свойство text-decoration. Значения этого свойство бывают следующими:

underline – подчёркнутыйтекст

overline – надчёркнутый текст

line-through – перечёркнутый текст

blink – мигающий текст

none – обычный текст без оформления (убирает подчёркивание у ссылок)

* {
font-family: verdana;
}
h2 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
}
p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
}
span {
text-decoration: line-through ;
}

Отступ первой строки.

Отступ первой строки задаётся свойством text-indent. Значением  является расстояние от левого края, указывается в пикселях.

p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
}

Расстояние между строками текста.

Задаётся свойством line-height.

Значения этого свойства могут задаваться в процентах, множителях и пикселях. В этом примере значение задано в множителе.

p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
line-height: 1.5;
}

Расстояние между символами.

Определяется свойством letter-spacing. Значение задаётся в пикселях.

h2 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
letter-spacing: 5px;
}

Расстояние между словами.

Определяется свойством word-spacing. Значение также задаётся в пикселях.

p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
line-height: 1.5;
word-spacing: 10px;
}

Добавляем тень к тексту.

Тень добавляется с помощью свойства text-shadow. В качестве значений будут числа, которые определяют следующие свойства :

Значение 1 – смещение тени по горизонтали

Значение 2 – смещение тени по вертикали

Значение 3 – радиус размытия

Значение 4 – цвет тени.

h2 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
letter-spacing: 5px;
text-shadow: 2px 2px 2px #3a0d04;
}

www.fly-webmaster.ru