Елементи DIV і SPAN. Таблиці стилів.

HTML -документ може мати структуру, для якої недостатньо наявні елементи HTML. Елементи DIV і SPAN разом з атрибутами id і class забезпечують загальний механізм додавання структури в документи. Ці елементи визначають вбудовувану інформацію (SPAN) або інформацію рівня блоку (DIV), але не накладають ніяких інших виразів для представлення контексту. Припустимо, необхідно згенерувати документ у форматі HTML на основі бази даних інформації про клієнтів. Оскільки HTML не включає елементів для ідентифікації таких об'єктів як "клієнт", "номер телефону", "адреса електронної пошти" і так далі, використовуються елементи DIV і SPAN для досягнення потрібних ефектів структури і представлення. Для структуризації інформації може бути використаний елемент TABLE таким чином:

<DIV id="client-boyera" class="client">

<P><SPAN class="client-title">Інформація про клієнта: </SPAN>

<TABLE class="client-data">

<TR><TH>Прізвище:<TD>Boyera</TR>

<TR><TH>Ім'я:<TD>Stephane</TR>

<TR><TH>Тіл:<TD>[phone]</TR>

<TR><TH>Email:<TD>[e-mail]</TR>

</TABLE>

</DIV>

Для елементів DIV і SPAN наявність початкового і кінцевого тега обов'язкова. Відмінність між цими елементами полягає у візуальному представленні - браузери ставлять переведення рядка до початку і після закінчення елементу DIV. У разі елементу SPAN це не відбувається.

Найчастіше ці елементи застосовуються у поєднанні з певними стилями, що дають можливість візуально представити структуру документу. Стиль - це набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки. Визначення стильового оформлення HTML -документа проводиться за допомогою каскадних таблиць стилів (CSS - Cascading Style Sheets).

Існує цілих чотири способи зв'язування документу і таблиці стилів:

· Зв'язування - дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок HTML

· Впровадження - дозволяє задавати усі правила таблиці стилів безпосередньо в самому документі

· Вбудовування в теги документу - дозволяє змінювати форматування конкретних елементів сторінки

· Імпортування - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері

Зв'язування - проводиться за допомогою елементу LINK:

<LINK REL="stylesheet" TYPE="text/css" HREF="URL">

Впровадження - варіант, при якому опис стилів розташовується в документі, усередині елементу HEAD з використанням елементу STYLE:

<STYLE type="text/css">

<-- приховуємо таблицю для старих браузерів

-->

</STYLE>.

Параметр type="text/css" є обов'язковим і служить для вказівки браузеру використовувати CSS.

Вбудовування в теги документу - произврдится за допомогою параметра style, використовуваного в більшості елементів HTML. Цей метод небажаний, він призводить до втрати однієї з основних переваг CSS - можливості відділення інформації від опису оформлення інформації.

Імпортування - в елементі STYLE можна імпортувати зовнішню таблицю стилів за допомогою властивості @import таблиці стилів:

@import: url(mystyles.css);

Його слід задавати на початку стильового блоку або зв'язуваної таблиці стилів перед завданням інших правил. Значення властивості @import являється URL файлу таблиці стилів.

Розглянемо правила формування таблиць стилів. Усі оголошення CSS (селекторы) записуються у фігурних дужках:

ЕЛЕМЕНТ {характеристика: величина}

Існує досить великий набір характеристик, визначених для кожного елементу. Ці характеристики визначають властивості шрифту, тексту, кольору і фону, властивості, пов'язані з розмірами і рамками, і так далі.

Деякі характеристики будуть розглянуті нижче.

Наприклад, щоб забарвити усі заголовки першого рівня в червоний колір, можна написати:

H1 {color: red} чи H1 {color: #FF0000}

Групування. Можна присвоїти відразу групу властивостей декільком елементам. Для цього елементи перераховуються через кому, а кожна властивість відділяється від іншого крапкою з комою:

H1, H2 {font - size: 14pt; font - family: Arial; text - decoration: underline}

Цей запис означає, що усі заголовки першого і другого рівня відображуються підкресленими з використанням шрифту Arial величиною 14 пікселів.

 

 

Спадкоємство. У документі HTML деякі елементи можуть міститися усередині інших елементів. Якщо для зовнішнього елементу визначені правила форматування, а для вкладеного - ні, вкладений елемент наслідує правила форматування елементу-батька.

Деякі властивості не наслідують вкладеними елементами від своїх батьків, наприклад властивість background, але за умовчанням вкладені елементи відображуватимуться з фоном батьківського елементу.

Спадкоємство корисне при завданні значень властивостей, що застосовуються до документу за умовчанням. Для цього досить задати усі властивості для елементу, що породжує усі інші елементи сторінки HTML. Таким елементом

є тіло документу, визначуване BODY:

BODY {color: black;

font - family: "Times New Roman";

font - size: 12 pt;

background: url(picture.gif) white;}

 

Приведені правила задають форматування документу за умовчанням: чорним шрифтом Times New Roman з фоном, графічним файлом picture, що задається.gif, або на білому фоні, якщо файл недоступний.

Використання спадкоємства дозволяє використовувати для форматування не абсолютні, а відносні величини. Наприклад, використовуючи правила форматування документу, описані вище, ми можемо встановити властивості для елементу SPAN таким чином:

SPAN {font - size: 120%}

Контекстні селекторы. Спадкоємство дозволяє застосовувати стилі контекстного. Це означає, що селектор буде застосований до елементу тільки у тому випадку, якщо він знаходиться усередині певного елементу. Наприклад, визначення

P SPAN {font - size: 120%} означає, що розмір шрифту для елементу SPAN буде збільшений на 120% тільки у тому випадку, коли цей елемент знаходиться усередині елементу P. У усіх інших випадках використовуватимуться або значення за умовчанням (визначені в браузері), або визначені в таблиці стилів для цього елементу значення.

Каскади. Ідея каскадних таблиць припускає, що є можливість одночасного використання різних таблиць стилів для одного документу. У кожного браузеру є свій стиль, визначений за умовчанням для представлення документів. Коли браузер завантажує HTML -документ, він показує його своїм стилем. Якщо ж документ посилається на таблицю стилів, будуть відображені особливості, задані в цій таблиці. Якій таблиці буде віддано перевагу, задається деякою системою правил:

· Визначається, чи немає протиріч в завданні параметрів якого-небудь елементу. Якщо є, використовуються батьківські параметри. Якщо немає батьківських параметрів, використовуються параметри за умовчанням.

· Якщо присутній конфлікт між авторським стилем і стилем, визначеним за умовчанням, перевага віддається авторським параметром.

· Якщо конфліктують два стилі і один застосовується тільки в цій ситуації, а інший - в усіх випадках, перевага віддається першому (пріоритет "по специфічності").

Така система пріоритетів дозволяє одному документу посилатися на декілька таблиць стилів.

Класи. CSS реалізує можливість привласнювати стилі не усім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу", що привласнюється будь-якому елементу сторінки. Клас дозволяє задати різні правила форматування для одного елементу певного типу або усіх елементів документу. Ім'я класу вказується в селекторі правила після імені тега і відділяється від нього точкою. Можна визначити декілька правил форматування для одного елементу і за допомогою параметра CLASS відповідного тега застосовувати різні правила форматування. Наприклад, можна визначити два класи для відображення заголовка першого рівня:

H1.red {color: red}

H1.blue (color: red; background - color: blue}

У тексті документу посилання на відповідний клас задається в параметрі CLASS:

<H1 CLASS="red">Червоний шрифт</H1>

<H1 CLASS="blue">Червоний шрифт на синьому фоні</H1>

У наведеному прикладі класи задавалися для різного відображення елементів одного типу. Якщо клас повинен застосовуватися до усіх елементів документу, то в селекторі задається ім'я класу з лідируючою точкою без вказівки конкретного елементу:.red {color: red}.blue (color: red; background - color: blue}

Тепер два класи red і blue можна застосовувати до будь-яких елементів документу:

<P CLASS="red">Червоний шрифт</P>

<P CLASS="blue">Червоний шрифт на синьому фоні</P>

Перший абзац відіб'ється червоним шрифтом, а другий - червоним шрифтом на синьому фоні.

Розглянемо деякі характеристики, визначувані в таблицях стилів.

 

Властивості шрифту

font-family	Використовується для указания шрифта та шрифтового сімейства, котрым будет відображаться элемент. P {font-family: Times New Roman, sans-serif;}
font-style	Задає спосіб зображення шрифту: normal - Нормальний (за умовчанням), italic - Курсив, oblique - Похилий. P {font-style: italic;}
font-weight	Визначає міра жирності шрифту за допомогою параметрів: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 B {font-weight: bolder;}
font-size	Встановлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так і абсолютній величині (пункти, піксели, сантиметри) H1 {font-size: 200%;} H2 {font-size: 150px;}