Форматирование кода. Преобразование и оформление текста. Форматирование кавычек quotes
Текст данной статьи сфокусирован на различных путях форматирования 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. Но в общем счете, я считаю такие документы менее читаемыми, потому что появляется этот надоедливый вертикальный скроллинг, и вам приходится носиться от одного куска кода к другому. В то время как форматирование в одну строку иногда даже намного удобнее за счет того, что большая часть кода у вас на виду.
Лучший вариант форматирования для себя самого принято считать тот, который представляет большую читаемость и меньший скроллинг. А вообще, смотрите на собственные ощущения комфорта.
Преобразование и оформление текста
1. Трансформирование текста text-transform
С помощью данного свойства можно преобразовать текст в верхний и нижний регистры, или превратить первые буквы каждого слова, которые были заглавными (прописными) в строчные. Наследуется.
Синтаксис
H2 {text-transform: none;}
h2 {text-transform: capitalize;}
h2 {text-transform: uppercase;}
h2 {text-transform: lowercase;}
Рис. 1. Преобразование текста с помощью свойства text-transform
2. Направление написания текста direction
Свойство задаёт направление написания текста, направление размещения столбца таблицы, направление, в котором блок заполняет содержимое по горизонтали и положение последней строки выровненного по ширине элемента. Рекомендуется использовать вместе со свойством unicode-bidi . Наследуется.
Синтаксис
P {direction: ltr;} p {direction: rtl;}
3. Направление написания слов в тексте unicode-bidi
Свойство используется вместе со свойством direction для поддержки написания слов в двунаправленном тексте. Не наследуется.
Синтаксис
P {unicode-bidi: normal;} p {unicode-bidi: embed;} p {unicode-bidi: bidi-override;}
4. Декорирование текста text-decoration
Свойство декорирует текст. Также убирает подчёркивание ссылок. Не наследуется.
Синтаксис
A {text-decoration: none;} span {text-decoration: underline;} span {text-decoration: overline;} span {text-decoration: line-through;} Рис. 2. Оформление текста с помощью свойства text-decoration
5. Форматирование первой буквы и первой строки абзаца
CSS даёт возможность форматирование абзаца с использованием псевдоэлементов:first-letter и:first-line . Например, можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца. В качестве фона для:first-letter также можно устанавливать градиентую заливку.
/*первый абзац*/ p:first-letter { font-size: 2em; margin-right: 2px; color: #EE9966; font-weight: bold; text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99; } p:first-line { color: #EE9966; } /*второй абзац*/ p:first-letter { font-size: 1.2em; padding: 5px 10px; margin-right: 5px; background: #EE9966; color: #FAF4F4; float: left; border-radius: 50% 0; font-weight: bold; } /*третий абзац*/ p:first-letter { font-size: 1.2em; padding: 5px 10px; margin-right: 5px; margin-bottom: 2px; background: #EE9966; color: #FAF4F4; float: left; font-weight: bold; } /*четвертый абзац*/ p:first-letter { font-size: 1.2em; padding: 3px 10px; margin-right: 5px; background: #EE9966; color: #FAF4F4; float: left; font-weight: bold; border-radius: 50%; } /*пятый абзац*/ p:first-letter{ font-size: 1.5em; padding: 2px 10px; margin-right: 5px; background: #FAF4F4; border: 6px double; color: #EE9966; float: left; font-weight: bold; } /*шестой абзац*/ p:first-letter{ font-size: 1..png); border: 2px solid #EE9966; color: #544E3E; float: left; font-weight: bold; box-shadow: 1px 1px 1px #9E9D99; }
6. Форматирование кавычек quotes
Свойство задаёт тип кавычек, используемых в документе для вложенных цитат. По умолчанию кавычками оформляется текст, заключенный в тег . Также кавычки можно сгенерировать помощью свойства content , задав ему значения open-quote и close-quote . В качестве значения используется специальный символ HTML или символ Юникода. Наследуется.
Синтаксис
P {quotes:"«" "»";} p {quotes: none;}
| Описание | Внешний вид | Номер в Юникоде | HTML-код/Мнемоника |
|---|---|---|---|
| Двойная кавычка | " | \0022 | " |
| Апостроф | " | \0027 | " |
| Открывающая одинарная кавычка | ‘ | \2018 | ‘ |
| Закрывающая одинарная кавычка | ’ | \2019 | ’ |
| Закрывающая двойная кавычка | “ | \201C | “ |
| Правая двойная кавычка | ” | \201D | ” |
| Двойная нижняя кавычка | ⹂ | \2E42 | ⹂ |
| Открывающая левая кавычка «ёлочка» | « | \00AB | « |
| Закрывающая правая кавычка «ёлочка» | » | \00BB | » |
| Нижняя одинарная открывающая кавычка | ‚ | \201A | ‚ |
| Верхняя одинарная обратная кавычка | ‛ | \201B | ‛ |
| Нижняя двойная открывающая кавычка | „ | \201E | „ |
| Двойная верхняя обратная кавычка | ‟ | \201F | ‟ |
| Одинарная открывающая (левая) французская угловая кавычка | ‹ | \2039 | ‹ |
| Одинарная закрывающая (правая) французская угловая кавычка | › | \203A | › |
Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел.
Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.
1. Styleneat
Вероятно, самый простой сервис из представленных в обзоре.Возможностей у инструмента не так много:
- Сортировка свойств по алфавиту
- Сортировка селекторов по алфавиту (если стоит галочка “Safe Organize” (безопасное форматирование) - этот параметр не доступен)
- Возможность выбрать стиль форматирования: многострочное или в одну строку
- Умеет вытягивать CSS-файлы, подключенные с помощью , в основной файл и безжалостно их обрабатывать
- Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
- Результат можно забрать в виде CSS-кода или загрузить файл
2. FormatCSS
Не смотря на свой грозный вид, инструмент прекрасно справляется со своими функциями, коих у него предостаточно.
Настроить можно многое:
- расстановку пробелов/табов/новых строк,
- сортировку свойств и имён селекторов,
- преобразование имён свойств и селекторов в нижний регистр и т.п.
3. CleanCSS
Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей:
- Скормить CSS можно копипастом в поле “CSS-Code” или в виде ссылки на файл стиля
- Получить результат можно в виде текста или в файл
- На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле “Custom temlate”
- Умеет объединять правила, приводить запись свойств к короткому виду
- Если необходимо - удалит комментарии и невалидные определения
- Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр
UPD> В комментариях подсказали ссылку на близнеца это сервиса: CodeBeautifier . Набор функций практически идентичен CleanCSS (сервис тоже работает на CSSTidy).
4. ProCSSor
На мой искушенный взгляд - самое удобное из всего представленного в данном обзоре.
Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками.
Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла.
Настроек у инструмента вполне достаточно, чтобы угодить практически любому пользователю, перечислять их не имеет особого смысла - лучше сразу попробовать.
Приятной фичей сервиса является возможность сохранить свои настройки , чтобы в следующий раз можно было пропустить этап настроек и сразу перейти к процессу облагораживания.
Ещё одна достопримечательность - ProCSSor предоставляет API , с документацией можно ознакомиться здесь:
