Стилі в html

Існує ще один прийом позиціонування елементів і досягнення зовнішніх ефектів, які можуть прикрасити сторінку і привернути до неї увагу Новомосковсктелей. Цей прийом заснований на визначенні користувальницьких стилів і завданні таблиці стилів. Таблиця стилів - це просто деяка структура опису властивостей елемента. Не шукайте тут який-небудь прямокутної сітки. Якщо таблиця стилів задана, то різні документи можуть просто посилатися на цю таблицю і не містити велику кількість атрибутів в тегах форматування типу <Н1>, і т.п.

Каскадні таблиці стилів (CSS, Cascading Style Sheets) містять опис формату частини або всього тексту, координати розташування елементів і інші параметри. Завдання стилю забезпечується за допомогою як тега використовуються всередині тегів заголовка файлу і . а атрибут STYLE - в тезі заголовка розділу (<Н1>, <Н2>.

), А також в тезі . в тезі виділення фрагмента
та багато інших.

застосування тега


<Н1>Це стиль HI. Колір червоний
<Н2>Це стиль Н2, такий же, як і HI. Колір червоний
Це - звичайний стиль за замовчуванням

Ми можемо створити таблицю стилів, закріпивши за нею ім'я. Це ім'я задається як звичайне ім'я, але з точкою в якості першого символу. Тоді в тегах ми можемо звертатися до цієї таблиці по її імені, використовуючи атрибут Сlass = імя_стіля. де ім'я стилю вживається вже без точки.
Наприклад, можна задати стиль так:

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

Розглянемо приклад, що створює ефект, який без завдання стилю був би досяжний тільки за допомогою графіки. Ми накладаємо тексти друг на друга. Ця можливість далі буде використана для створення ефекту об'ємного тексту (так званого ЗD-ефекту). Крім того, можливість накладення (часткового перекриття) фрагментів сторінки часто використовується в дизайні реальних сторінок. Вдань прикладі застосовується тег

для виділення фрагмента HTML-документа. Зверніть увагу, як всередині визначення стилю тега BODY визначаються інші стилі з іменами тінь, основа, шар 1 і шар 2. Це і є те, що розуміється під каскадної таблицею стилів.



приклад CSS
BODY
.тінь font-size: 27Opx; 1ine-height: 270px;
font-family: Times)
.основа (color: red; weight: 900; margin-top: -230px; font-size: 220px;
line-height: 250px; font-family: Times)
. слой1 (color: black; margin-top:

130px; weight: medium; ont-size: 65px;
line-height: 65px; font-family: Arial>
.слой2 line-height: 45px; font-family: Arial>



Приклад каскадного стилю





Ми / DIV>
Ми / DIV>
зробили це без всякої графіки

використовуючи тільки стилі тексту



Мал. 665. Приклад каскадного стилю

У наведеному прикладі використані тег

і атрибут CLASS. тег
застосовується для завдання частини сторінки (фрагмента документа). Він нічого не форматує, а лише позначає фрагмент тексту, який розглядається як єдиний об'єкт. Атрибут CLASS дозволяє послатися на таблицю стилів і тим самим поставити стиль представлення тексту, розташованого між тегами
і . Зверніть увагу на те, як в таблиці стилів визначається стиль: набору властивостей в фігурних дужках присвоюється ім'я, перед яким ставиться крапка. Надалі йдуть посилання на ці імена за допомогою атрибута CLASS для застосування раніше визначеного стилю. Ідея проста: спочатку визначається щось, а потім використовується це визначення шляхом посилання на нього.

У цьому прикладі тексти визначаються як би в шарах, які накладаються один на одного. Так, спочатку виводиться шар тінь, потім на нього накладається шар основа, а потім - шар 1 і шар 2. Порядок, в якому шари накладаються один на одного, задається порядком проходження фрагментів тексту, позначених тегом

. Власне перекриття шарів забезпечується застосуванням негативних значень властивості margin-top (відступ зверху).

У розглянутому вище прикладі були використані наступні властивості:

  • margin-top - відступ зверху;
  • color-колір;
  • font-size - розмір шрифту;
  • font-family - сімейство шрифтів;
  • weight - ступінь «жирності» шрифту;
  • line-height - висота рядка.

Використовуючи негативні значення властивості margin-top. можна накласти один текст на інший.
Крім розглянутих вище способів завдання стилів, можна застосовувати атрибут STYLE. вставляється в теги заголовків, абзацу <Р>. тіла .

і . В цьому випадку стиль задається в наступному форматі:

Опис властивостей стилю полягає в лапки і містить властивості та їх значення, перераховані через крапку з комою, як це робилося при використанні тега