Создание сайтов и целевая CSS-верстка. HTML и CSS сниппеты

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

CSS-кодинг позволяет

• Ускорение работы сайта
• Улучшение юзабилити и повышение лояльности потребителей (аудитории): Гибкость и динамичность веб-дизайна Структурирование и облегчение восприятия информационных блоков Кликабельность
• Гибкость и динамичность веб-дизайна
• Структурирование и облегчение восприятия информационных блоков
• Кликабельность
• Поисковая оптимизация

Относительно последнего пункта, следует отметить, что с недавних пор поисковики стали в большей мере ориентироваться на «возвраты посетителей» и общее поведение пользователей на сайте. Понятно, что такие факторы , как улучшение юзабилити (удобство пользования) и повышение лояльности аудитории, наравне с другими принципами SEO, прямо воздействует на ранжирование сайта в поисковиках.

Для справки (о CSS). CSS — каскадная таблица стилей. Служит для верстки и стилевого оформления web-документа. Подгружается в т.н. «невидимую часть» страницы ( тег ). Производит обработку компонентов страницы, визуально преображая их с заданными стилями (цвет, позиция и пр.).

Данный материал предназначен в качестве шпаргалки для веб-дизайнеров / верстальщиков. В статье представлена личная подборка CSS-фрагментов (сниппетов), наиболее часто употребляемых автором на практике. Материал содержит советы по адаптации верстки к задачам поисковой оптимизации.

Создание сайтов и верстка: блочная или табличная?

Предположим, мы имеем следующий макет дизайн: «Шапка» (HEADER), «Левая колонка» (LEFTCOLUMN), «Содержание страницы» (CONTENT) и «Подвал» (FOOTER).

ШАПКА (HEADER) →

Левая колонка (LEFTCOLUMN) → Содержание страницы (CONTENT) →

Подвал (FOOTER)

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

ШАПКА (HEADER)










Левая колонка (LEFTCOLUMN)




Содержание страницы (CONTENT)










Подвал (FOOTER)

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

Посмотрим направляющие чтения для поисковиков в блоковой версии:

ШАПКА (HEADER) → ← Содержание страницы (CONTENT) ← Левая колонка (LEFTCOLUMN) Подвал (FOOTER)

Посмотрим на код блоковой верстки:

ШАПКА (HEADER)


Содержание страницы (CONTENT)


Левая колонка (LEFTCOLUMN)


Подвал (FOOTER)

Как видно, сначала в коде отобразится Шапка, потом Содержание, а уж затем пойдут Левая колонка и Подвал.

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

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 */
}

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

...
...

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:

...

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:

...

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

Обратите внимание, 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. Ставим ссылку на шрифт в коде страниц между тегами :

В файле 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;
}