# 2. У

вельних CSS

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

# 2. у <div> вельних css

# 2. у <div> вельних css

Ми побачимо, що наша сторінка має статичну мінімальну ширину, а при розтягуванні вікна браузера контент (вміст) розповзається на всю ширину блоку.

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

Що ж робити в такому випадку ?!

Сьогодні ми дізнаємося про блочну верстку

Сучасні технології програмування дозволяють нам використовувати зв’язки мов програмування, - це дуже зручно.

Почнемо з комбінації HTML + CSS . Про HTML ми вже трохи знаємо, - це мова розмітки сторінки, а CSS (Cascading Style Sheets - каскадні таблиці стилів) - це мова стилів, а точніше правила стилів.Ці правила ми будемо використовувати для нашого HTML.

CSS можна писати прямо всередині нашої сторінки, робиться це в такий спосіб (відкриємо сторінку в Notepad ++ ):

p {
font-size: 24px; /* Розмір шрифту */
color: # ff0000; / * Колір тексту * /
}
Easy Dev - Створення сайтів від А до Я

Зберегти і подивимося як змінилася наша сторінка:

# 2. у <div> вельних css

Для того, щоб HTML розумів, що йому необхідно задіяти CSS, обов’язкова наявність тега і обов’язково його розташування до тега .

- повідомляємо HTML про те, що будуть використовуватися стилі CSS.

p {
font-size: 24px; /* Розмір шрифту */
color: # ff0000; / * Колір тексту * /
}

Даний запис говорить про те, що все параграфи, тобто вміст тегів

Ось так виглядає синтаксис CSS. З цього моменту всі параграфи матимуть єдиний стиль . Погодьтеся, - це зручно.

Раніше нам доводилося для кожного параграфа задавати одні і ті ж правила кілька разів:

# 2. у <div> вельних css

Уявіть, що на сторінці буде знаходиться величезна стаття з купою абзаців і нам, раптом, знадобиться зробити вирівнювання тексту, скажімо, по правому краю, - нам доведеться в кожному тезі міняти параметр align .

Давайте подивимося на те, як ми можемо спростити собі роботу.Приберемо в вихідному коді абсолютно всі параметри у кожного параграфа. Замість цього ми додамо стиль параграфа:

p {
font-size: 24px; /* Розмір шрифту */
text-align: left; / * Вирівнювання тексту * /
color: # ff0000; / * Колір тексту * /
}

Синтаксис відрізняється від HTML, але не лякайтеся, - через пару лекцій ви звикнете до нього. Все, що потрібно поки запам’ятати: набір параметрів стилів поміщається { тут } , а так же кожен параметр закривається крапкою з комою.

Ах, так, - вміст тега / * є коментарем і абсолютно не впливає на роботу коду. Не забувайте його закривати * / В HTML коментар поміщається

DIV

З цього моменту ми дуже часто будемо працювати з тегом

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

Щоб ви розуміли про що йде мова, перейдемо відразу до практики. Замінимо всю нашу таблицю блоками (ctrl + c / ctrl + v):

p {
font-size: 24px; /* Розмір шрифту */
text-align: left; / * Вирівнювання тексту * /
color: # ff0000; / * Колір тексту * /
}
Easy Dev - Створення сайтів від А до Я
Easy Dev

лівий сектор

Текст в лівому секторі. Резервуємо місце.

Створення сайтів від А до Я. Робити сайти може кожен! Це легше, ніж здається! Я вас навчу!

Правий сектор

Підвал сторінки Easy Dev

Зберегти і подивимося результат:

# 2. у <div> вельних css

Що сталося з нашою красивою сторінкою? Не впадай у відчай!Зараз ми зробимо її ще краще, а головне - набагато швидше, ніж в перший раз!

Всі об’єкти і елементи в програмуванні прийнято якось називати (задавати ім’я) . Це необхідно для їх розподілу по класах. Подивіться на наш код, - як ми будемо розуміти який з цих div’ов нам потрібен? А як ми до нього звернемося, коли захочемо його змінити?

Все просто - ми дамо їм логічні імена так, щоб не заплутатися:

p {
font-size: 24px; /* Розмір шрифту */
text-align: left; / * Вирівнювання тексту * /
color: # ff0000; / * Колір тексту * /
}
Easy Dev - Створення сайтів від А до Я
Easy Dev

лівий сектор

Текст в лівому секторі. Резервуємо місце.

Створення сайтів від А до Я. Робити сайти може кожен! Це легше, ніж здається! Я вас навчу!

Правий сектор

Підвал сторінки Easy Dev

Класів необхідно ставити імена, пов’язані з логікою коду.Наприклад, клас лівого сектора я назвав left-sector , а не qwerty .Це буде допомагати вам, тому задавайте для класів обдумані імена.

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

Тепер до кожного класу у нас є доступ з CSS . Давайте швидше подивимося як ця зв’язка працює:

p {
font-size: 14px; /* Розмір шрифту */
text-align: left; / * Вирівнювання тексту * /
color: # 00000; / * Колір тексту * /
}
div {
border: 1px solid; / * Межа всіх блоків * /
}
.logo {
width: 100%; / * Довжина блоку з лого * /
}
.left-sector, .right-sector, .content, .footer {/ * через кому вказуємо всі класи, на які ви хочете правила * /
text-align: left;
float: left; / * Обтікання блоку * /
display: inline-block; / * Блоки в лінію * /
}
.content {
width: 500px;
color: # 555000;
}
.left-sector {
width: 250px;
color: # 555000;
}
.right-sector {
width: 250px;
color: # 555000;
}
.footer {
width: 100%;
text-align: right;
}
.container {
width: 1200px;
right: 25%; / * Відступ справа * /
left: 25%; / * Відступ зліва * /
position: relative; / * Положення від вихідної точки * /
}

Зберігаємося і дивимося результат:

# 2. у <div> вельних css

Хочу звернути вашу увагу на те, що div’и не залежать одне від одного, відмінно від таблиці і тому є більш зручними і практичними в розмітці сайту.

Для наочності я показав межі кожного блоку і ми бачимо незалежність блоків.

Безпосередньо про CSS і його можливості я рекомендую почитати в мережі: є купа уроків і прикладів, а так же офіційна документація.

Ще трохи CSS-магії і ми отримуємо картину, схожу на справжній сайт:

p {
font-size: 14px; /* Розмір шрифту */
text-align: left; / * Вирівнювання тексту * /
color: # 00000; / * Колір тексту * /
}
div {
border: none;
}
.logo {
width: 100%;
}
.left-sector, .right-sector, .content, .footer {
text-align: left;
float: left;
display: inline-block;
}
.content {
background: # f1f1f1;
width: 600px;
height: 1000px;
color: # 555000;
margin-left: 4%;
}
.left-sector {
background: # fffbd4;
width: 250px;
color: # 555000;
}
.right-sector {
background: # eaf6ff;
width: 250px;
color: # 555000;
float: right;
}
.footer {
width: 100%;
text-align: right;
}
.container {
background: # f7f7f7;
width: 1200px;
right: 25%;
left: 25%;
position: relative;
}

Дивлячись на сторінку, хочеться її чимось наповнити. Давайте підготуємо ще кілька блоків для наступного уроку, а так же оформимо їх трохи (весь код файлу, кінцевий) :

p {
font-size: 14px; /* Розмір шрифту */
text-align: left; / * Вирівнювання тексту * /
color: # 00000; / * Колір тексту * /
}
div {
border: none;
}
.logo {
width: 100%;
}
.low-sector-left, .low-sector-right {
padding: 5px;
margin-bottom: 5px;
}
.low-sector-left {
background: # fffbd4;
}
.low-sector-right {
background: # eaf6ff;
}
.left-sector, .right-sector, .content, .footer {
text-align: left;
float: left;
display: inline-block;
}
.content {
padding: 5px;
background: # f1f1f1;
width: 600px;
height: 1000px;
color: # 555000;
margin-left: 4%;
}
.left-sector {
width: 250px;
color: # 555000;
}
.right-sector {
width: 250px;
color: # 555000;
float: right;
}
.footer {
background: #dedddd;
width: 100%;
}
.container {
float: left;
background: # f7f7f7;
width: 1200px;
right: 25%;
left: 25%;
position: relative;
}
Easy Dev - Створення сайтів від А до Я
Easy Dev

лівий сектор

Текст в лівому секторі. Резервуємо місце.

Лівий сектор 2

Текст в лівому секторі. Резервуємо місце.

Лівий сектор 3

Текст в лівому секторі. Резервуємо місце.

Створення сайтів від А до Я. Робити сайти може кожен! Це легше, ніж здається! Я вас навчу!

Правий сектор

Правий сектор

Підвал сторінки Easy Dev

Підведемо підсумки

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

Можливо, в цій статті дуже багато не знайомої інформації. Не соромтеся шукати пояснення і приклади в інтернеті.

Рекомендую почати з HTML BOOK тут є все те, про що ми говоримо і що робимо.

У сьогоднішньому матеріалі допоможуть глибше розібратися статті про DIV і базовий синтаксис CSS.

Напишіть в коментарях:

1. Що ми пропустили?

2. Як можна це виправити?

3. Додайте до підвалу сторінки ще один блок, який буде розташований праворуч, на одному рівні з наявним текстом.



ЩЕ ПОЧИТАТИ