Логічне і фізичне форматування

Класичний HTML версії 3.2, найбільш поширений на даний момент в
Мережі, надає нам засоби фізичного форматування документів, для чого
є спеціальні теги (наприклад, теги <font>, <b>, <i>) і
безліч різних атрибутів (size, color, height, width і т. п.). Особливості
web-форматування примушують нас знову і знову прописувати ці теги і атрибути
для кожного нового абзацу, що, звичайно, сильно збільшує розмір коду сторінок.
Крім того, при такому способі форматування у разі аналізу структури
документа залишається незрозумілим, чому дане слово виділено жирним шрифтом –
просто для краси або ж щоб звернути на себе особливу увагу кінцевого
користувача? Якщо жива людина ще в стані так-сяк розібратися в
логічних побудовах сторінок на класичному HTML, то про пошукових машинах або,
наприклад, голосових броузерах цього не скажеш. Їм вийми і поклади чисту логіку
в структурі сторінки. Саме через таку <непідвладності> логічному
аналізу даний спосіб форматування був названий фізичним форматуванням. У
противагу йому при створенні нової специфікації HTML 4.0 на чільне місце було
поставлено логічне форматування, тобто таке форматування, при якому
структура та оформлення документа були б чітко розділені. Цей спосіб
форматування рекомендований до застосування інтернет-консорціумом, так як
надає розширені можливості пошуку інформації в Мережі, дозволяє більш
точно структурувати і аналізувати інформацію за допомогою пошукових машин, а
також істотно зменшує розмір сторінок і час їх повного завантаження.
Реалізується поділ структури та оформлення документа як раз за допомогою CSS.

Варто відзначити той факт, що зачатки логічного форматування
були присутні і в класичному HTML – теги <h1>, <h2>,
<blockquote>, безумовно, сприяли поділу документів на
деякі логічні блоки. Але багато авторів сторінок використовували, та й досі
день продовжують використовувати ці теги не за призначенням: у зв'язку зі убогістю
коштів для оформлення сторінки теги заголовків, наприклад, використовувалися для
виділення таких елементів на сторінці, які насправді заголовка не
були. CSS ж надають достатню кількість засобів оформлення, що
дозволяє більш точно слідувати правилам логічного форматування і
дійсно відокремлювати структуру сторінки від її візуального уявлення.

Призначення стилів окремих елементів сторінки


CSS дозволяють призначити власний стиль візуального представлення будь-якого
тегу HTML, в тому числі тегу <body>. Якщо стиль заданий для тега
<body>, він успадковується всіма елементами (абзацами, заголовками і т. д.),
поміщеними всередині цього тега-контейнера, в разі відсутності власних стилів
для цих елементів. Таким чином, нам уже не потрібно прописувати теги
<font> і атрибути color, size і т. п. для кожного абзацу на сторінці –
досить задати певний стиль для тега <body>, і всі абзаци на сторінці
будуть відображені у відповідності з цим стилем. Як же це зробити?

Припустимо, ми хочемо, щоб всі абзаци відображалися шрифтом Times New Roman
розміром 12 пунктів темно-зеленого кольору. Для цього слід прописати атрибут
style тега <body>, присвоївши йому відповідне значення. Синтаксис такий:

<Body style = "font-family:" Times New Roman ", serif; font-size:
12pt; color: darkgreen;">

Таким чином, всі абзаци на сторінці відображені так, як ми захотіли, причому
код не засмічений тегами <font> та їх атрибутами. Уявляєте, яка
економія розміру файлу, якщо ваша сторінка складається з великої кількості
тексту!

Зверніть увагу – коли ми задавали накреслення шрифту, після назви Times
New Roman ми вказали накреслення serif, що позначає будь-який шрифт із зарубками.
Якщо на машині кінцевого користувача не встановлений шрифт Times New Roman,
броузер підставить замість нього будь-який з наявних шрифтів із зарубками, і
відображення сторінки буде максимально наближене до того, що ви задумали.
Причому наведений приклад буде зрозумілий і для IE (4.0 і вище), і для NN (4.0 і
вище). Хоча треба відразу обмовитися, що Netscape Navigator підтримує далеко
не всі можливості, надані CSS і DHTML, і це, безумовно, не
збільшує числа його шанувальників.

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

Призначення стилів кількох елементів однієї сторінки – створення впровадженої
таблиці стилів

Поки мова у нас йшла про завдання лише одного стилю для одного елемента. А
тепер ми навчимося створювати саме таблиці стилів.

Припустимо, ми хочемо, щоб всі абзаци на сторінці виглядали, як у попередньому
прикладі, всі заголовки першого рівня відображалися шрифтом Arial зеленого кольору
напівжирного розміром 16 пунктів, а всі заголовки другого рівня –
шрифтом Helvetica розміром 14 пунктів напівжирного курсиву
жовто-зеленого кольору. Для цього нам знадобиться створити в <голові>
сторінки (в будь-якому місці між тегами <head> і </ head>) впроваджену
таблицю стилів, в якій ми пропишемо кілька правил відразу. Для цього створюємо
тег-контейнер таблиці стилів, що починається відкриває тегом <style> і
закінчується закриваючим тегом </ style>. Усередині цього тега-контейнера
ми вільні задати будь-яку кількість правил CSS, що складаються з селектора (назви
тега HTML, до якого буде застосовуватися правило) і його визначення
(Безпосередньо набору засобів форматування), укладеного у фігурні дужки.
Синтаксис для наведеного вище прикладу такий:

<head>

<style>
body {
font-family: “Times New Roman”, serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}
</style>

</head>

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

Призначення стилів одночасно для декількох сторінок сайту

Крім вбудовування та впровадження для зв'язку CSS і HTML використовуються способи
імпортування та зв'язування таблиць стилів. Це, безумовно, найкращі способи
для надання єдиного стильового оформлення кількох (чи навіть усім) сторінкам
одного сайту. При цьому вся таблиця стилів зберігається в одному файлі (розширення
файлу повинна бути стандартним -. css).

Ось приклад вмісту такого файлу (наприклад, my.css):

body {
font-family: “Times New Roman”, serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}

Зверніть увагу: теги <style> і </ style> всередині файлу таблиці
стилів не використовуються – розширення. css явно вказує броузеру на те, що файл
є таблицею стилів. Один такий файл може бути пов'язаний відразу з декількома
сторінками (або імпортований відразу в кілька сторінок). У html-файлі для
зв'язування потрібно прописати в будь-якому місці між тегами <head> і
</ Head> наступний рядок:

<head>

<link rel="stylesheet" type="text/css" href="my.css">

</head>

У цьому рядку вказується, що пов'язується файл є таблицею стилів
(Rel = "stylesheet"), формат цього файлу -. Css1 (type = "text / css") і знаходиться він
в тій же директорії, що і файл html, або має інший URL-адресу
(Href = "my.css"). Очевидно, що цей рядок ми можемо прописати в будь-якому (або на
всіх) з наших html-файлів. Таким чином, єдине стильове оформлення буде
прописано для декількох сторінок відразу.

Зверніть увагу на те, що inline-стилі (стилі, прописані для окремих
елементів сторінки за допомогою атрибуту style) і впроваджені стилі (стилі,
прописані в <голові> сторінки всередині тега-контейнера <style>)
мають перевагу перед пов'язаними стилями при аналізі сторінки броузером.
Отже, при використанні пов'язаних стилів ми завжди маємо можливість
перепризначити стиль саме для даного конкретного елемента сторінки.

Для імпортування файлу таблиці стилів (у тому числі з іншого сервера) ми
повинні прописати в будь-якому місці між тегами <head> і </ head> всередині
тега-контейнера <style> наступний рядок:

<head>

<style>

@import: url (my.css);

</style>

</head>

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

1) inline-стилі (вбудовані за допомогою атрибуту style безпосередньо в теги
документа) – найвищий пріоритет, будуть застосовані броузером в будь-якому випадку, навіть
якщо виникає конфлікт із впровадженими або зовнішніми стилями;

2) впроваджені стилі (перераховані в теге-контейнері <style> в
<Голові> документа) – трохи менший пріоритет, будуть застосовуватися у всіх
випадках, крім випадків виникнення конфлікту з inline-стилями (при
виникненні такого конфлікту будуть застосовані inline-стилі);

3) імпортовані стилі (стилі зовнішнього файлу. Css, пов'язані з документом з
допомогою властивості @ import в тезі-контейнері <style>) – ще менший
пріоритет, будуть застосовуватися в тих випадках, коли відсутні аналогічні
правила CSS серед вбудованих і впроваджених стилів;

4) пов'язані стилі (стилі, приєднані до html-файлу за допомогою тега
<link>) – найменший пріоритет, будуть застосовані тільки після того, як
броузер переконається у відсутності аналогічних правил у всіх інших типах стилів.

Таким чином, знаючи, в якій послідовності броузер аналізує таблиці
стилів, ми можемо поставити одну загальну пов'язану таблицю для всіх сторінок сайту і
при цьому гнучко управляти стилями окремих сторінок та окремих елементів на
сторінці. Саме з цією особливістю і пов'язана слово <каскадні> у
назві CSS (cascading style sheets) – кілька таблиць стилів, приєднаних
до html-файлу, прокочуються через аналізатор (броузер) якимсь <каскадом> у
порядку їх пріоритетності.

Але на цьому можливості гнучкого налаштування візуального оформлення сторінки з
допомогою таблиць стилів не закінчуються. Існують ще кошти для різного
подання однотипних елементів за допомогою однієї таблиці стилів – про них ми
зараз і поговоримо.

Селектори CSS


Селектор class


Припустимо, ми хочемо створити сторінку, на якій буде два види абзаців
<p>, причому обидва види будуть постійно чергуватися і часто повторюватися.
Типовий приклад такої сторінки – інтерв'ю, в якому чергуються питання
журналіста та відповіді інтерв'юйованого. Природно, при створенні такої сторінки
ми захочемо візуально відокремити питання і відповіді один від одного. Якщо б нам
довелося це робити тими засобами CSS, які ми розглянули вище, то
довелося б створювати дві різні таблиці стилів. На щастя, в цьому немає
необхідності. Ми можемо створити в одній таблиці стилів два різних класу
абзаців за допомогою селектора класу. Це буде виглядати так:

<html>
<head>

<style>

p.ask {
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px
}
p.answer {
font-family: “Times New Roman”, serif;
font-size: 12 pt; color: black;
}

</style>

</head>
<body>

<p class="ask"> Питання журналіста </ p>
<p class="answer"> Відповідь інтерв'юйованого </ p>

</body>
</html>

У наведеному прикладі питання журналіста буде відображено шрифтом Arial
сірого кольору, напівжирним, курсиву, розміром 10 пунктів з відступом
15 пікселів від лівого краю сторінки. Відповіді ж будуть відображені шрифтом Times
New Roman розміром 12 пунктів чорного кольору. Важливо не забувати прописувати
параметр class різних класів абзаців безпосередньо в коді html. Ви можете
створювати будь-яку кількість класів для будь-яких елементів сторінки.

Селектор id


Візьмемо інший випадок. Припустимо, ви хочете створити на сторінці будь-які
унікальні елементи, яких у подальшому плануєте звертатися з програм
JavaScript. Можливо, ці елементи будуть повторюватися на інших сторінках, і ви
хотіли б поставити їм єдине оформлення за допомогою CSS. На цей випадок у
каскадних таблицях стилів є можливість присвоєння унікальним елементам
ідентифікаторів (id). Найбільш часто ідентифікатори використовуються для елементів
форм, які в специфікації HTML 4.0 мають повну або обмежену підтримку
CSS (залежно від елемента). Ось приклад призначення ідентифікатора і правил
CSS таких елементів:

<html>
<head>

<style>

input#green {color: green;}
input#red {color: red;}

</style>

</head>
<body>

<form …>
<p> Текст, що вводиться в це поле, буде відображений зеленим кольором:
<input type="text" id="green" name="info1" size="20"> </ p>
<p> Текст, що вводиться в це поле, буде відображений червоним кольором:
<input type="text" id="red" name="info2" size="20"> </ p>
</form>

</body>
</html>

Аналогічним чином унікальні ідентифікатори можуть бути призначені будь-якому
кількості будь-яких елементів сторінки. Це може бути корисно для звернення до
елементу з програми на мові JavaScript і зміни стилю його відображення в
відповідь на дії користувача, що дозволяє створювати різні динамічні
ефекти.

Контекстні селектори


Припустимо, ми створили таблицю стилів, згідно з якою всі заголовки першого
рівня на сторінці відображаються червоним кольором на сірому фоні, всі абзаци –
зеленим кольором на жовтому фоні, а всі виділені за допомогою тега <em> 1
слова усередині абзаців – чорним кольором на сріблястому тлі. Код таблиці стилів,
як ви вже здогадалися, при цьому виглядає так:

h1 {
color: red;
background-color: gray;
}
p {
color: green;
background-color: yellow;
}
em {
color: black;
background-color: silver;
}

Припустимо, ми хочемо також виділити якісь слова в заголовку за допомогою
того ж тега <em>, але нас не влаштовує поява чорного кольору тексту на
сріблястому фоні в заголовку. Ми хочемо виділити слова в заголовку бордовим
кольором на сірому фоні. Для цього існують контекстні селектори. Запис
правила, яке ми для цього додамо в таблицю стилів, буде виглядати так:

h1 em {
color: #CC0000;
background-color: gray;
}

А ось приклад коду сторінки з використанням цього контекстного селектора:

<html>
<head>

<style>

h1 {
color: red;
background-color: gray;
}
p {
color: green;
background-color: yellow;
}
em {
color: black;
background-color: silver;
}
h1 em {
color: #CC0000;
background-color: gray;
}

</style>

</head>
<body>

<h1> Це – заголовок першого рівня з <em> виділеним </ em>
словом </ h1>
<p> А це – звичайний абзац з <em> виділеними словами </ em>
</p>

</body>
</html>

На сьогодні це все. Наступного разу ми поговоримо про правила форматування
блокових елементів сторінки, про позиціонування елементів і про інших цікавих
і корисних можливості, що реалізуються з використанням CSS.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*