Каскадните шаблони
професионалните Web сайтове
често изглеждат по начин, който
просто е неповторим, или как в тях се съдържат неща, които не бихте могли да създадете на HTML? Може би вече имате Web сайт и имате желание да обновите скучния му вид, обаче само от мисълта за актуализация на десетките (или може би дори стотиците) му отделни страници ви се доплаква. А може би просто имате желание да опростите текста на сайта, като обедините няколко форматиращи атрибута в един-единствен HTML таг или дори да създадете нови тагове.
Позволете ни да ви запознаем с каскадните шаблони (CSS - Cascading Style Sheets). CSS ви позволяват да изпълните всички и дори повече от споменатите по-горе задачи. Тези шаблони са достатъчно прости, за да бъдат съставени на ръка, така че не ви са нужни скъпи програми за създаването им. В началото хората избягваха да използват шаблони поради нееднозначната им поддръжка от браузърите, обаче днес те са съвместими с всеки Web сървър и Web браузър, появили се през последните две-три години за всички основни платформи. А тези шаблони ви осигуряват максимален контрол върху целия сайт.
Повече от маркер
HTML е бил предвиден като средство за създаване на структурирано представяне на информацията, а не по-конкретно за управление на външния вид на това представяне. Да, този език върши добра работа при разполагане на изображенията, при извеждане на някои думи с по-едър или с по-дребен шрифт и при групиране на текста и графиката в колони и таблици, обаче помислете за това, което HTML таговете не могат да вършат. Например
не може да означи конкретно семейство шрифтове, конкретен размер на шрифта или конкретно разстояние над или под текста - този таг просто очаква текстът, маркиран с Header 1, да бъде направен от браузъра по-едър и по-плътен от основния текст. Повечето HTML тагове действат по подобен начин: като структурират, а не форматират страницата.
Макар че в днешно време HTML се е развил и е разширен с известни възможности за типографски контрол, за някои дейности от рода на прилагане на конкретно форматиране към няколко части от страницата този език си остава все още тромав. Ако например използвате WYSIWYG инструмент за подготовка на страници като Dreamweaver или Microsoft FrontPage и искате текстът в “нормалните” абзаци да бъде със син шрифт Verdana, с размер, по-дребен от нормалния, трябва да селектирате този абзац с мишката и да щракнете върху отделните команди за форматиране от лентата с инструменти на съответния HTML редактор. Ако използвате Notepad, трябва да добавите следния дълъг таг след тага
:
Да направите това за един-единствен блок от текст не е толкова сложно, обаче може да се окаже доста досадно да повторите този процес за всеки абзац от документа, за да получите еднотипен вид, а после да повторите всичко това за всеки файл от вашия Web сайт.
Подобен подход не само че ви отнема безкрайно дълго време и изисква ужасно много щракане с мишката или копиране и залепване, но има и някои типографски елементи, които не може да променяте по този начин - например разстоянието между редовете.
Каскадните шаблони решават тези проблеми, като ви позволяват да задавате типографската информация само по веднъж за всеки таг и да променяте атрибутите, което само HTML не може да прави.
Основни положения
Първото нещо при използване на шаблони е да бъдат добавени няколко реда към секцията на вашия HTML файл. Трябва само да спазвате няколко основни правила.
Първо, шаблонът се записва между двата тага . Второ, всеки стил се записва на отделен ред между тези два тага. Всеки базов стил започва с HTML таг (наречен селектор), но без ъглови скоби, след който следват фигурна скоба и интервал, последван от новите атрибути за форматиране, разделени с точка и запетая, и всичко това завършващо със затваряща фигурна скоба. Като запишете всичко това заедно, тази част от CSS, която кара текста в един нормален абзац да използва малък син шрифт Verdana, би изглеждала по следния начин:
Макар че текстът на CSS не изглежда много по-различен от този на модифицирания HTML таг, при него има една огромна разлика: трябва да го запишете само на едно-единствено място във файла с HTML програмата. Това прави програмата на HTML по-чиста и по-компактна, а ако пожелаете да промените вида на нормалния текст в целия документ, трябва да промените само един ред!
Коментари
Добави коментар
