|
| ||
|
Включване на стилова таблица За осъществяване на тази задача можем да се възползваме от някой от следните три метода: • външен файл • описание в заглавната секция на страницата • inline-описание Да започнем с най-простото, с така нареченото inline-описание или описание, вградено в тага: Пример: <p style="color:red; text-align:center;">Примерен текст</p> С помощта на допълнителния атрибут style можем да дефинираме нужните ни стилови параметри в тага. Това е най-лесния метод, обаче той действа само в пределите на един таг. Но представете си колко нараства размера на файла и колко неудобно ще бъде след това да се коригира, ако започнем да дефнираме стил във всеки таг. Този начин за описание на стил не се различава много например от директното описание на вънешния вид с помощта на тага <font>. Много по-удобно е предварително да се дефинират всички нужни стилове и впоследствие просто да се приложат към съответния таг. Това е втория начин - описание в заглавната секция. Това описание вече е в сила за цялата страница. Задаването на стила става с помощта на класове, които представляватт по своята същност списъци с дефиниции на всички необходими параметри за оформление. При използването на този метод за описание на стиловете то трябва да се разположи в заглавната секция на страницата: Пример: <head> .... <style type="text/css"> <!-- .header { text-align : center; font-size : 27pt;} .red { color : red; } --> </style> </head> Сега вече тези стилове може да се прилагат на произволно място в html-кода. За целта се използва следната конструкция: Пример: <p class="header">Това е текст, написан със стил header<p> <p class="red">Този текст е с червен цвят<p> Освен да дефинираме новите класове, ние имаме възможност да предефинираме стандартните тагове. Например тага <p>: Пример: <style type="text/css"> <!-- p { text-align : center; font-size : 12pt;} --> </style> Сега целият текст, затворен между таговете <p></p>, ще изглежда така, както е определено в дадения стил. Това е много удобно и позволява лесно да се адаптират вече съществуващи страници към използването на стилове. Освен това този похват намалява обема на файловете за сметка на избягването на излишни атрибути class. И накрая третия метод – изнасяне на описанията на стиловете във външен файл. Диапазонът на неговото действие се простира върху всички файлове, в които е включено това описание. Този способ най-добре съответства на концепциите на HTML 4.0. В случая, когато е необходимо да изменим вънешния вид на сайта, ще бъде достатъчно да коригираме само един файл. Как точно става включването на външния файл? За начало да създадем стилов файл с описание на всички нужни ни класове (style.css): Пример: .header { text-align : center; font-size : 27pt;} .red { color : red; } p { text-align : center; font-size : 12pt;} След това той се внедрява в документа с помощта на тага <link>: Пример: <head> .... <link rel="stylesheet" type="text/css" href="css/style.css" title="MyStyleSheet"> .... </head> Това е най-удачния метод и за основната стилова таблица се препоръчва именно той. Защо точно "основната"? Работата е там, че на практика се налага да се възползваме и от трите метода, и тук в действие влиза "каскадността" на стиловете.
|
|
