Файловый архив студентов. Файловый архив студентов.
1330 вузов, 5508 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Луганский национальный университет им. Тараса Шевченко
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Практикум зі створення WEB.doc
Скачиваний:
34
Добавлен:
10.11.2019
Размер:
2 Мб
Скачать
☆
►Содержание►

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

У 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 файл з дизайном, аналогічним першим двом документам.

Тексти файлів до першого завдання

Файл text1.css

.text

{ color:#000033; margin-left:10px; font-size:40pt; font-family:fantasy; font-weight:bolder}

.higtext

{ margin-top:-38pt; margin-left:8px;color:#FF0066; font-size:40pt; font-family:fantasy; font-weight:bolder;}

Файл div.css

.image1

{background-image:url(flo.bmp); background-color:#000099; font-family:cursive; font-size:18pt; font-style:oblique; font-weight:700; color:#FFFF99; height:auto; width:600pt; letter-spacing:6pt; word-spacing:10pt; text-align:center; border-color:#FF0000; border-style:ridge; border-width:10pt; }

.image2

{color:#FFFF00; background-color:#0066FF; border-color:#009900; border-style:outset; padding:' padding-top':10px; font-size:16px; font-family:cornier; font-weight:bold; text-align:center; width:70%;}

Файл pict.css

#pict1

{width:98%; background-image:url(dark.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;}

Файл index.htm

<html>

<head>

<title>Untitled Document</title>

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

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

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

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

</head>

<h2> WORDS</h2>

<body id="pict1">

<div align="center" class="text" style="color:#666666; font-style:italic">SGML</div>

<div align="center" class="higtext" style="color:#CCCCCC; font-style:italic">SGML</div>

<div class="text" >HTML</div>

<div class="higtext" >HTML</div>

<div align="right" class="text" style="color:#CCFFFF; letter-spacing:10pt; text-decoration:blink"> JAVA-SCRIPT</div>

<div align="right" class="higtext"; style="color:#FFFF66; letter-spacing:10pt; text-decoration:blink"> JAVA-SCRIPT</div>

<div class="image1"> Вивчення спеціальних мов програмування, таких як Java-script</div>

<div align="center" class="image2"> говорить про можливість створення професійних сайтів</div>

</body>

</html>

Завдання 3.

  1. Створіть документ, який відформатовано за допомогою заголовних стилів документа.

  2. При створенні документа використовуйте форматування блоків, тексту, шрифтів, списків, кольору й фону.

  3. Упровадьте заливання зображення і вставку зображення з обтіканням по правому краю.

Текст для форматування:

Поняття про етикет

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

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

Розрізняють кілька видів етикету, основними із яких є:

- придворний етикет;

- дипломатичний етикет;

- військовий етикет.

Контрольні питання:

  1. Якими можуть бути значення властивостей?

  2. Назвіть основні властивості блоку?

  3. Назвіть основні властивості тексту?

  4. Яка властивість відповідає за міжсимвольну відстань?

  5. Яка властивість відповідає за міжрядкову відстань?

  6. Назвіть основні властивості шрифтів?

  7. У яких одиницях задаються значення властивостей?

  8. Назвіть основні властивості кольору?

  9. Які властивості блоку дозволяють задати обтікання текстом?

  10. Які властивості блоків дозволяють змінювати позицію блоку в документі?

  11. За допомогою якого тегу підключаються до документа зовнішні аркуші стилів і які атрибути цього тегу є обов'язковими?

  12. Назвіть основні рекомендації при записі CSS правил.

  13. Назвіть пріоритети стилів.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности