Основні теоретичні відомості 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Основні теоретичні відомості



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

CSS-файли

У технології, що розглядається в даній роботі, опис стилів зберігається в окремому файлі, який має розширення.css (для стилів CSS) або.jss (для стилів JSSS - JavaScript Style Sheet, розроблених компанією Netscape). Такий файл є звичайним ASCII-файлом (як і HTML-файл). Для звернення до файлу зовнішніх стилів йому привласнюється ім'я, наприклад, style.css.

Змістовна частина CSS-файлу складається тільки з аркуша стилів. Для пояснень у ці файли можуть включатися коментарі. Кількість правил, описуваних у файлі стилів, не обмежено.

Приклад CSS-файлу:

 

P.red {font-weight: bold; color: red}

SPAN {font-style: italic; font-size: 14pt}

.yellow {background-color: yellow; font-family: Arial}

 

Як видно з прикладу, CSS-файл не містить яких-небудь заголовків або кінцевих елементів.

Звертання до зовнішнього аркуша стилів (елемент LINK)

Основним інструментом підключення до HTML-документа зовнішніх аркушів стилів є одиночний тег <LINK>. Цей тег розташовується в заголовній частині HEAD. До складу тегу <LINK> входить ряд атрибутів, з яких три є обов'язковими:

· type ="text/ess" - указує браузеру, що застосовується, текст формату CSS.

· href - задає URL-адресу файлу зовнішнього аркуша стилів. Якщо CSS-файл розташовується в тому ж каталозі, що й поточний документ, то вказується тільки ім'я файлу, наприклад, style.css.

· rel=“stylesheet” - визначає відношення між поточним документом і об'єктом посилання href. Значення stylesheet указує на те, що елемент LINK установлює зв'язок із зовнішнім аркушем стилів.

 

Приклад:

 

<HTML>

<HEAD>

<TITLE>Назва сторінки</TITLE>

<LINK rel="stylesheet" href = "http: //www.generaledu.org/ Styles/ mainst.ess " type = "text/css">

</HEAD>

<BODY>

<! -зміст документа ->

</BODY>

</HTML>

 

Зауваження

Один елемент LINK установлює зв'язок тільки з одним CSS-файлом. Для звернення, наприклад, до трьох файлів, що містять аркуші стилів, у HTML-документ необхідно ввести три елементи LINK.

Запис CSS-правил.

Наступні прийоми запису CSS-правил спрощують запис та читання аркушів стилів.

1) Порядковий запис стильових властивостей. Такий запис стильових властивостей прийнятий для спрощення читання аркушів стилів. Прикладом порядкового запису стильових властивостей

 

Н2.blue {

color: blue;

font-family: Arial;

text-align: right

}

2) Скорочена форма запису. Такий запис стильових властивостей дозволяє призначати відразу кілька властивостей за допомогою одного ключового слова, наприклад, для властивостей шрифтів. Значення властивостей записуються після ключового слова font і впорядковуються у вигляді наступної послідовності:

 

font: font-style font-variant font-weight font-size/line-height font-family

 

Значення властивостей у скороченому записі представляються списком з одним розділовим символом - пробілом, наприклад:

 

DIV {font: italic small-caps bold 14pt/18pt serif}

 

Тут дві властивості, записані через косу риску, указують на розмір шрифту (font-size) і міжрядковий інтервал (line-height) відповідно. Пропущена в записі властивість приймає значення за замовчуванням.

3) Коментарі. Початок коментаря відзначається косою рискою із зірочкою (/*), а кінець - зірочкою з косою рискою (*/). Між цими символами розміщається будь-яке текстове повідомлення, наприклад:

 

/* Це аркуш стилів, оформлений окремим файлом */

 

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

 

/* font-family:arial; font-style:italic;*/

 

4) Групування селекторів і визначень. Якщо відображення елементів задається однаковими CSS-правилами, то доцільно виконати групування селекторів. Наприклад, замість

 

H3 { font-family:sans-serif}

H4 { font-family:sans-serif}

 

використовують

 

H3, H4 { font-family:sans-serif}

 

Групування визначень здійснюється шляхом перерахування визначень через крапку з комою. Наприклад, замість

H2 {font-size: 11pt}

H2{line-height: 12pt}

H2{font-family: arial}

H2{font-style: oblique}

 

використовують

 

H2{ font-size: 11pt;

line-height: 12pt;

font-family: arial;

font-style: oblique}

 

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

 



Поделиться:


Последнее изменение этой страницы: 2020-12-09; просмотров: 103; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.190.156.212 (0.005 с.)