Топ-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
Фон
 
В качестве фона можно задать картику: background-image; либо просто положить фоновый цвет: background-color.
 
Фон может повторяться (по оси X или Y) -  background-repeat.
 
А так же фон можно смещать – background-position.
 
Вот и все часто используемые стили. Более подробно о каждом из них можно почитать на сайте htmlbook.ru
 
Автор: А. Морковин. Источник:sdelaysite.com