При создании сайтов, к верстке часто относятся довольно поверхностно. Считается, что она почти никак не влияет на его работу. Здесь я расскажу о целевом использовании CSS-кодинга в русле довольно значимых задач сайта.
CSS-кодинг позволяет
- Ускорение работы сайта
- Улучшение юзабилити и повышение лояльности потребителей (аудитории):
- Гибкость и динамичность веб-дизайна
- Структурирование и облегчение восприятия информационных блоков
- Кликабельность
- Поисковая оптимизация
Относительно последнего пункта, следует отметить, что с недавних пор поисковики стали в большей мере ориентироваться на «возвраты посетителей» и общее поведение пользователей на сайте. Понятно, что такие факторы , как улучшение юзабилити (удобство пользования) и повышение лояльности аудитории, наравне с другими принципами SEO, прямо воздействует на ранжирование сайта в поисковиках.
Для справки (о CSS). CSS — каскадная таблица стилей. Служит для верстки и стилевого оформления web-документа. Подгружается в т.н. «невидимую часть» страницы ( тег <HEAD>). Производит обработку компонентов страницы, визуально преображая их с заданными стилями (цвет, позиция и пр.).
Данный материал предназначен в качестве шпаргалки для веб-дизайнеров / верстальщиков. В статье представлена личная подборка CSS-фрагментов (сниппетов), наиболее часто употребляемых автором на практике. Материал содержит советы по адаптации верстки к задачам поисковой оптимизации.
Создание сайтов и верстка: блочная или табличная?
Предположим, мы имеем следующий макет дизайн: «Шапка» (HEADER), «Левая колонка» (LEFTCOLUMN), «Содержание страницы» (CONTENT) и «Подвал» (FOOTER).
ШАПКА (HEADER) → | ||
|
||
Подвал (FOOTER) |
Поисковые системы обычно читают сайты сверху вниз по коду. При этом,, что то, что находится сверху — больше значимо. Посмотрим код такой страницы, сверстанной с использованием таблиц:
<html> <head> </head> <body> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td style="background: #daa2cc;" width="100%"> ШАПКА (HEADER) </td> </tr> <tr> <td width="100%"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="background: #fffbc8;" width="20%"> Левая колонка (LEFTCOLUMN) </td> <td width="80%"> Содержание страницы (CONTENT) </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="background: #e5e5e5;" width="100%"> Подвал (FOOTER) </td> </tr> </table> </body> </html>
В случае, если мы используем табличную верстку, мы никак не можем изменить иерархию и перетасовать элементы: первой пойдет Шапка, потом Левая колонка, потом Контент страницы и далее Подвал. Однако, при использовании блочной верски, а уж тем более, с применением слоев, мы можем как угодно расставлять свой контент «по полочкам».
Посмотрим направляющие чтения для поисковиков в блоковой версии:
Посмотрим на код блоковой верстки:
<div style="width: 680px; border: 1px solid #e5e5e5;"> <div style="width: 660px; background: #daa2cc; padding: 10px;"> ШАПКА (HEADER) </div> <div style="width: 520px; float: right; padding: 10px;"> Содержание страницы (CONTENT) </div> <div style="width: 120px; background: #fffbc8; padding: 10px;"> Левая колонка (LEFTCOLUMN) </div> <div style="width: 660px; background: #e5e5e5; padding: 10px;"> Подвал (FOOTER) </div> </div>
Как видно, сначала в коде отобразится Шапка, потом Содержание, а уж затем пойдут Левая колонка и Подвал.
Вопрос иерархии лучше решать именно в стадии создания сайта. Лучше, в самом начале создания сайта, т.к. с этих пор вы будете учитывать порядок для поисковиков и сможете лучшим образом оптимизировать сайт в дальнейшем.
1. Центрировать сайт по горизонтали
Я использую центрирование сайта в большинстве случаев. Сайт хорошо просматривается на мобильных телефонах и других устройствах. Код для центрирования основного блока по горизонтали:
body{ text-align:center; } #bgcontain { width: 980px; margin: 0px auto; padding:0px; }
2. Фиксированный бэкграунд (фон)
Фиксированный бэкграунд (фон) довольно стильно смотрится. При прокрутке движется только содержание, а фоновое изображение остается стабильно на месте. «Закрепить» background можно всего одной строчкой (ключевое слово fixed). Картинка может быть как множащаяся (repeat), так и — нет (no-repeat).
body{ backgroud:#fff url(../images/bg_main.png) fixed repeat; }
m
3. Абсолютное позиционирование и слои на странице (z-index)
Практически любая концепция веб-дизайна исполнима и поддаётся вёрстке. Причём, без использования тяжеловесных флеш (Flash). Абсолютное позиционирование является одним из тех методов, которые позволяют осуществлять гибкий вед-дизайн и самые сложные задачи. Кроме того, абсолютное позиционирование иногда актуально для управления иерархией для поисковиков (как известно, всё, что выше в коде страницы, они воспринимают как более главное)
Абсолютное позиционирование задаётся свойством «position: absolute«. Также, указывается положение относительно левого и верхнего края (или, правого и верхнего), т. е. координаты X, Y: «left» («right»), «top» («bottom»). Ось Z является сквозной, образуя стеки (слои) z-index. Чем больше номер z-index, тем он ближе при просмотре.
CSS сниппет:
.div1{ position:absolute; /* абсолютное позиционирование */ top:0px; /* примыкает к верхней границе */ left:0px; /* примыкает к левой границе */ z-index:1; /* стек 1 */ } .div2{ position:absolute; /* абсолютное позиционирование */ top:100px; /* положение от верха 100 пикселей */ left:150px; /* от левого края 150 пикселей */ z-index:2; /* стек 2 */ }
Если нужно использовать абсолютное позиционирование, зависимое от другого элемента, включите в блок с относительным (стабильным) позиционированием.
<div class="relativelythis"> <div class="div1">...</div> <div class="div2">...</div> </div>
CCS:
.relativelythis{ position:relative; } .div1{ position:absolute; /* абсолютное позиционирование */ top:0px; /* примыкает к верхней границе */ left:0px; /* примыкает к левой границе */ z-index:1; /* стек 1 */ } .div2{ position:absolute; /* абсолютное позиционирование */ top:100px; /* положение от верха 100 пикселей */ left:150px; /* от левого края 150 пикселей */ z-index:2; /* стек 2 */ }
Использование z-index на примере.
При разработке сайта WESTSKATE.RU была поставлена задача уместить контент главной страницы до «линии сгиба» (т.е. в один экран, без прокрутки). Конфликт концепции состоял в том, что при разных разрешениях (а также, размерах окна обозревателя), центральная часть должна уходить за пределы верхней и нижней панели, а не перемешиваться. В таком дизайне особенно актуальны стеки (слои) z-индексов.
4. Управление прозрачностью элемента страницы
Прозрачность — одно из тех стильных решений, без которого не обходится почти не один современный веб-дизайн.
Прозрачность, — а точнее, непрозрачность — элемента задаётся в процентном отношении (для фильтров Internet Explorer, IE) и в дробном (для других браузеров): от 0% (0) до 100% (1.0). Чем ниже цифра, тем более прозрачен элемент. 90% (0.9) будет значить едва просвечивающийся. 10% (0.1) — еле видимый. Ниже приведён пример указания непрозрачности 80% (0.8) для блока с классом «prozr80div». Не забываем про кроссбраузерность.
.prozr80div{ filter: alpha(opacity=80); /* IE 5.5+ */ -moz-opacity: 0.8; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.8; /* Konqueror 3.1+, Safari 1.1 */ opacity: 0.8; }
Элементы с частичной прозрачностью в веб-дизайне актуальны при использовании слоёв.
5. CCS-Хак. Два изображения в качестве бэкграунда
При создании сайтов, особенно, с обилием графики, важно по максимуму оптимизировать по весу изображения (НО — без потери качества). Иногда бывает, что лучше использовать 2 изображения в качестве бэкграунда. Так, при разработке сайта CCK-SHIP.RU, мне потребовалось использовать градиент (цветовой перелив) для подложки и фон-изображение (полупрозрачный стиль) . Это позволило достичь не только изначально требуемого визуального эффекта, но и значительно сократить вес картинок (2 шт.). Сама подложка получилась на тонкую полосу, размножающуюся по горизонтали. При установке opacity, обычный 8-разрядный PNG играет подобно 24-разрядному, а вес файла значительно ниже (он немалых габаритов, адаптированный для крупноформатных мониторов). Кроме того, обеспечена кроссбраузерность: 24-разрядный PNG отображается некорректно в IE 6 (а конкретно, белёсо-голубой «налёт» заместо прозрачности).
Итого, что мы получаем:
- Выигрыш в размере файлов изображений
- Кроссбраузерность
- Без потери визуального эффекта
Сам css-сниппет (иерархия сохранена):
html,body { margin:0; padding:0; } #page_bg { padding: 0px; margin: 0px; background:#1a5287 url(../images/mainbg.jpg) top left repeat-x; text-align:center; position:relative; /* позиция стабильная */ } #podbody1{ background:transparent url(../images/pngbody8.png) center -156px no-repeat; position:absolute; /* абсолютное позиционирование относительно стабильного блока */ z-index:1; /* на z-оси на слое 1 */ top:0; /* сверху 0... */ left:0; /* слева 0... */ width:100%; height:100%; max-height:1600px; filter: alpha(opacity=10); /* прозрачность для IE 5.5+ */ -moz-opacity: 0.1; /* прозрачность для Mozilla 1.6 и ниже */ -khtml-opacity: 0.1; /* прозрачность для Konqueror 3.1+, Safari 1.1 */ opacity: 0.1; } #body1{ position:relative; /* стабильная позиция */ z-index:2; /* на z-оси на слое 2 */ width:980px; padding: 0px; margin:4px auto; /* централизация */ }
Другой вариант кроссбраузерного использования в бэкграунде двух изображений:
.multibg { /* блок с классом "multibg" */ background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat; background: transparent url(images/bg-image-1.gif) top left repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */ -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* только IE8 */ }
6. CCS-Хак. Фиксированный бэкграунд с движущейся «надслойкой»
Интересно, что описанный выше метод наложения двух бэкграундов (через подложку и слой) срабатывает для ещё одного эффекта. Например, если нужно исполнить фиксированный бэкграунд , но таким образом, чтобы под ним находился ещё один фон, не статичный — движущийся при прокрутке (скажем, с полупрозрачностью, или просто прозрачными областями). Для этого, вместо фона #page_bg пропишем фон самого body с указанием фиксированности fixed:
html,body { margin:0; padding:0; background:#1a5287 url(../images/mainbg.jpg) top left repeat-x fixed; } #page_bg { padding: 0px; margin: 0px; text-align:center; position:relative; /* позиция стабильная */ } #podbody1{ background:transparent url(../images/pngbody8.png) center -156px no-repeat; position:absolute; /* абсолютное позиционирование относительно стабильного блока */ z-index:1; /* на z-оси на слое 1 */ top:0; /* сверху 0... */ left:0; /* слева 0... */ width:100%; height:100%; max-height:1600px; filter: alpha(opacity=10); /* прозрачность для IE 5.5+ */ -moz-opacity: 0.1; /* прозрачность для Mozilla 1.6 и ниже */ -khtml-opacity: 0.1; /* прозрачность для Konqueror 3.1+, Safari 1.1 */ opacity: 0.1; } #body1{ position:relative; /* стабильная позиция */ z-index:2; /* на z-оси на слое 2 */ width:980px; padding: 0px; margin:4px auto; /* централизация */ }
Зафиксированный «нижний» бэкграунд никогда не будет пролистываться, тогда как бэкграунд второго слоя будет пролистываться вместе с содержимым страницы.
7. Вывод линейного объекта по принципу блока
Cтрочными объектами я называю span, a, и подобные. Эмуляция в виде блока бывает необходима при использовании высоты, ширины, отступов, обрезки, и др.
span.spcspan{display:block;} .divSD a,.divSD a:link,.divSD a:visited{display:block}
8. Обрезание контента по условленным габаритам
Как часто различные условия контента (специфика используемых текстов, картинок) диктуют свои правила веб-дизайну. Разработчики отказываются от изначальной эстетики дизайна, или последний начинает «ехать». Обрезка по прокрустовому принципу: всё, что выходит за границы, обрезаем. Не забываем указывать сами границы, т.е. длину и высоту блока.
.obrez{ width:700px; /* длина блока с классом "obrez" */ height:400px; /* высота блока с классом "obrez" */ overflow: hidden; }
9. Немного HTML. Обрезание страницы по размеру окна, или ликвидация линейки прокрутки
Чтобы обрезать содержимое страницы по размеру окна, или, другими словами, убрать полосы прокруток, достаточно назначить атрибут scroll=»no».
HTML:
<body scroll="no"> ... </body>
10. Создание линейки прокрутки в блоке. Эмуляция фрейма
Всем известно, что поисковики не любят фреймы (frame) — они их просто не читают. Однако порой требуются полосы прокрутки в отдельных блоках. Есть два варианта реализации. Оговорюсь, что лично я использую 2-й способ.
Вар-1. Создание горизонтальной и вертикальной прокрутки независимо от содержания блока
Этот способ установит полосы прокрутки, независимо от объёма содержания.
.prokrutka-all{ /* блока с классом "prokrutka-all" */ width:700px; /* длина блока */ height:400px; /* высота блока */ overflow: scroll; /* создание вертикальной и горизонтальной прокрутки */ } .prokrutka-vertical{ /* блока с классом "prokrutka-vertical" */ width:700px; /* длина блока */ height:400px; /* высота блока */ overflow-y: scroll; /* создание вертикальной прокрутки */ } .prokrutka-gorizontal{ /* блока с классом "prokrutka-gorizontal" */ width:700px; /* длина блока */ height:400px; /* высота блока */ overflow-x: scroll; /* создание горизонтальной прокрутки */ }
Вар-2. Создание горизонтальной и вертикальной прокрутки в зависимости от содержания
При 2-м способе, полосы прокрутки образуются только по необходимости: в случае, если содержание превысит размеры окна.
(Вар-2.) Вертикальная прокрутка
.prokrutka{ width:700px; /* длина блока с классом "prokrutka" */ height:400px; /* высота блока с классом "prokrutka" */ overflow: auto; }
(Вар-2.) Горизонтальная прокрутка
В случае, если в блок прокрутки входит изображение или блок, превышающие размеры окна по ширине, образуется горизонтальная полоса прокрутки. Рассмотрим пример. Помещаем длинный (или очень длинный) блок в уже знакомую область.
HTML:
<div class="prokrutka"> <div class="looong">...</div> </div>
CCS:
.prokrutka{ width:700px; height:400px; overflow: auto; } .looong{ width:2000px; /* длина дочернего длинного блока */ height:auto; }
11. CCS-спрайты и эмуляция флеш-меню
Если во фреймы поисковики хоть как-то могут пробраться, содержимое флеш (flash) они точно не считают. В то же время, большинство флеш-методов можно организовать скриптами (JQuery, JS), а флеш-подобные меню и просто — при помощи CSS.
CCS cпрайт представляет один файл, вмещающий множество изображений (скажем, иконки). Допустим, мы имеем несколько логотипов, каждый из которых должен вести на определённую страницу сайта. Подложка у такой ссылки (сам текст ссылки прячется) будет иметь специальные координаты на нашей картинке. Я довольно часто использую CSS-спрайты. Вот один из примеров (на сайте DISKI-MERCEDES.RU):
Создание CCS-спрайта
#dfs ul{ display:block; width:383px; height:193px; background: transparent; margin:0; padding:0;} #dfs ul,#dfs ul li{ list-style:none; margin:0; padding:0;} #dfs ul li {display:block;float:left} #dfs ul li a{ display:block; height:0px!important; width:65px; padding-top:64px; background: transparent url('workimages/dfs_icons2.png') no-repeat; overflow:hidden!important; margin-top:2px;} #dfs ul li.df1 a,#dfs ul li.df1 a:link,#dfs ul li.df1 a:visited{ background-position:0px -2px; } #dfs ul li.df1 a:hover,#dfs ul li.df1 a:active{ background-position:0px -195px; }
12. Работа с тенью.
Задача: Эмуляция подвешенности объекта
Применение: Всплывающие окна
В веб-дизайне тени часто рисуются, являясь ещё одним камешком замедления работы сайта. Это связано с тем, что получить достаточно кроссбраузерную тень на основе только стилей требует от разработчика более углублённых знаний. Однако, это возможно.
Создать тень у блока
Для создания тени у блока, в большинстве браузеров, достаточно указать box-shadow.
.shadow{ /* Блок с классом "shadow". На рис. - "Блок с тенью" */ height:80px; /* высота блока */ width:250px; /* длина блока */ border:1px solid #ccc; /* рамка */ background: #fe4597; /* Цвет фона */ -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ padding: 10px; } .shadow2{ /* Блок с классом "shadow". На рис. "Блок с тенью 2" */ height:80px; /* высота блока */ width:250px; /* длина блока */ border:1px solid #ccc; /* рамка */ background: #eeef53; /* Цвет фона */ -moz-box-shadow:5px 5px 3px silver; /* Для Firefox */ -webkit-box-shadow:5px 5px 3px silver; /* Для Safari и Chrome */ box-shadow:5px 5px 3px silver; /* Параметры тени */ padding: 10px; }
IE ниже 9 версии никак не реагирует на box-shadow. Для кроссбраузерности нужно использовать другие методы.
Создание тени у блока IE. CCS-хак для Internet Explorer ниже 9
<!--[if lt IE 9]> <style> .shadow{filter: progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=-90, Strength=5) progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=0, Strength=5) progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=180, Strength=5) progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=90, Strength=5); } .shadow2{ filter: progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=120, Strength=5); } </style> <![endif]-->
Обратите внимание, IE запрашивает отступ для тени, тогда как другие браузеры — нет (голубая полоса на рисунке).
Другим CSS-хаком для создания тени у блока в IE, является применение фильтра Blur (размытие) для блока-подложки (при использовании абсолютного позиционирования основного блока). Такой хак, в частности,
Создать тень у текста.
Задача: Дополнительное акцентирование текста. Эстетическая привлекательность текста.
Тени у текстов придают акцентирование заголовкам, пунктам меню, подписям кнопок и др. Служат юзабилити и могут косвенно влиять на лояльность посетителей.
.textshadow{ /* заголовок с классом "textshadow" */ text-shadow: #000 1px 0px 3px; /* Параметры тени */ }
Для IE ниже 9
Чёткая тень:
.textshadow{ filter: progid:DXImageTransform.Microsoft.dropshadow(offX=1, offY=1, color=#000000); /* чёткая тень для текста в IE */ }
При создании сайта STAROPTIC.RU я использовала тени текстов для пунктов верхнего и нижнего меню:
Размытая тень (через свечение) для IE ниже 9
.textshadow{ filter:progid:DXImageTransform.Microsoft.Glow(color=silver, strength=3); )
13. CSS сниппет. Создание кроссбраузерного градиента (переливы цвета)
Фоновые картинки-подложки, содержащие градиент (перелив цвета), как правило, весят немного. Единичный запрос никак не сказывается на работе сайта. Но представьте, сколько изображений потребуется, чтобы обеспечить один и тот же перелив в блоках с различным содержанием. Безусловно, динамичный градиент CSS окажется рациональнее. На рисунке видно, как блоки (классы «gradient lft» и «gradient») с разной высотой передают одинаковый перелив (от белого к светло-серому).
Пишем градиент средствами CSS:
.gradient{ /* блок с классом "gradient" */ width:260px; /* длина блока */ border:1px solid #ccc; /* бордюры блока */ background-image: -moz-linear-gradient(top, #ffffff, #cccccc); /* пишем градиент для Firefox 3.6 */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cccccc),color-stop(1, #ffffff)); /* пишем градиент для Safari & Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#cccccc'); /* для IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#cccccc')"; /* для IE8 */ padding: 10px; /* внутренние отступы */ color:#333; /* цвет текста */ margin-left:290px; /* внешний отступ слева */ } .gradient.lft{ /* левый блок с классом "gradient lft" */ float:left; /* обтекание слева */ margin-left:0px; /* убираем левый отступ */ }
Данная техника градиента была выполнена для блока новостей на сайте KURSI-YAZIKOV.RU:
14. Кроссбраузерное закругление углов у блока
Практически все современные браузеры могут обрабатывать закругление уголков у блока. Исключением является Internet Explorer ранних версий, которыми продолжают пользоваться по сей день. Для него, мы будем использовать особый файл для закругления углов (Скачать его можно здесь). Разместим файл на сайт и будем ссылаться к нему из CSS:
.block-s-zakrugleniyami { /* Для большинства браузеров */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* KHTML */ border-radius: 10px; /* CSS3 */ /* Для старых IE */ behavior: url(border-radius.htc); /* учим IE border-radius */ }
15. Веб-типографика
15.1. Способ 1. Специальный шрифт на сайте — с использованием файлов шрифта
Чтобы оформить заголовки фирменным/специальным шрифтом, понадобится получить специальные форматы файла шрифта для веб. Для этого, лучше всего использовать онлайн-генераторы шрифтов (давно к ним не обращалась, поэтому испробованные ресурсы не подскажу, но несомненно — не составит сложности нагуглить). В итоговом наборе, мы должны иметь файлы следующих форматов: EOT, WOFF, TTF, SVG. Их мы разместим в конструкцию @font-face:
@font-face { font-family: OriginalFirmFont; /* Имя шрифта */ src: url('fonts/OriginalFirmFont.eot'); src: local('O'), url('fonts/OriginalFirmFont.woff') format('woff'), url('fonts/OriginalFirmFont.ttf') format('truetype'), url('fonts/OriginalFirmFont.svg') format('svg'); /* Путь к файлу со шрифтом */ } h1,h2,h3,h4,h5,h6 { font-family: OriginalFirmFont; }
Достоинства и недостатки. Оригинальная веб-типографика с сторонними шрифтами на вашем сайте. К недостаткам относится замедления прогрузки страниц вашего сайта.
15.2. Способ 2. Специальный шрифт на сайте — с использованием API Google fonts, на кешировании
Интегрирование таких шрифтов займет пару минут. Сначала выберите подходящий шрифт в каталоге Google web Fonts. Нажмите Add to Collection, а затем USE. Вам предложат две строки кода, одна представляет ссылку на скрипт, вторая — использование в файле CSS. Ставим ссылку на шрифт в коде страниц между тегами <HEAD></HEAD>:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
В файле CSS прописываем:
p { font-family: 'Ubuntu', sans-serif; font-weight: normal; } h2, h3, h4 { font-family: 'Ubuntu', sans-serif; font-weight: 500; }
Достоинства и недостатки: оригинальные шрифты на вашем сайте, замедления прогрузки страниц почти не ощутимы благодаря автоматическому кешированию.
15.2. Способ 3. Использовать веб-шрифты по-новому
Я довольно часто прибегаю к изменению межбуквенных отступов (letter-spacing). Кроме него, можно ещё определять прописные буквы вместо строчных (строчные будут заменены на заглавные уменьшенного размера, заглавные останутся без изменения). Делается это через font-variant.
h2{ letter-spacing:-1px; /* уменьшенный интервал в заголовке */ font-variant: small-caps; /* модифицируем все символы в капитель: заглавные и уменьшенные заглавные буквы */ } span.uvelichenniy-interval{ letter-spacing:2px; /* увеличенный интервал */ }
Так, довольно истасканный шрифт New Roman может смотреться по-новому:
В подобающем окружении довольно стильно и современно может смотреться Courier New, который почти не употребляют в веб-дизайне. С ним я экспериментировала на сайте KURSI-YAZIKOV.RU. Вот, что получилось:
Достоинства и недостатки: оригинальная веб-типографика на вашем сайте (без сторонних шрифтов). Нет замедлений в прогрузке страниц сайта.
Дополнительные CSS-сниппеты
Дополнительно:
Убираем дефолтные отступы страницы
html,body{ margin:0px; padding:0px; font: 12px/24px Helvetica, Arial, Verdana, sans-serif; }