Главная › Настройки › Форматирование текста в CSS. Различные пути форматирования CSS

Форматирование текста в CSS. Различные пути форматирования CSS

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

В ходе верстки сайта Вам придется постоянно изменять внешний вид веб-страниц. Одной из первых задач при работе с текстом на странице является необходимость его выровнять.

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

Давайте рассмотрим пример работы с выравниванием текста:

Пример использования свойства text-align

Съешь же ещё этих мягких французских булок да выпей чаю.

четыре ) класса, которые определяют различные варианты выравнивания текста. Для всех элементов

мы установили цвет заднего фона rgba(0, 255, 0, .1) .

Результат нашего примера:

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

Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).

Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent .

Вы можете применить те относительные единицы измерения, которые вы используете в своем документе, будь то пиксели, либо значения, которые зависят от базового размера шрифта (например, такие как em ).

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

Давайте рассмотрим пример использования этого свойства:

Пример использования свойства text-indent

Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.

В данном примере мы создали 4 (четыре ) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (0 ), для второго задали отступ 40 пикселей , для третьего указали отрицательный отступ (-20px ), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50% .

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

Результат нашего примера:

Рис. 61 Пример использование свойства text-indent (красная строка).

Установка междустрочного интервала

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

В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.

Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье.

Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 % .

Расчёт междустрочного интервала происходит следующим образом:

Высота строки (line-height ) минус высота шрифта (font-size )

Например, размер шрифта составляет 20 пикселей , а высота строки 150% (30 пикселей ). Таким образом, получается:

Высота строки (150% или 30px ) минус высота шрифта (20px ) = 10px

Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:

cелектор { line-height : 1.5 ; }

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

Числовое значение * размер шрифта

Например, шрифт для абзаца установлен 2em , а высота строки задана как 1.5 :

p { font-size : 2em ; line-height : 1.5 ; }

Расчетное значение междустрочного интервала в нашем случае составит 3em :

Числовое значение(1.5 ) * размер шрифта(2em ) = 3em

В большинстве случаев множитель использовать очень удобно, так как элементы наследуют значения междустрочного интервала родительского элемента. line-height :

Пример использование свойства line-height

Параграф в котором line-height: 10px

Параграф в котором line-height: normal

Параграф в котором line-height: 150%

Параграф в котором line-height: 2

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

Результат нашего примера:

Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).

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

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

Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing . При работе со свойством используйте относительные единицы измерения CSS (em , rem , px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.

Давайте рассмотрим пример использования свойства letter-spacing :

Пример использования свойства letter-spacing

class = "test" > letter-spacing: -1px

letter-spacing: normal

letter-spacing: 2px

letter-spacing: 1em

В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.

Результат нашего примера:

Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS - word-spacing . По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em , rem , px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.

Давайте рассмотрим пример использования свойства word-spacing :

Пример использования свойства word-spacing

В данном примере мы рассмотрели способы указания интервала между словами в тексте в пикселях (отрицательное значение) и единицах измерения em.

Результат нашего примера:

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

CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:

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

Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none :

a { /* селектором типа выбираем все гиперссылки */ text-decoration : none ; /* убираем декорирование текста */ }

В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок. Полный перечень ключевых слов свойства text-decoration указан в данной таблице:

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

Допускается использовать несколько значений в одном объявлении:

text-decoration : underline line-through ; /* определяет линию под текстом и линию, проходящую через текст */

Давайте рассмотрим пример использования свойства text-decoration в тексте:

Пример использования свойства text-decoration

Text-decoration: underline;

Text-decoration: overline;

Text-decoration: line-through;

Text-decoration: underline overline;

В данном примере мы создали четыре различных стиля и применили их поочередно к каждому абзацу. В первом абзаце добавили декорирование текста - линия снизу (значение underline ), во втором декорирование текста - линия сверху (значение overline ), в третьем декорирование текста - перечеркивание (line-through ), а в четвертом двойное декорирование текста - линия сверху и снизу (значения underline overline ).

Результат нашего примера:

Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).

Верхний и нижний регистр

CSS предоставляет возможность осуществить преобразование любого текста в верхний или нижний регистр, а также преобразовать первые буквы каждого слова в верхний регистр. Управляет регистром текста свойство text-transform , ниже в таблице приведены все его значения:

Давайте рассмотрим пример использования свойства text-transform в тексте:

Пример использования свойства text-transform

В данном примере мы создали три различных стиля и применили их поочередно к каждому абзацу. В первом абзаце первые символы каждого слова были преобразованы в верхний регистр (значение capitalize ), во втором все символы в верхний регистр (значение uppercase ), а в третьем в нижний регистр (значение lowercase ).

Рис. 66 Пример использования свойства text-transform (изменения регистра текста).

Капитель в CSS

Малые заглавные, или капитель (англ. small caps ) - начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы. Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:

cелектор { font-variant : small-caps ; /* задаем капитель шрифта */ }

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

Пример использования свойства font-variant

Параграф отображается обычным шрифтом.

Строчные буквы устанавливаются как прописные уменьшенного размера.

В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps , благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).

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

Форматирование не имеет ничего общего с функциями CSS. Это лишь придание эстетически привлекательного вида коду. Правда, это не значит, что форматирование вовсе не важно. Это все равно что сказать, что художнику нет разницы на каком полотне рисовать. Это влияет на удобство во время написания кода CSS, на легкость при просмотре кода, при его дальнейшем редактировании.

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

Div { width: 50px }
Это то же самое, что и:

Div{width:50px}
Как и:

}
Многострочное форматирование

Navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}

color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}
Держу пари, что такой вариант наиболее часто применимый. Его очень легко читать, потому что он предоставляется короткими отрывками, именно поэтому обучаемые статьи чаще всего отформатированы именно таким методом. В примере, предоставленном выше, нет пустой строки между закрытием скобки и следующим отрывком, и это на самом деле используется чаще всего.

Многострочное форматирование с расстановкой абзацев

Navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}
Выделенный блок означает, что данный отрывок является каким-то определенным и важным, нежели предыдущие отрывки, и также отображает дочерние элементы.

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

Div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }
Это, наверное, наиболее экономичный вариант, потому как весь код сжат в один сплошной текст, без каких-либо пробелов и переносов на новые строки. Правда, такой метод потребует постоянного скроллинга, как вертикального, так и горизонтального, если вам захочется отредактировать код. К тому же, такой метод выглядит достаточно безобразно, и в случае, когда в дальнейшем потребуется отредактировать код, вам вероятно будет крайне сложно отыскать нужный отрывок.

Форматирование в одну строку с табуляцией

p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }
Форматирование в одну строку с расстановкой абзацев

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

Обычное форматирование в одну строку

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

H1, h2, h3 { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h2 a, h2 a:visited { color: #2e2e2e; }
h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: left; }
Вариации

Форматирование в одну строку может быть выполнено посредством простого открытия последующей скобки на той же строке, что также часто наблюдается в коде PHP:

Div
{
padding: 10px;
}
В многострочном форматировании с табуляцией можно наблюдать открывающуюся скобку в роли разделителя:

#content-area ol { margin: 15px 0 0 25px; list-style: decimal; }
#content-area ol ol { list-style: lower-alpha; }
#content-area ul { margin: 0 0 0 5px; list-style: none; }
#content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
#content-area ul ul { margin: 15px 0 0 25px; list-style: disc; }
#content-area ul ul li { background: none; padding: 0; }
Комбинирование

Комбинирование многострочного и однострочного форматирования может привести только к группированию схожих атрибутов в одной строке:

Navigation_rss_icon {
position: absolute;
top: 10px; left: 10px; bottom: 10px; right: 10px;
font-size: 12px; font-weight: bold;
}
Читаемость vs. Скроллинга

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

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

Лучший вариант форматирования для себя самого принято считать тот, который представляет большую читаемость и меньший скроллинг. А вообще, смотрите на собственные ощущения комфорта.

Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел.
Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.

1. Styleneat

Вероятно, самый простой сервис из представленных в обзоре.
Возможностей у инструмента не так много:

Сортировка свойств по алфавиту
Сортировка селекторов по алфавиту (если стоит галочка “Safe Organize” (безопасное форматирование) - этот параметр не доступен)
Возможность выбрать стиль форматирования: многострочное или в одну строку
Умеет вытягивать CSS-файлы, подключенные с помощью , в основной файл и безжалостно их обрабатывать
Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
Результат можно забрать в виде CSS-кода или загрузить файл

2. FormatCSS

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

расстановку пробелов/табов/новых строк,
сортировку свойств и имён селекторов,
преобразование имён свойств и селекторов в нижний регистр и т.п.

Чем мне особо приглянулся данный сервис: умением форматировать “лесенкой” субправила (я считаю это очень удобным способом организации стилей).

3. CleanCSS

Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей:

Скормить CSS можно копипастом в поле “CSS-Code” или в виде ссылки на файл стиля
Получить результат можно в виде текста или в файл
На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле “Custom temlate”
Умеет объединять правила, приводить запись свойств к короткому виду
Если необходимо - удалит комментарии и невалидные определения
Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр

Кстати, в основе данного сервиса обнаруживается движок “ ” - опенсурсный CSS-парсер/оптимизатор. Так что, все желающие свободно могут изобразить на его базе свой собственный бьютифер, с блэкджеком и переключателями.
UPD> В комментариях подсказали ссылку на близнеца это сервиса: CodeBeautifier . Набор функций практически идентичен CleanCSS (сервис тоже работает на CSSTidy).

4. ProCSSor

На мой искушенный взгляд - самое удобное из всего представленного в данном обзоре.
Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками.
Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла.
Настроек у инструмента вполне достаточно, чтобы угодить практически любому пользователю, перечислять их не имеет особого смысла - лучше сразу попробовать.
Приятной фичей сервиса является возможность сохранить свои настройки , чтобы в следующий раз можно было пропустить этап настроек и сразу перейти к процессу облагораживания.
Ещё одна достопримечательность - ProCSSor предоставляет API , с документацией можно ознакомиться здесь:

Порой наш код не всегда бывает идеален. А так хочется, чтобы он был не только рабочий, но и красиво оформлен и отформатирован. Время - это наш главный враг, оно редко позволяет следить нам за правилами оформления кода. Мы стараемся побыстрее закончить верстку, или описать десяток css-стилей, и делаем это в ущерб читабельности. В этой статье я приведу список сервисов, которые помогут вам отформатировать ваш код так, чтобы на него было приятно смотреть.

Довериться программе или делать все ручками?

Наверняка у вас возникал вопрос: как сделать код читабельным? Может ли программа грамотно расставить все отступы и переносы строк так, чтобы человеческий глаз получал он вида кода лишь эстетическое удовольствие? Конечно, может! Не стоит заблуждаться, что, раз работу за вас делает, по сути, робот, то сделана она будет "грязно". Сервисы, которые будут представлены в статье ниже, не раз спасали меня. Например, в ситуациях, когда необходимо было скопировать тот же html код с другого сайта, а теги при вставке оказывались просто в каком-то хаотическом порядке расставлены по строкам: куча табуляций, не логические переносы строк, абсолютно не видно никакой вложенности! Наверное, многим такое знакомо. И очень хочется, чтобы на своем сайте у вас было по-другому: аккуратно и хорошо читаемо. Ведь, в первую очередь, мы делаем это для себя, для удобства дальнейшей поддержки того или иного кода.

Давайте же отформатируем ваш код

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

Вот список всех известных мне "пурификаторов" кода для различных языков.