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

Оформление текста 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; }

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

Тень текста

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

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; }

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

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

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

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

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

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

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

#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 позволяет сделать текст зачёркнутым (

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

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

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

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

Расстояние между словами можно изменить с помощью свойства word-spacing. Межсимвольное расстояние задаётся свойством

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

Указав свойство 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

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

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

Обозначения

Значения

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.

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

<!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>

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

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

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

<!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>

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

<!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>

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

<!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>

<!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{
    font-weight: bold;
    text-decoration: underline;
}

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

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

a{
    text-decoration: none;
}