Основи css - 20 найбільш частоіспользуемих стилів

У своїй роботі по верстці сайтів я застосовую всього на всього 20 основних стилів CSS. Знаючи їх, ви зможете зверстати досить складний макет сайту.

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

Стилі, що застосовуються для оформлення тексту

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

Приклад використання стилю:

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

font-family: (шрифт із зарубками), "Times New Roman", Times, serif;

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

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

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

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

Є ще збочене значення стилю - justify, яке вирівнює текст по всій ширині батьківського блоку. Серед веб-дизайнерів стиль justify вважається поганим тоном, тому що вирівнювання по всій ширині батьківського блоку призводить до появи прогалин різної довжини, що сильно погіршує Новомосковскбільность.

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

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

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

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

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

позиціонування елементів

Дана властивість вириває блок (застосовувати це свій властивість потрібно до блоку div) з нормального потоку формування сторінки. І далі блок позиціонується щодо верхнього кута браузера шляхом вказівки властивостей left і top у відсотках або пікселях.

Нормальний потік - це коли блоки йдуть на сторінці один за одним, тобто div під div-му. У разі застосування властивості position: absolute блок накладається поверх інших блоків нормального потоку.

Використовуючи абсолютне позиціонування, щоб уникнути непередбачених обставин, необхідно задати значення ширини і висоти блоку в пікселях (властивості width і height).

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

Якщо у батьківського блоку вказано стиль position: relative. то вкладений блок із зазначеним стилем position: absolute буде зміщуватися щодо лівого верхнього кута батьківського блоку.

У разі, якщо необхідно розмістити два блоку div в одну лінію один за одним, у першого блоку вказується стиль float: left (це означає що своєю лівою кордоном даний блок повинен прилипнути до попереднього блоку в потоці). Перший блок виявляється притиснутим, наприклад до лівої межі вікна браузера. Якщо наступного блоку в потоці вказати те ж саме значення в стилях, то два блоки будуть виводитися на одній лінії. Перший блок буде прилипати до лівої межі екрану, а другий, своєю лівою кордоном, до правої кордоні попереднього блоку.

Якщо у другого блоку вказати значення стилю float: right. то обидва блоки все так же виявляться розташованими на одній лінії, але тепер перший блок буде прилипати до лівої межі вікна браузера, а правий - своєю правою стороною до правої межі вікна браузера.

Зауважу, що блоки будуть виводитися на одній лінії тільки в тому випадку, якщо їх сумарна ширина не перевищує ширини вікна браузера.

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

У лістингу CSS ви, мабуть, помітили стиль *. Даний стиль прибирає відступи, що задаються в браузері за замовчуванням. Дуже раджу починати написання файлу CSS для вашого сайту саме з цього стилю.

Дана властивість формує відступ всередині блоку (значення в пікселях)

Задає відступи від меж блоку

Що б було більш зрозуміло наведу картинку:

Що таке padding і margin

В якості фону можна задати Картік: background-image; або просто покласти фоновий колір: background-color.

Фон може повторюватися (по осі X або Y) - background-repeat.

А так же фон можна зміщувати - background-position.

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