Екран 6.0 - Приложение на елемента STYLE
Новост в HTML 4.0 е възможността да се раздели съдържанието на една HTML страница от форматните спецификации за нейното представяне във Web пространството. Основните препоръки на W3C за HTML 4.0 за поддържане на CSSL1 се обслужват от четвърто поколение браузъри на Microsoft Internet Explorer 4.x и Netscape Communicator 4.x. W3C задава препоръките на механизма за интерпретиране на стиловите формати в HTML 4.0 и как този механизъм да бъде обвързан със съдържанието на един документ.
При използване на езика за описание на стилови формати CSSL1 в
заглавната част на HTML файла се добавя <META> дескриптор
със следното съдържание:
| <META http-equiv="Content-Style-Type"
content="text/css"> или Content-Style-Type: text/css |
Свързването на стилови формати с HTML документ може да се приложи по три начина:
Първият подход е по-перспективен и практичен. Той дава възможност да бъде
наложен определен стил на оформяне на поредица от документи, които обикновено са
съставна част от един цял Web Site. Администратора на Web сървъра
(Webmaster) проектира поредицата от стилови формати и ги разполага във
текстов файл с разширение .css, достъпен за всички потребители на
сървъра. Всеки, който създава своя HTML страница може да ползва това описание
чрез вмъкване на команда <LINK> в кода на страницата,
например:
| <LINK REL=STYLESHEET HREF="http://www.mulmed.bg/sheets.css" TYPE="text/css"> |
STYLE
Вторият подход изисква вмъкването на стиловите дескриптори във всеки HTML
файл, с което може да се постигне разнообразие в оформянето на отделни страници.
Описанието на поредица от стилови формати, валидни в рамките на една HTML
страница, се извършва чрез команда <STYLE>,
която е от непразен тип. Командата и нейните атрибути се разполагат между
командите <HEAD>
и <BODY>.
| <HTML> <HEAD> Заглавна част и мета-описатели </HEAD> <STYLE TYPE="text/css"> <!-- Стилови дефиниции --> </STYLE> <BODY> Съдържание на документа </BODY> </HTML> |
Общият вид на командата за описание на стилови дефиниции е следния:
където:
| <html> <head> <title>Глобални CSS формати</title> <style type="text/css"> <!-- BODY {background-color:silver} H1 {color:brown} P.bigblue {color:navy; font-size:14pt} .price {font-style:italic; color:green} #SDC {font-weight:bold; color:red} --> </style> </head> <body> <center><h1>Приложение на елемент STYLE</h1></center> <br clear="all"> <p class="bigblue">Параграф със стилова дефиниция елемент от клас, изведен в син цвят и размер на буквите 14 пункта на сив фон. Следващият фрагмент от текст е <span id="SDC">изведен като получер в червено</span> при необходимост от акцент за конкретен факт или дата, например: <span class="price">22 Април 2000</span>, различна от основния текст в курсив и зелен цвят. </body> </html> |
На Екран 6.0 е показан резултатът от интерпретацията на кода. Примерът е изпълним директно от сървъра при проследяване на тази връзка.
Стиловите дефиниции се прилагат за HTML елементи, които управляват текстовия
поток, например <H1>,
<H2>,
<P> ,
UL, LI
или <EM>. Всяка стилова дефиниция формира едно правило, което се
състои от селектор (HTML елемент) и дефиниция (стилови формати).
Стиловата дефиниция съдържа две части - свойство и значение.
| HTML tag {property name:value} |
например:
| H1{color:blue} |
където,
Следващият пример представя комбинираното използването на различни стилови
дефиниции в рамките на един HTML документ. Отделните стилови свойства и техните
допустими значения са дадени в отделна таблица.
| <HTML> <HEAD> <TITLE>Пример за стилови дефиниции</TITLE> <STYLE type="text/css"> <!--- H1 {border-width: 1; border: solid; text-align: center; color: red} P {text-align: justify; color: blue; font-size: 12pt} OL LI {list-style-type: lower-roman; font: bold normal 12pt times, serif} UL LI {list-style-type: square} <--- </STYLE> </HEAD> <BODY> <H1>Центриран заглавен ред в рамка и червен цвят на буквите</H1> <P>Двустранно изравнен текстов параграф с големина на шрифта 12 пункта и син цвят на буквите</P> <OL> <LI> Първи елемент в подреден списък с водеща римска цифра <LI> Втори елемент в подреден списък с водеща римска цифра <LI> Трети елемент в подреден списък с водеща римска цифра </OL> <UL> <LI> Първи елемент в неподреден списък с водещ графичен символ квадрат <LI> Втори елемент в неподреден списък с водещ графичен символ квадрат <LI> Трети елемент в неподреден списък с водещ графичен символ квадрат </UL> </BODY> </HTML> |
Интерпретацията на HTML кода е представена на Екран 6.1. Стиловата дефиниция се оформя в самостоятелен блок непосредствено преди <BODY> секцията. По този начин той добива глобално значение за съдържателната част на документа. Илюстрацията обхваща дефиниции на заглавия, текстов параграф и списъчни структури с различни стилови свойства и атрибути. Заглавният елемент <H1> е в рамка с дебелина 1 пиксел (border-width: 1; border: solid), подравняването на текста е центрирано (text-align: center), с червен цвят на буквите (color: red). Дефиницията за параграф <P> включва двустранно изравняване на текста (text-align: justify), син цвят на буквите (color: blue) и големина на активния шрифт 12 пункта (font-size: 12pt).
Стиловите дефиниции са едно нововъведение в HTML 4.0 и не всички Web браузъри
поддържат и разпознават свързаните с тях свойства. Например, версиите на
Netscape Navigator до 3.04 не поддържат стилови дефиниции.
Непознатите команди се игнорират от браузърите, както и свързаните с тях
атрибути. В случая командата <STYLE> ще бъде игнорирана, а самите
стилови дефиниции ще бъдат изобразени като текст в полето на документа. За
предотвратяване на този негативен ефект е полезно редовете с дефиниции да бъдат
заградени в коментар ( <!--- ...... ---> ), както е показано в HTML
кода по-горе. Това предизвиква "скриване" на тези редове при интерпретацията им
от браузъри, които не поддържат стилови формати.
При формирането на стиловите правила могат да се описват отношения от типа родител-наследник. Това особено ясно се вижда при дефиниране на стилови парила за списъчни структури. Елементът <LI> задава съдържанието на компонент от слисък независимо от неговата структура. Известно е, че списъците в HTML езика биват подредени, неподредени и дефиниции. Например, ако е необходимо да бъде дефинирано различно правило за елемент <LI> за всеки отделен вид списък, то той се явява наследник на съответния списъчен вид. В HTML кода, посочен по-горе, за елемента <LI> са дадени две дефиниции, едната с родител подреден списък <OL> и друга с родител неподреден списък <UL>. От интерпретацията (Екран 6.1) се вижда, че дефиницията за подредения списък предизвиква извеждане на елементите му, предхождани от римски цифри (list-style-type: lower-roman) в получер нормален серифен шрифт с големина 12 пункта (font: bold normal 12pt times, serif). Дефиницията за неподредения списък съдържа указание за стила на водещия графичен маркер (list-style-type: square) - квадрат. Ефект на унаследяване на свойства се получава когато в документа се използват HTML елементи, за които липсва изрична стилова дефиниция. В този случай се унаследяват подразбиращите се значения от елемента <BODY>.
Стиловите дефиниции могат да бъдат задавани като самостоятелни елементи чрез команда <STYLE> или като стилов атрибут на HTML елемент, например <H1>, <P>, <DIV>, <SPAN> и други.
Елементът <DIV> се прилага за оформяне на блок от HTML команди в рамките на един документ. По принципа на унаследяване на свойствата, дефинираните в командата стилови атрибути се разпростиран върху всички елементи в блока, а елементите вън от него унаследяват свойствата установени по подразбираен в <BODY>.
Следният пример илюстрира използването на стилови атрибути в HTML елементи.
| <HEAD> <TITLE>Пример за стилови атрибути</TITLE> </HEAD> <BODY> <DIV STYLE="color: green"> <H1 ALIGN=center>Заглавен ред</H1> <P>Текстов параграф със зелен цвят на буквите.</P> </DIV> <P>В този текстов параграф <SPAN STYLE="color: blue">две думи </SPAN> са в син цвят.</P> </BODY> |
Интерпретацията на кода е дадена на Екран 6.2.
Използването на стилови атрибути вместо стилови дефиниции е оправдано за малки или чисто персонални HTML документи. В общия случай използването на командата <STYLE> по двата възможни начина е за предпочитане. Това улеснява поддържането на страниците в един Web Site, особено когато броят им е значителен и се търси единен стил в представянето на информацията.
С помощта на атрибутът CLASS могат да се задават варианти на стилови дефиниции. В
примера по-долу са дефинирани стилови формати за елемента
<H1> и <H2>. Отделно е дефиниран стилов
формат от типа class без да бъде на първо време обвързан с конкретен
HTML елемент (.black {color: black}). В секцията
<BODY> тази дефиниция се използва за елемента парагарф
(<P>), като със същия успех може да се ползва и за
произволен друг елемент.
| <HTML> <HEAD> <TITLE>Атрибут Class</TITLE> </HEAD> <STYLE type="text/css"> H2.blue {color: blue} H1.red {color: red} .black {color: black} #mydef {color: green; font: bold italic 12pt times, serif} </STYLE> <BODY> <H1 CLASS=red>Заглавен ред в червено</H1> <H2 CLASS=blue>Заглавен ред в синьо</H1> <P CLASS=black>Текстов параграф в черно</P> <P ID=mydef>Текстов параграф с потребителска стилова дефиниция</P> </BODY> </HTML> |
Дефиниция от вида #mydef {color: green; font: bold italic 12pt times,
serif} определя потребителско правило и може да се прилага в текста на
документа чрез обръщение към неговия идентификатор, например - <P
ID=mydef>. Интерпретацията на този HTML код е дадена не Екран
6.3.
В таблица са представени свойствата на стиловите дефиниции и допустимите им атрибути. Част от тях са представени като размери в различни мерни единици:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
EM { font-size:150%} |
|
|
|
|
P { font: normal small-caps 120%/120% fantasy } |
|
|
|
|
EM{color:rgb(255,0,0)} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background-repeat: repeat-y; } |
| background-attachment |
|
|
|
|
|
|
|
right top } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
 |
 |