CSS странична лента към статията
нискобюджетни сайтове.
Популяризиране на уебсайт.
CSS: странична лента на статията
Страничната лента е блок с допълнителна информация към статията. Новият речник на българския език на Т. Ефремова (2000) дефинира понятието по следния начин: „2. Какво се изрязва или изрязва. // Кратък обяснителен текст, който предхожда статията и е набран с различен шрифт или подчертан по различен типографски начин (при публикуване).“
Страничната лента може да се използва не само за обяснения, но и за различна допълнителна информация, която е поне отдалечено свързана със статията - за новини, лични (и евентуално опозиционни) мнения по въпроса, разглеждан в статията ... Една от важните функции на страничната лента е да отвлече (и забавлява) читателя на голяма статия от основния текст за известно време, да превключи вниманието му към друга информация.
Ще направим самия блок с помощта на CSS. Безпрецедентната простота на решението, използващо CSS (за разлика от таблиците), беше причината за продължителното въведение в статията - трябва по някакъв начин да „издърпате“ бележката до размера на средна статия :).
.breakoutr float: надясно; ширина: 35%;
подложка: 10px поле-ляво: 10px;
цвят на фона: #ccc; цвят: #000;
подравняване на текста: ляво; височина на линията: 120%; >
HTML кодът е още по-прост. Трябва да се постави преди абзаца от текста, до който искате да поставите странична лента.
Когато елемент на уеб страница получи свойство float, той става блоков елемент и излиза от нормалния поток (как един браузър би изобразил страницата без оглед на CSS позиционирането). Елементът е прикрепен към лявата (float: left) или дясната (float: right) страна на родителския блок (например друг CSS блок или клетка от таблица), други елементистраниците ще се увият около плаващия блок от другата страна.
Това е минималният код, необходим за създаване на странична лента. Всичко останало е чисто декорация, която всеки прави според вкуса и нуждите си. Въпреки че ... следващите две директиви също са важни, ако не за функционалността на страничната лента, то определено за поддържане на изрядността на оформлението на статиите.
background-color определя цвета на фона на страничната лента, за да я разграничи визуално от останалия текст на статията и да привлече вниманието на читателя. Цвят определя цвета на шрифта. По желание можете да направите и декоративна рамка за рамката, например - "border: 1px dashed black;". Това обаче изглежда ненужно усложняване на "дизайна".
"подравняване на текст: ляво;" ви позволява да подравните текста на рамката вляво. Най-добре е да не се използва подравняване. Поради недостатъчната ширина на блока за това, линиите ще изглеждат неподредени. line-height ще определи разстоянието между редовете (водеща, височина на реда) като процент от размера на шрифта. Сайтът използва малък шрифт, така че е зададено голямо разстояние между редовете за четливост. Въпреки това, по-малка стойност от 120% се използва за рамковия блок, за да се намали вертикалният размер на блока. Тъй като рамковите текстове обикновено са малки, намаленият интервенция не би трябвало да повлияе твърде много на четливостта. Ако вашият сайт използва голям шрифт, можете да зададете по-малък размер на шрифта вместо височина на реда, за да спестите място; алтернативно: "размер на шрифта: по-малък;".
Това е всичко, за което исках да говоря. Кодът може да бъде разширен още повече. Например, пренапишете го под "лявата ръка" - float: ляво; margin-right: 10px; - и много други подобрения. Основното нещо остава, че използването на странични ленти ще подобри качеството на публикациитесайт. Като се има предвид простотата на изпълнение, тази възможност изглежда двойно привлекателна.