Теоретичні відомості
Лабораторна робота №5
Тема: Форматування сторінок з використанням таблиць стилів
Мета: вивчення властивостей елементів і засобів форматування WEB-сторінок з використанням різних варіантів таблиць стилів.
Теоретичні відомості
Для встановлення зв'язку із зовнішньою таблицею використо-вується тег LINK:
Для включення таблиці стилів в документ використовується тег STYLE
Для імпорту таблиці стилів використовується така конструкція:
Для включення стилю в тег використовується атрибут STYLE
STYLE = “Набір правил”
Для використання користувачем власної таблиці стилів в IE необхідно виконати команду Властивості оглядача.-Общие-Оформление..., включити Оформляти, використовуючи стиль користувача, натиснути Огляд... і вибрати таблицю стилів.
У табл. 10 наведені імена і значення основних властивостей, які описують область розміщення елемента.
Рядкові елементі (display= inline) відображається як вбудований в рядок, вміст елементів починається з того місця, де закінчився попередній.До елементів із значенням list-item можна додавати такі властивості (табл. 11).
При форматуванні тексту можна керувати, як відображенням літер (табл. 12), так і тексту в цілому (табл. 13).
Класовий селектор складається з імені тега й імені класу, з'єднаних крапкою. Наприклад, для тега <H1 CLASS="bl">TEXT</H1> можуть бути:
H1.bl {color:blue; size:20pt}
.bl {color:blue}
ID селектор починається з символу #. Наприклад, для тега <H1 ID="rd">TEXT</H1>:
|
|
|
#rd {color:blue; size:20pt}
У тегові обидва атрибути (CLASS і ID) можуть використовуватися одночасно, довизначаючи стиль елемента.
Таблиця 10 Властивості області розміщення елемента
Таблиця 11 Таблиця властивостей елементів з display=list-item
Таблиця 12 Властивості шрифтів
Таблиця 13 Властивості тексту
Контекстні селектори складаються з простих селекторів, розділених пропуском (всі описувані до цього селектори були простими селекторами). Вони застосовуються до елементів, зв'язаних спадковими стосунками і задають властивості тільки конкретного дочірнього елемента.
OL LI {list-style-type: decimal}
UL LI { list-style-type: square}
При використанні таких правил елементи в нумерованому списку (OL) матимуть один стиль, а в ненумерованому (UL) – інший.Контекстні селектори можуть містити тип елемента, атрибути CLASS, атрибути ID або їх комбінацію:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
Псевдокласи розрізняють типи одного елемента (наприклад, посилання в різних станах, активна, вже відвідувалася, ще не відвідувалася),
створюючи при визначенні власні стилі для кожного з них. Наприклад, псевдокласи елемента <а href=" ">:
link (посилання), active (активне посилання), visited (відвіданий раніше URL), hover (псевдоклас, що виникає при тому, що піднесло курсору до посилання).
|
|
|
a:link,a:visited {color:blue} – відвіданий раніше URL
a:active {color:red} – активне посилання
a:hover {text-decoration:none} – псевдоклас, що виникає при наведенні курсору до посилання.
Псевдоелементи є частинами інших елементів, задаючи цим частинам відмінний від елемента в цілому стиль (наприклад, перший рядок в абзаці або перша рядка):
P:first-line {color: purple }
H1:first-letter { color: red }.
Завдання
1. Дослідження особливостей сумісного використання декількох таблиць стилів.
1.1. Створити різні таблиці стилів (у зовнішньому файлі, у тегові STYLE, у атрибуті STYLE) з однаковими властивостями та різними значеннями. Дослідити їх взаємодію, результати дослідження звести в таблицю.
1.2. Порівняти взаємодію зовнішніх таблиць, які підключаються за допомогою тега LINK, директиви @import та користувачем у браузері. Результати дослідження звести в таблицю.
1.3. Випробувати властивість!important для зміни ваги визначень.
2. Вивчення властивостей блокових елементів.
2.1. Створити декілька блокових елементів з різними параметрами області розміщення, підібравши їх так, щоб візуально оцінити кожен параметр і взаємне розташування елементів.
|
|
|
2.2. Позиціонувати п'ять блокових елементів (по кутах вікна і в центрі), досліджувати дії різних браузерів при зміні розмірів вікна і вмісту при різних значеннях display, visibility, overflow, position.
3. Вивчення властивостей рядкових елементів.
3.1. Створити елемент SPAN з властивістю display:inline, випробувати розміщення в ньому різних елементів (текст, зображення).
3.2. Випробувати для SPAN різні значення властивості display, сформулювати основні відмінності в розміщенні.
4. Вивчення властивостей тексту.
4.1. Створити власний оригінальний стиль для абзацу і заголовка другого рівня, використовуючи властивості групи FONT.
4.2. Створити власний оригінальний стиль для абзацу і заголовка третього рівня, використовуючи властивості групи TEXT.
4.3. Створити правило для абзацу з буквицею (виділення пер-шої в абзаці).
5. Вивчення використання різних селекторів. Створити таблицю стилів, що містить набір правив на основі селекторів всіх типів і їх комбінацій, випробувати дію.
Звіт з лабораторної роботи представляється у вигляді сторінок, які створені при виконанні кожного пункту за особистим замислом та оформленням. Висновки та таблиці з результатами досліджень розташувати на окремій сторінці.
Дата добавления: 2015-12-17; просмотров: 18; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!