CSS врізання до статті
Малобюджетні сайти.
Просування веб-сайту.
CSS: врізання до статті
Врізання – це блок додаткової інформації до статті. «Новий словник української мови» Т. Єфремової (2000) визначає термін так: «2. Те, що врізається чи врізано. // Короткий пояснювальний текст, який випереджає статтю і набирається іншим шрифтом або виділяється іншим типографським способом (у видавничій справі)».
Врізання може використовуватися не тільки для пояснень, а й для різної додаткової інформації, яка хоча б віддалено пов'язана зі статтею — для новин, особистих (і, можливо, опозиційних) думок щодо питання, що розглядається у статті… Одна з важливих функцій врізання полягає в тому, щоб на якийсь час відволікти (і розважити) читача великої статті від основного тексту, переключити його увагу на іншу інформацію.
Сам блок ми зробимо за допомогою CSS. Безпрецедентна простота рішення за допомогою CSS (на відміну від таблиць) і спричинила затягнуте введення до статті — необхідно якось «підтягнути» замітку до розмірів середньої статті :).
.breakoutr float: right; width: 35%;
padding: 10px; margin-left: 10px;
background-color: #ccc; color: #000;
text-align: left; line-height: 120%; >
HTML-код ще простіше. Розміщувати його треба перед тим абзацом тексту, поряд з яким ви хочете пустити врізання.
Коли елемент веб-сторінки отримує властивість float, він стає блоковим елементом і виривається із нормального потоку (того, як браузер відобразив сторінку без урахування позиціонування CSS). Елемент прикріплюється до лівої (float: left) або правої (float: right) сторони батьківського блоку (наприклад, іншого CSS-блоку або комірки таблиці), інші елементисторінки обтікатимуть float-блок з іншого боку.
Такий мінімально необхідний створення врізки код. Решта — виключно оформлення, яке кожен робить, виходячи зі своїх смаків і потреб. Хоча дві наступні директиви теж важливі, якщо і не для функціональності врізання, то точно для збереження охайності верстки статей.
Background-color визначає фоновий колір для врізання, щоб візуально виділити її з решти тексту статті та привернути увагу читача. Color визначає колір шрифту. За бажанням можна зробити і декоративну рамку для врізання, наприклад - "border: 1px dashed black;". Однак це здається непотрібним ускладненням "конструкції".
"text-align: left;" дозволяє вирівняти текст урізання по лівому краю. Вирівнювання по ширині краще не використовувати. Через недостатню для цього ширину блоку рядки виглядатимуть неохайно. line-height визначать відстань між рядками (інтерліньяж, висоту рядка) у відсотках від розміру шрифту. На сайті використовується невеликий розмір шрифту, тому для зручності читання задано велику міжрядкову відстань. Однак для блоку врізання використовується менше значення - 120%, щоб скоротити розмір блоку по вертикалі. тексти для врізання, як правило, використовуються невеликі, зменшений інтерліньяж не повинен сильно позначитися на зручності читання. Якщо на вашому сайті використовується великий шрифт, можна для економії простору замість висоти рядка встановити менший розмір шрифту; як варіант: "font-size: smaller;".
Ось і все, що хотілося розповісти. Код можна розширювати і далі. Наприклад, переписати його під "ліву руку" - float: left; margin-right: 10px; - І ще безліч різних покращень. Головним залишається те, що використання врізок дозволить покращити якість публікацій насайт. Враховуючи простоту реалізації, ця можливість здається подвійно привабливою.