4 Август 2009

Основы CSS. Топ-20 применяемых в верстке стилей.

В своей работе по верстке сайтов я применяю всего на всего 20 основных стилей CSS. Зная их, вы сможете сверстать довольно сложный макет сайта.

Давайте я вас с ними познакомлю.

Стили, применяемые для оформления текста

font-family

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

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

font-family: (шрифт без засечек), Arial, Helvetica, sans-serif;

font-family: (шрифт с засечками), "Times New Roman", Times, serif;

font-family: (моноширинный шрифт), "Courier New", Courier, monospaced;

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

color

Данный стиль задает цвет текста. Для задания цвета можно использовать как хекс-значение цвета (color:#FFF), так и ряд ключевых слов (color:black, color:red ...)

text-align

Данный стиль задает выравнивание текста внутри родительского блока. Может иметь значения left, right, center.

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

Хочу заметить тот факт, что выравнивание, заданное свойством text-align, распространяется так же на графические элементы внутри блока.

line-height

Данный стиль задает расстояние между строк в текстовом блоке (или, иными словами, изменяет высоту строки текста, еще по умному это называется "интерлиньяж"). Порой шрифт значительно приятнее смотрится при увеличении значения line-height, заданного по умолчанию.

Значение данного свойства задается в процентах (100%, 150% ...), множителем (1 -  интерлиньяж по умолчанию, 1.5 - увеличен в полтора раза) или точным значением в пикселах (10px, 1.5 em...).

letter-spacing

Межсимвольное расстояние. Значение данного свойства указывает в единицах длины (пиксели, дюймы, pt), либо относительные единицы - em.

font-weight

При желании сделать текст блока жирным - используйте стиль font-weight:bold. Если вы наоборот хотите убрать жирное выделение - тут все просто font-weight:normal


Позиционирование элементов

position:absolute

Данное свойство вырывает блок (применять это свой свойство нужно к блоку div) из нормального потока формирования страницы. И далее блок позиционируется относительно верхнего угла браузера путем указания свойств left и top в процентах или пикселях.

Нормальный поток - это когда блоки идут на странице один за одним, т.е. div под div-ом. В случае применения свойства position:absolute блок накладывается поверх остальных блоков нормального потока.

Используя абсолютное позиционирование, дабы избежать непредвиденных обстоятельств, необходимо задать значения ширины и высоты блока в пикселях (свойства width и height).

position:relative

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

Если у родительского блока указан стиль position:relative, то вложенный блок с указанным стилем position:absolute будет смещаться относительно левого верхнего угла родительского блока.

float:left

В случае, если необходимо разместить два блока div в одну линию друг за другом, у первого блока указывается стиль float:left (это означает что своей левой границей данный блок должен прилипнуть к предыдущему блоку в потоке). Первый блок оказывается прижатым, например к левой границе окна браузера. Если следующему блоку в потоке указать тоже самое значение в стилях, то два блока будут выводиться на одной линии. Первый блок будет прилипать к левой границе экрана, а второй, своей левой границей, к правой границе предыдущего блока.

Если у второго блока указать значения стиля float:right, то оба блока все так же окажутся расположенными на одной линии, но теперь первый блок будет прилипать к левой границе окна браузера, а правый - своей правой стороной к правой границе окна браузера.

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

Листинг HTML:

<html>
<head>
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

 <div class="block-1">
 Содержимое первого блока
 </div>

 <div class="block-2">
 Cодержимое второго блока
 </div>    

</body>
</html>

Листинг CSS:

*{
 padding:0;
 margin:0;
 }

.block-1{
 border:1px solid black;
 float:left;
 background-color:#FF0000;
}

.block-2{
 border:1px solid red;
 float:left;
}

В результате браузер нарисует нам вот такую картинку.

В листинге CSS вы, должно быть, заметили стиль *{padding:0; margin:0}. Данный стиль убирает отступы, задаваемые в браузере по умолчанию. Очень советую начинать написание файла CSS для вашего сайта именно с этого стиля.

Отступы

padding

Данное свойство формирует отступ внутри блока (значение в пикселах)

margin

Задает отступы от границ блока

Что бы было более понятно приведу картинку:

Что такое padding и margin

Что такое padding и margin

Фон

В качестве фона можно задать картику: background-image; либо просто положить фоновый цвет: background-color.

Фон может повторяться (по оси X или Y) -  background-repeat.

А так же фон можно смещать - background-position.

Вот и все часто используемые стили. Более подробно о каждом из них можно почитать на сайте htmlbook.ru

С уважением, Андрей Морковин.