Комментариев 7Сегодня в веб-индустрии использование каскадных таблиц стилей (CSS) стало стандартом при создании сайтов. Программист ли вы, или дизайнер – вам просто необходимо с ними «подружиться». CSS – это своеобразный мост между программированием и дизайном, и любой веб-мастер должен обладать хотя бы базовыми знаниями в работе с CSS. Если вы до сих пор не «на короткой ноге» с CSS, то сейчас самое время открыть свой любимый текстовый редактор и последовать нижеследующим инструкциям по практическому использованию CSS.
ОБЗОР: ЧТО МЫ УЗНАЕМ СЕГОДНЯ
Что ж, начнём с того, что называется базовые свойства и возможности CSS, которые мы обычно используем при создании сайтов с использованием CSS:
1. Внутренний (Padding) и внешний (Margin) отступы
2. Размещения (Floats)
3. Выравнивание по центру (Center alignment)
4. Упорядоченный (Ordered) и неупорядоченный (Unordered) списки
5. Стилизованные заголовки
6. Типы переполнения блочных элементов (Overflow)
7. Позиционирование (Position)
Изучив основы, перейдём на следующий уровень и более подробно рассмотрим некоторые трюки в создании CSS-сайтов «с нуля».
8. Фоновые изображения
9. Стилизация изображений
10. PSD в XHTML
1. ВНУТРЕННИЙ (PADDING) И ВНЕШНИЙ (MARGIN) ОТСТУПЫ
Большинство новичков путают внутренний и внешний отступы и неправильно их используют. Такая практика, как, например, использование фиксированной высоты (height) элемента для создания внутреннего или внешнего отступов приводит к багам (ошибкам) и несовместимостям. Корректное применение внутреннего и внешнего отступов – это основа CSS-кодирования. Что же такое внутренний (padding) и внешний (margin) отступы?
Внутренний отступ – это расстояние от содержимого элемента до границы элемента, в то время как внешний отступ – это расстояние от границы элемента до соседних элементов. Различия становятся понятны, как только вы задаёте значения параметров background (фоновый цвет или изображение) и border (граница) элемента. В отличие от внутреннего, на внешний отступ не распространяются значения параметров background и border, поскольку он представляет собой пространство снаружи (за границами) элемента.
Взгляните на следующие изображения:
Значения внутреннего и внешнего отступов располагаются по часовой стрелке, начиная с верхней границы.
Практический пример: заголовок между двумя параграфами. Как видите, внешний отступ (margin) создаёт пустое пространство между заголовком и параграфами, в то время как внутренний отступ (padding) образует промежуток от края текста заголовка до границы элемента.
Значения внешнего и внутреннего отступов
В приведённом выше примере параметры для внешнего и внутреннего отступов будут следующие:
margin: 15px 0 15px 0; padding: 15px 15px 15px 15px;
Для оптимизации кода используем технику, которая называется «стенографическая запись» и позволяет избежать повторения кода. Применение такой записи уменьшит длину кода. В результате предыдущая запись будет выглядеть следующим образом:
margin: 15px 0; /* верхний и нижний по 15px, а левый и правый 0 */ padding: 15px; /* все по 15px */
А вот так будет выглядеть полный CSS-код данного заголовка:
h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}
Важно!
Помните, что внутренний отступ (padding) увеличивает длину и ширину элемента на величину своего значения. Например, если вы задали ширину элемента равной 100 пикселей, а внутренний левый и правый отступы по 10 пикселей, то суммарная ширина элемента составит 120 пикселей. 100px (контент) + 10px (левый внутренний отступ) + 10px (правый внутренний отступ) = 120px (суммарная ширина элемента)
Внешний же отступ, хоть и увеличивает расстояния между элементами, но не оказывает непосредственного воздействия на ширину самого элемента. Это особенно удобно использовать для построения блочной разметки.
2. РАЗМЕЩЕНИЯ (FLOAT)
Размещение (Float) – это один из основных элементов при построении сайтов на базе CSS, он используется для позиционирования изображений и блочных элементов. Если вас интересует то, как можно в HTML разместить элементы слева или справа, то floating – именно тот параметр, который вам необходим.
Следуя HTML Dog (http://htmldog.com/reference/CSSproperties/float/), параметр float «определяет, будет ли элемент с фиксированной шириной размещён справа или слева по отношению к окружающим его элементам».
Значение float:left «прижимает» элемент к левому краю родительского элемента (float:right – соответственно, к правому). Давайте рассмотрим практический пример с использованием float:left.
Важно!
Поскольку блочный элемент обычно заполняет 100% ширины родительского элемента, размещение элемента по правому краю (float:right) визуально сместит его вниз на следующую строку.
Существует два способа, позволяющие расположить элементы так, как было задумано.
1. Изменить порядок элементов HTML-разметки так, чтобы первым вызывался «плавающий» элемент, а прилегающий – вторым.
2. Установить ширину прилегающего элемента такой, чтобы суммарная ширина элементов была меньше или равна ширине родительского элемента.
В Internet Explorer 6 (IE6) есть известная проблема, заключающаяся в том, что при размещении элемента по левому или правому краю, его внешний отступ с этого края удваивается. Так, фактически установленный левый внешний отступ в значение 5 пикселей (margin-left:5px;) у расположенного по левому краю элемента в IE6 примет значение равное 10px.
Самый простой способ избавиться от этого бага – добавить display:inline к «плавающему» элементу:
.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /* заплатка для IE6 */
}
3. ВЫРАВНИВАНИЕ ПО ЦЕНТРУ (CENTER ALIGNMENT)
Времена использования HTML тега далеко позади. Давайте рассмотрим иной способ центрирования элементов.
Горизонтальное выравнивание
Вы можете выровнять текст по-горизонтали, используя параметр (свойство) text-align. Сделать это довольно просто, но не упускайте из виду то, что при выравнивании по центру (text-align:center;) следует сделать элемент блочным, добавив свойство display: block, для того, чтобы браузеры смогли определить края, относительно которых ему следует выполнить центрирование.
.center {
text-align: center;
display: block; /* только для линейных элементов */
}
Для горизонтального выравнивания блочных элементов используйте свойство margin.
W3C говорит нам: «Если значения параметров margin-left и margin-right указано как auto, действительные значения этих параметров уравниваются. Это позволяет горизонтально отцентрировать элемент относительно краёв родительского элемента».
Таким образом, горизонтального центрирования элемента можно достичь, установив левый и правый внешние отступы в значение auto. Это – идеальный метод такого выравнивания нетекстовых элементов, например, изображений или блоков. Но, в случае, если вы центрируете блочный элемент – не забывайте указывать ширину элемента.
Выравнивание по центру блочного элемента:
.layout_container {
margin: 0 auto;
width: 960px;
}
Выравнивание по центру изображения:
img.center {
margin: 0 auto;
display: block; /* поскольку img – это линейный элемент */
}
Вертикальное выравнивание
Вы можете выровнять текстовый элемент по вертикали, используя параметр (свойство) line-height, который устанавливает расстояние между строками текста. Это – идеальный способ для вертикального выравнивания заголовков или других текстовых элементов. Просто установите значения параметра line-height в значение необходимой высоты элемента.
h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}
Для вертикального выравнивания нетекстовых элементов используйте абсолютное позиционирование.
Особенность данной техники в том, что вам следует указывать и ширину, и высоту центрируемого элемента.
При значении параметра position:absolute, элемент помещается в своё базовое положение (0,0: верхний левый угол родительского элемента). В приведённом ниже изображении зелёная точка обозначает базовое положение элемента до того, как будут установлены отрицательные внешние верхний и нижний отступы.
Применением отрицательных значений для параметров margin-top и margin-left мы можем выровнять элемент и по вертикали и по горизонтали.
CSS-код, горизонтального и вертикального выравнивания элемента выглядит следующим образом:
.vertical {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -300px;
}
4. УПОРЯДОЧЕННЫЙ (ORDERED) И НЕУПОРЯДОЧЕННЫЙ (UNORDERED) СПИСКИ
Упорядоченный список (<ol>) – это список, элементы которого пронумерованы.
Неупорядоченный список (<ul>) – это список, элементы которого не пронумерованы, но отмечены специальными маркерами.
По-умолчанию, оба эти списка имеют простейшее оформление, но, с помощью CSS, вы можете с лёгкостью стилизовать их так, как вам нужно.
Для того, чтобы сохранить семантику кода, списки следует использовать только для содержимого, представляющего собой перечисление чего-либо. Но таким содержимым, например, могут являться и множество блоков ссылок в панели навигации.
Персонализация неупорядоченного списка
Простые кружки слишком обыденны и могут не привлечь должного внимания к содержимому, которое они сопровождают. Вы можете исправить положение с помощью простой и эффективной техники: уберём надоевшие кружки и используем фоновые изображения для каждого элемента списка.
Вот базовый пример CSS-кода:
ul.product_checklist {
list-style: none; /* Убираем стандартные маркеры */
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /* добавляем внутренние отступы элементов */
margin: 0;
background: url(icon_checklist.gif) no-repeat left center;
}
Использование неупорядоченного списка для построения навигационной панели
Большинство основанных на CSS навигационных меню построены в виде списка. Вот расшифровка того, как можно использовать обычный список для построения горизонтальной навигационной панели.
HTML: начнём с построения простого неупорядоченного списка со ссылками в качестве элементов
<ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
CSS: удалим стандартные маркеры (как это было проделано в предыдущем примере) установлением параметра list-style: none. Затем разместим элементы списка по левому краю так, чтобы элементы списка расположились горизонтально слева направо.
ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}
ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#topnav li a:hover {
background: #fff;
}
5. СТИЛИЗОВАННЫЕ ЗАГОЛОВКИ
Теги заголовков очень важны с точки зрения поисковой оптимизации (SEO). Но в обычном виде они выглядят довольно скучно. Почему бы не оживить их с помощью CSS-стилей?
HTML-разметка будет выглядеть следующим образом:
<h1><span>CSS</span> Back to Basics <small>Tips, Tricks, & Practical Uses of CSS</small></h1>
А вот как оформить всё это с помощью CSS:
h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*не поддерживается в IE */
}
h1 span {
color: #cc0000;
font-weight: bold;
}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /* переносим содержимое тега <small> на новую строку */
}
6. ТИПЫ ПЕРЕПОЛНЕНИЯ БЛОЧНЫХ ЭЛЕМЕНТОВ (OVERFLOW)
Параметр «переполнение» (overflow) может использоваться в различных случаях и является одним из самых полезных параметров (свойств) в арсенале каскадных таблиц стилей.
Что такое «Overflow»?
Согласно W3Schools.com «свойство overflow устанавливает, что должно происходить, если содержимое выходит за рамки элемента». Взгляните на следующий пример, чтобы понять, как это работает.
Визуально, элемент со значением overflow:auto выглядит как фрейм, но гораздо более привлекателен с точки зрения SEO. При таком значении параметра вертикальная и/или горизонтальная полосы прокрутки появляются автоматически при переполнении элемента его содержимым.
Значение overflow:scroll действует похожим образом, но полосы прокрутки появляются не зависимо от того переполнен ли элемент контентом или нет.
И значение overflow:hidden скрывает ту часть контента, которая выходит за рамки элемента.
Доводилось ли вам когда-либо наблюдать родительский элемент, который не охватывает свой дочерний элемент? Это можно исправить, сделав родительский элемент «плавающим».
Правда, в некоторых случаях, эта техника не приносит должного результата – например, если вам необходимо отцентрировать элемент, или же вы не желаете фиксировать его ширину. В таком случае вы можете использовать значение overflow:hidden для родительского элемента, чтобы заставить его полностью охватить свой дочерний элемент.
7. ПОЗИЦИОНИРОВАНИЕ (POSITION)
Позиционирование (position) – это один из наиболее мощных CSS-параметров. Он позволяет вам расположить элемент используя точные координаты и предоставляет полную свободу творчества мастерам, не желающим довольствоваться линейной структурой.
Для того чтобы расположить элемент там, где вам хочется, необходимо сделать следующее:
- Установить координаты (т.е. определить значение точки /левого верхнего угла элемента/ по осям X и Y);
- Выбрать правильное значение параметра: relative, absolute, fixed или static;
- Установить значение параметра z-index, если необходимо, чтобы элементы наслаивались друг на друга
Значение position:relative, помещает элемент в его обычную позицию. Например, если относительно позиционированному элементу (position:relative;) задать значения верхней и правой координат равное 10 пикселей, элемент сместится на величину данного значения вниз вправо.
Относительно позиционируемые элементы часто используются для создания точки отсчёта (X и Y координат) для абсолютно позиционированных элементов (position:absolute;). По-умолчанию, базовой позицией каждого элемента является верхний левый угол окна браузера (0,0). Когда вы устанавливаете позиционирование родительского элемента в значение relative, базовой точкой для всех его дочерних элементов, имеющих абсолютное позиционирование (position:absolute;), будет верхний левый угол родителя, а не окна браузера.
Элемент со значением position:absolute может быть размещён в любом месте страницы, используя X и Y координаты. Такой элемент будет игнорировать все обычные правила размещения и не будет влиять на окружающие элементы.
Базовой позицией элемента со значением position:fixed также является верхний левый угол окна браузера. Особенностью такого позиционирования является то, что расположение элемента жёстко фиксируется и не изменяется даже при прокрутке страницы пользователем.
Свойство z-index устанавливает порядок элемента по оси Z. Чем выше значение, тем выше расположен элемент по отношению к остальным. Использование параметра z-index позволяет создать «эффект луковицы» - т.е. наслаивать элементы друг на друга.
ДОБАВИМ КРАСОТЫ
Теперь, после знакомства с базовыми техниками CSS-кодирования, усовершенствуем наши страницы, добавив чуточку изящества. Ниже приведены несколько техник, которые помогут вам отшлифовать страницы своего сайта. Кстати, рекомендуем вам, впредь, создавать сайты с нуля, стараясь максимально полно использовать возможности CSS.
8. ФОНОВЫЕ ИЗОБРАЖЕНИЯ
Фоновые изображения используются практически повсеместно. Во многих случаях использование картинки в бэкграунде элемента – это отличный способ создания красивых визуальных эффектов. Добавляете ли вы повторяющуюся фоновую картинку, чтобы заполнить большой участок макета, или же стилизуете иконки в своей навигационной панели, значения параметра background предоставляют вам полную свободу творчества.
Только не следует забывать, что по-умолчанию стили, используемые при выводе ваших страниц на печать, не допускают фоновых изображений.
Использование крупных изображений в бэкграунде
Диагонали дисплеев наших мониторов становятся всё больше и больше, всвязи с чем большую популярность приобретает техника использования крупных фоновых изображений.
Как добиться необходимого эффекта, подробно описано в статье от Nick La на WebDesigner Wall. Также, настоятельно рекомендуем ознакомиться со статьёй «Большие картинки в бэкграунде: быть, или не быть», впервые опубликованной на Webdesigner Depot.
Замещение текста
Вероятно, вам доводилось замечать, что до сих пор не все браузеры «понимают» стандартные шрифты. Избежать, связанных с этим обстоятельством, неприятностей можно одним из множества способов, но, пожалуй, самой простой техникой является использование параметра text-indent.
Эта техника очень часто встречается в оформлении заголовков. Суть такого подхода в замене структурных текстовых элементов изображениями.
h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}
Иногда вам может потребоваться установить ширину и высоту элемента, или задать значение display:block, если элемент линейный…
.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /* только для линейных элементов */
}
А вот тут можно ознакомиться с дополнительным материалом на данную тему:
- 9 техник подмены текста фоновыми изображениями
- Использование фоновых изображений для замещения текста
- Изображение или замещение
- Ещё один взгляд на технику замещения
CSS спрайты
CSS-спрайты – это техника, при которой с помощью позиционирования бэкграунда вы показываете только малую часть фонового изображения, которое, по сути, является набором малых элементов (нечто похожее на мозаику), использующихся в различных местах страницы.
CSS-спрайты обычно используются для создания эффекта изменения элемента по наведению курсора – у иконок и элементов навигационных панелей.
В чём же преимущество такого метода? А преимущество в том, что CSS-спрайты значительно ускоряют загрузку страниц за счёт существенного (при грамотном использовании – в 3-5 раз!) снижения числа HTTP-запросов.
- Волшебство CSS-спрайтов: техника, инструменты, рекомендации.
- Продвинутое CSS-меню
- Путеводитель по CSS-спрайтам
- Создание простых и полезных CSS-спрайтов
- Построение быстрых сайтов с CSS-спрайтами
- CSS-спрайты: как Yahoo.com и AOL.com повышают производительность веб-систем
- Что есть CSS-спрайты?
9. СТИЛИЗАЦИЯ ИЗОБРАЖЕНИЙ
С помощью CSS Вы можете легко стилизовать изображения. Некоторые дизайнеры прилагают огромные усилия для того, чтобы создать стилизованные изображения.
Простейшая уловка – техника двойной границы, которая не требует ни каких дополнительных изображений.
HTML-разметка:
<img class="double_border" src="sample.jpg" alt="" />
CSS-код:
img.double_border {
border: 1px solid #bbb;
padding: 5px; /*Inner border size*/
background: #ddd; /*Inner border color*/
}
Кстати, Nick La на WebDesigner Wall создал замечательный урок о том, как стилизовать изображения.
10. PSD в XHTML
Когда основы CSS изучены, самое время проверить свои навыки и построить собственный сайт с нуля. Далее приведены ссылки на несколько замечательных уроков по CSS-кодированию от профессиональных веб-мастеров.
Раскрошить и собрать PSD
Конвертирование макета из PSD в HTML
Из PSD в HTML: Построение макета шаг за шагом
Демонстрация создания сайта с нуля
Построение элегантного сайта-портфолио с нуля
Как построить собственный одностраничный сайт-портфолио
Конвертация Photoshop-макета: Часть вторая, Эпизод первый
ЗАКЛЮЧЕНИЕ
Очень важно сформировать правильные навыки на раннем этапе изучения, иначе будет очень сложно достичь мастерства в CSS. Глядя на то, как стремительно развиваются веб-технологии, приходит понимание того, что нет иного времени, чем «сейчас», чтобы идти в ногу с последними тенденциями и стандартами.
Надеюсь, техники, которые мы рассмотрели, помогут вам достичь профессионализма в CSS. Оставайтесь жадными до знаний! Удачи!
Комментарии