Основы 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

Данный стиль задаёт цвет текста. Для задания цвета можно использовать как hex-значение цвета (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».

Итог

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

Автор: Андрей Морковин.

Ещё материалы по этой теме:

Андрей Морковин
Приступайте к просмотру базового видеокурса по верстке сайта. Получите достаточный набор базовых знаний по CSS:
https://www.seoded.ru/webmaster/morkovin/blochnaya-verstka-div.html

Ольга
Да, качала всю ночь. Кое что уже посмотрела.
Спасибо, объязательно пристану с вопросами когда начну воять свой сайт.
Пойду подпишусь на рассылку.

Андрей Морковин
Ольга, я рад, что Вам интересно. Подписка на рассылку — это правильно.

Never Lex
А как же font-style, font, display, clear, border и vertical-align? Имхо оооочень часто используемые правила.

TIPLER
А как же популярный параметр display???

Ксю
Хочу добавить от себя одну вещь: в начале файла *.css не лишним будет прописать строку:
Пока разобраться не могу почему, но на моем компьютере без этой строки не работало свойство «background-image», правильно отображало только уже на самом хостинге, а так тестить не совсем удобно

Ксю
…строку: «откр тег» STYLE type=»text/css» «закр тег»

Саш@k
Спасибо! Статья помогла разобраться в некоторых нюансах)))

Никита
Спасибо за урок, а как расположить блок друг под другом по вертикали?

Anry
Если в написании кода html блоки идут один за другим, то их позиционирования относительно друг друга не нужно, т.к. они автоматически будут располагаться друг под другом по вертикали)

filot
А видеоурока не будет?((((

Влад
Спасибо за отличные видео уроки. Продолжайте в том же духе=)

Anry
По поводу применения в верстке CSS-ластика *{padding:0; margin:0} на Хабре есть очень интересная статья
Всем советую с ней ознакомиться, Эрик Мейер придумал более универсальный и надежный способ использования данного метода!

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