Ето ни отново заедно във втория урок за Cascading Style Sheets. Време е да разкрасим малко еднообраните редици текст и да ги превърнем в достойни за респект художествени произведения. Като начало обаче ще ни е необходимо да си припомним малко от добрия стар HTML.
И така. Стартирайте любимия си HTML редактор (ако нямате такъв, ви препоръчвам онази малка програмка за Windows наречена NotePad) и напишете там следния код:
<HTML><HEAD><TITLE>Динозаврия</TITLE></HEAD><BODY><H1>Добре дошли в света на динозаврите!</H1><P>Тук ще научите колко наистина са били дебели тези гущери.</P></BODY></HTML>
Това, както се вижда, е съвсем обикновена HTML страница - скучна, грозна, отегчителна. Нека сега задействаме специалните ефекти и грима. Напишете където и да е между таговете следното:
<STYLE TYPE="TEXT/CSS"><!--H1 { color: red }P { background-color: yellow }--></STYLE>В резултат на екрана на вашия браузър трябва да се появи нещо от сорта на:
Тук ще научите колко наистина са били дебели тези гущери.
Нека сега обясним какво толкова се случи. Просто прибавихме две правила за начина, по който трябва да се изобразяват елементите. Правилата са в основата на CSS и чрез тях се постига всичко. Те се състоят от две основни части - селектор (в случая това са H1, P) и декларация (color: red). Декларацията от своя страна има две части - променлива ("color") и стойност ("red"). Декларациите всъщност определят какъв ще е стила. Важно е да се запомни, че синтаксисът е точно следният - първо идва селекторът, а след него декларацията оградена в големи скоби. Към един селектор могат да се задават много декларации и в такъв случай те се разделят чрез точка и запетая.
Основното, което трябва да разберете тук е, че всеки елемент от HTML - бил той P, BODY, TABLE, LI или който и да било друг има някакви характеристики (променливи), които чрез CSS можете да изменяте по толкова многообразни начини (разбирай "да им се дават различни стойности"), че да ви се завие свят. Всъщност можете да си спестите усилия и когато трябва да декларирате едно и също нещо за различни селектори можете да ги групирате така:
P, H1, BLOCKQUOTE { font-family: Georgia }
По този начин заявихте, че текстът на абзаците (<P>), заглавията (<h1>) и цитатите (<BLOCKQUOTE>) трябва да бъде с шрифт Georgia (Любимият ми! Използвайте го винаги!).
HTML е структурен език, т.е. служи за определяне на структурата на документа. В тази структура някои елементи са по-важни и се отнасят до повече неща, отколкото други. За тези по-главни елементи се казва, че са родителски, а другите елемнти, които са по-надолу в йерархията на HTML се наричат деца. И както в реалността поведението на децата зависи до голяма степен от това на родителите, така и в CSS се спазват определени традиции.
Нека вземем следния пример:
<HTML><HEAD><TITLE>Динозаврия</TITLE><STYLE TYPE="TEXT/CSS"><!--BODY { color: red }H1 { color: blue }--></STYLE></HEAD><BODY><H1>Добре дошли в света на динозаврите!</H1><P>Тук ще научите колко наистина са били дебели тези гущери.</P></BODY></HTML>Това, което направихме бе да зададем правилото целия текст между <BODY> и </BODY> таговете да бъде в червено. Сега, понеже за <P> тага не сме указали специално цвят, той ще наследи цвета на своя родителски елемент - BODY. <H1> също се намира по-ниско в йерархията на таговете от <BODY>, но понеже за него специално е зададен цвят, всички заглавия от първо ниво ще се показват в синьо. Изглежда традициите не са това, което бяха. Заглавията са в синьо, защото конкретното правило е по-силно от наследеното. В CSS йерархията на правилата е от голямо значение и затова ще и обърнем специално внимание по-късно.
И след като успяхме да подхраним своя документ с една съвсем проста таблица със стилове, за да го накараме да изглежда толкова добре (не се смейте, вие - дизайнерите в ъгъла!), в следващия урок ще се запознаем с различните начини, по които могат да се добавят стилове към HTML документа. Те съвсем не са малко и всеки има своето място, когато създаваме съвременни сайтове.