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