CSS верстка

20

Від автора: CSS верстка – це, по суті, другий етап верстки сайту. І, безумовно, дуже важливий, тому що в підсумку саме він формує зовнішній вигляд сайту. Сьогодні хотілося б ще раз підкреслити деякі важливі принципи роботи з касакадными таблицями стилів.

Верстка за допомогою css – що це і навіщо воно потрібно?

Ну спочатку все ж трохи роз’яснень для новачків. Css – це чудовий мову, який повністю складається з властивостей та їх значень. Ці властивості дозволяють певним чином впливати на зовнішній вигляд елементів. Наприклад, властивість color визначає колір тексту, background – фон елемента font – шрифт і т. д і т. п.

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

Так от, css придуманий для того, щоб створювати зовнішній вигляд. І зі своїм завданням він справляється чудово. HTML дозволяє створювати елементи, формувати розмітка, а css – оформляти все це справа. Ці дві мови пов’язані нерозлучно, так що якщо відняти один – інший просто стане неповноцінним.

Тому завжди верстальник на початку роботи створює структуру, необхідні елементи, а потім все це оформляє.

Основні речі, які можна зробити в css

Таблична верстка за допомогою css. Насправді від таблиць як від способу верстати багато в чому відмовилися з-за громіздкого html-коду, але не так давно в css з’явилися можливості, які дозволили будь-які елементи перетворити в табличні. Ось вони: Display: table, display: table-row, display: table-cell.

Відповідно, властивість display визначає, як той чи інший елемент буде відображатися на сторінці. Перше значення перетворює потрібний елемент до таблиці, друге – в ряд таблиці, а третє – в окрему клітинку. Ось так за рахунок таких нехитрих маніпуляцій ви можете змайструвати штучну таблицю на сторінці без жодного тега table або td в коді.

Кросбраузерна верстка. Як css може в цьому допомогти

А він може допомогти дуже просто – скиньте всі відступи та правила, які браузери можуть додавати за замовчуванням, і ви вже досягнете певної кросбраузерності. По крайней мере, веб-браузери будуть працювати за вашими правилами, а не ви за іхнім. Цей підхід ще називають як css reset. Тобто створюється набір стилів, який скидає налаштування за замовчуванням.

У мережі є багато різних варіантів css reset, так як кожен веб-розробник любить робити по-своєму. В самому примітивному варіанті скидання стилів можна зробити так:

*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}

Тобто ми просто прибрали всі внутрішні і зовнішні відступи і всіх елементів, а також прибрали маркери списки, тому що сьогодні мало хто використовує їх. Мета css reset – дозволити вам почати опис стилів з чистого аркуша.

CSS верстка

Рис.1. Кожному з цих товаришів треба догодити, інакше можна втратити потенційних відвідувачів сайту.

Адаптивна верстка в css

Адаптивна верстка це взагалі окрема гілка в сайтобудуванні, але в цій статті я всього лише розповім вам, що це таке з найпростішим прикладом. Взагалі я думаю, що названа вона дуже правильно. Адаптуватися, отже, змінюватися. А в сайтобудуванні в основному потрібно змінюватися під різні дозволи екрану. Сайту змінюватися, тобто, не людина.

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

Адаптивність реалізується за допомогою так званих медіа-запитів. Зазвичай їх пишуть прямо у головному файлі стилів. Найпростіший приклад медіа-запитів:

@media and only screen (max-width: 600px){
img{
float: none;
}
}

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

Основа адаптивності закладається з допомогою властивості max-width. Наприклад, max-width: 1320px означає, що максимум блок буде тягнутися на 1320 пікселів, але якщо розмір вікна буде менше, то він теж буде зменшуватись. Жодного горизонтального скролла!

CSS верстка

Рис.2. Приклад запису медіа-запитів. Як бачите, для одного шаблону може знадобитися пристойну кількість правил і стилів, щоб реалізувати нормальну адаптивність.

Який редактор використовувати для роботи з css?

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

Скріншот з кодом, який ви тільки що могли спостерігати, зроблений з програми Notepad++, де і був відкритий css-файл. Мені здається, цей редактор просто відмінно підходить для роботи з цією мовою – дуже добре підсвічуються різні складові частини коду, а якщо ще розробник і дотримується певних правил оформлення, то код читається просто чудово.

Дізнайтеся css краще

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

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

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