Інші групи стильових властивостей

Крім розглянутих вище властивостей стилів, у специфікації CSS є й інші, рідше використовувані властивості. Серед них назвемо, насамперед, властивість display, що визначає відображення елементів документа. Звичайно ця властивість використовується зі значенням none, що відключає вивід елемента на екран. Інші значення цієї властивості дозволяють перетворити абзац у рядковий елемент (значення inline), перетворити рядкової елемент у блок (значення block), змусити елемент «поводитися» як список (значення list- item). Однак подібні перетворення ускладнюють аналіз сторінки й рідко використовуються.

У CSS є група властивостей інтерфейсу користувача, у яку входить, наприклад, властивість cursor. Ця властивість визначає форму покажчика миші, яку він приймає при наведенні на елемент що форматується. Перелічимо лише деякі значення цієї властивості:

· hand (рука);

· crosshair (перехрестя);

· move (перехрестя зі стрілками, що відповідає можливості переміщення об'єкту);

· e- resize і w-resize (горизонтальні оконтурені стрілки);

· n- resize і s-resize (вертикальні оконтурені стрілки);

· ne- resize і nw-resize (похилі оконтурені стрілки);

· help (стрілка зі знаком питання).

 

Псевдокласи й псевдоелементи

У CSS прийнята модель форматування елементів із урахуванням їх позиції в структурі документа. Але така модель не дозволяє досягти деяких спеціальних ефектів, наприклад, задати певний стиль для першого рядка в текстовому блоці. Для форматування фрагментів документа, які не описуються спеціальними тегами, у CSS вводяться псевдоелементи й псевдокласи. Їхнє введення розширює можливості аркушів стилів.

Стилі посилань

За допомогою псевдокласів можна легко назначити стиль гіперпосилань. У цьому випадку стильові правила застосовуються до елемента прив'язки А. У специфікації CSS передбачені наступні псевдокласи посилань:

· link - застосовується для відображення посилань, які не відвідувалися. Наприклад,

 

A:link{color: blue};

 

· visited - виділяє посилання, що були відвідані. Наприклад,

 

A:visited{color:yellow}.

 

Псевдокласи гіперпосилань інтерпретуються браузерами тільки стосовно до гіперпосилань, тому А:link{color:blue} і:link{color:blue} будуть інтерпретовані однаково.

 

Зауваження

Характерною ознакою псевдокласа є двокрапка, яка застосовується як роздільник після позначення типу елемента. При запису псевдокласів посилань допускається можливість того, що назва елемента А буде опущена. Якщо в HTML-документі є аркуш стилів з псевдокласами посилань, то всі посилання в документі будуть відображатися за заданими правилами.

 

Динамічні псевдокласи посилань

Для виділення гіперпосилань залежно від дій користувача на Web-сторінці застосовуються динамічні псевдокласи:

· active - установлює стиль відображення активних гіперпосилань; наприклад, правило

 

A:active{color:green};

 

приводить до відображення зеленим кольором посилання, на яке користувач клацнув мишкою;

· hover - визначає відображення посилання при наведенні на неї покажчика миші, наприклад,

 

A:hover{color:green; font-weight:bold};

 

· focus - застосовується для завдання особливостей відображення полів уведення даних.

Стилі фрагментів текста

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

· first-line - призначений для завдання стильового правила першого рядка тексту. Цей псевдоелемент застосовується тільки до блоків;

· first-letter - застосовується для завдання стилю першого символу (наприклад, у рядку). Цей псевдоелемент дозволяє відтворити на Web-сторінці типографський прийом буквиці.

 

Завдання до лабораторної роботи

 

Завдання 1.

1) Створіть на диску папку WEB1.

2) Скопіюйте в неї файли «На рыбалку.bmp» (перейменуйте його в fish.bmp) і «Голубые кружева 16.bmp» (перейменуйте його в pict.bmp), «Рододендрон.bmp» (перейменуйте його в в flo.bmp), «Сиреневый пух.bmp» (перейменуйте його в pic2.bmp). Усі вказані файли знаходяться в папці WINDOWS.

3) Наберіть наступний код і запустіть отриману сторінку. 

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

<STYLE>

  .image1 { background- image:url(fish.bmp); background-repeat:repeat-y; background-color:#000099; font-family:cursive; font-size:18pt; font-style:oblique; font-weight:700; color:#FFFF99; border-color:#FF0000; border-style:ridge; border-width:10pt; clear:both; height:auto; width:600pt;        letter-spacing:6pt; word-spacing:10pt; text-align:center; margin-right:10%; margin-left:3%; cursor:wait;}

   .image2 { color:#FFFF00; background-image:url(pict.bmp); background-color:#0066FF; background-repeat:repeat-x; border-color:#009900; border-style:outset; padding:' padding-top':10px; font-size:16px; font-family:cornier; font-weight:bold; text-align:center; text-decoration:overline;    margin-left:5pt; margin-right:10pt; margin-top:5pt; float:left; width:70%;   cursor:move;}

 

   #pict { border- style:double; border-color:#CCFF66; border-width:8px; padding: padding-bottom:5px; width:15%; margin-left:20pt; margin-right:10pt; margin-top:5pt; float:left; cursor:hand}

   #pict1 {width:98%; background-image:url(pic2.bmp); list-style-type:georgian; list-style-position:outside; font-family:cursive; font-size:medium; font-weight:700; letter-spacing:3pt; word-spacing:7pt; color:white;}

</STYLE>

</head>

 

<body id="pict1">

<h1 align="center"> правила поведінки за столом</h1>

<ul>Країна

<li>Іспанія<li>Німеччина<li>Англія

</ul>

<div class="image1">

   Деякі рекомендації із суспільного поводження в різних країнах

</div>

<p class="image1"> Іспанія</p>

<img id="pict" src="flo.bmp">

<div class="image2">

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

</div>

</body>

</html>

 

Завдання 2.

1) Створіть на диску папку MYWEB.

2) Скопіюйте в папкуMYWEB з папки WINDOWS файл «Ночной ковыль.bmp» (перейменуйте його в dark.bmp), «Рододендрон.bmp» (перейменуйте йог в flo.bmp).

3) Створіть за допомогою редактора web-сторінок у цій папці три файли стилів (text1.css, div.css, pict.css) і два html-файли (index.htm й любий інший).

4) Перегляньте документ index.htm. Використовуючи наявні аркуші стилів, створіть ще один html файл з дизайном, аналогічним першим двом документам.