Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
</UL>
</UL>
<BR><BLINK>Copyright</BLINK> © 1997 Компанія
</BODY>
</HTML>
Хід заняття
1. Ознайомитись з темою та метою заняття, вивчити основні
теоретичні положення.
2. Отримати у викладача індивідуальне завдання за своїм варіантом.
Контрольні запитання
1. Основні атрибути дескриптора <FRAMESET>.
2. Як створити плаваючий фрейм?
3. Дескриптори сенсорного зображення.
Практичне заняття №6
Представлення Web-документа із застосуванням технології CSS
Мета заняття – набути уміння роботи зі стильовими специфікаціями CSS, їх вбудовування, впровадження, зв'язування; застосування фільтрів та позиціонування на основі CSS.
Короткі теоретичні положення
Каскадні таблиці стилів (Cascading Style Sheets, CSS) – це сукупності стильових специфікацій, що застосовуються, як правило, до усіх сторінок сайту, це шаблон, який керує форматуванням дескрипторів HTML у документі.
Вбудовування стилю. Опис стилю можна вбудувати у різноманітні дескриптори HTML, що мають атрибут "style", наприклад, <BODY>, <P>, <Ні>, <TD>, <DIV>, <SPAN>. Вбудовування стилю дозволяє повністю контролювати фрагмент документа, до якого цей стиль застосовують:
<DIV style="font-family: garamond; font-size: 14pt; color: #999999">
Для виведення тексту абзацу використовується вбудований стиль, гарнітура шрифту – Garamond, висота символів – 14 пунктів, колір символів – сірий.
</DIV>
Каскадні таблиці стилів (Cascade Style Sheets – CSS) є технологією визначення і приєднання стилів до HTML-документів. Таблиця стилів – це шаблон, який управляє форматуванням дескрипторів HTML у Web-документі.
Каскадні таблиці стилів вперше було реалізовано в браузері Internet Explorer 3.0. Під час створення Internet Explorer 4.0 були враховані рекомендації REC-CSS1 Консорціуму W3 від 17 грудня 1996 року щодо каскадних таблиць. Зараз вони переглянуті й відомі як рекомендації до каскадних таблиць стилів, рівень 1, документ REC-CSS від 11 січня 1999 року. У травні 1998 року Консорціум W3 затвердив рекомендації до каскадних таблиць стилів, рівень 2, підтримку яких було реалізовано в Internet Explorer 4.01.
Таблиця стилів може міститись у самому HTML-документі або зберігатися в окремому текстовому файлі з розширенням СSS. Правило каскадних таблиць складається з двох частин: селектора і визначення. Селектором може бути будь-який HTML-дескриптор, для якого визначення задає правило про те, яким чином його необхідно форматувати. Саме визначення теж складається з двох частин: власти-вості та її значення, що відокремлюються двокрапкою (:).
Приклад:
Н1 {color:blue; font-size:16pt}
У цьому випадку для заголовка першого рівня, на що вказує Н1, визначені такі властивості: колір тексту – синій, розмір тексту – 16 пунктів.
Усі розміри можна задавати у таких одиницях: рх – pixels (пікселі), in – inches (дюйми), ех – x-height (висота літери “х” шрифту, що використовується), сm — centimeters (сантиметри), mm – milimeters (міліметри), pt – points (пункти; lpt=l/72in), pc – picas (піки; lpc = 12pt).
Способи використання таблиць стилів
Існує чотири способи використання в документі таблиці стилів:
– зв'язування – дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок;
– впровадження – дозволяє задавати всі правила таблиці стилів у самому документі;
– імпортування – дозволяє вбудовувати у документ таблицю стилів, розміщену на сервері;
– вбудовування у дескриптори документа – дозволяє змінити форматування конкретних елементів сторінки.
Зв'язування дозволяє зберігати таблицю стилів у окремому файлі і приєднувати її до документів за допомогою дескриптора <1іnк> у розділі <head>.
Наприклад:
<link rel="stylesheet" type="text/css" href="mystyles. css">
Тут rel="stylesheet" визначає, що зв'язується з документом таблиця стилів. Значення параметра type="text/css" вказує, що тип файлу текстовий, і що у файлі міститься опис таблиці стилів. Параметр href тега <link> вказує на місце знаходження файлу, що містить таблицю стилів.
Впровадження: використовується дескриптор <STYLE>, параметр якого TYPE повинен дорівнювати "text/ess". Таблиця стилів обмежується коментарем (<! -- -->). Це робиться для того, щоб браузери, які “не вміють” працювати зі стилями, ігнорували їх.
Наприклад:
<HEAD>
<STYLE TYPE="text/css">
<! --
В {text-transform: uppercase;}
P {background-color: grey; text-align: center}
--></STYLE>
</HEAD>
У прикладі визначено таблицю стилів для дескрипторів <В>, <Р>: текст, що міститься в контейнері <В> </В>, буде записано у верхньому регістрі; текст, що міститься у контейнері <Р> </Р>, буде позначатися сірим кольором та центруватися.
Імпортування: за допомогою дескриптора <STYLE> можна імпортувати зовнішню таблицю стилів, визначивши значення властивості @import, яке повинно містити URL таблиці стилів: (@import: url (mystyle.css).
Вбудовування у дескриптор: використовується для визначення стилю об'єкта, що форматується певним дескриптором, за допомогою параметра style.
<Н1 STYLE="color: red"> Заголовок позначається червоним кольором </Н1>
Для зменшення розміру CSS використовується групування – різні селектори записуються через кому. Наприклад:
Н1, Н2, НЗ: {font-family: Arial};
У цьому випадку для заголовків першого, другого та третього рівнів буде використано шрифт Arial.
Вкладені елементи наслідують правила форматування батьківського елемента.
Використання селекторів
Селектор CLASS дозволяє задати для одного й того ж елемента різні правила форматування.
Наприклад:
<STYLE TYPE="text/css">
<!--
H1.red {color: red; }
H1.bluebgrd {color: red; background-color: blue}
-->
</STYLE>
Тут задано два правила форматування Н1. Перше позначається red і визначає червоний колір шрифту для Н1. Друге позначається bluebgrd і визначає червоний колір на синьому фоні для Н1.
У тексті документа посилання на відповідний клас задається в параметрі CLASS:
<Н1 CLASS="red"> Червоний шрифт</Н1>
<Н1 CLASS="bluebgrd"> Червоний шрифт на синьому фоні</Н1>
Якщо клас повинен використовуватись для всіх елементів документа, то конкретний дескриптор не вказується:
<STYLE TYPE ="text/css">
.red {color: red; }
.bluebgrd {color: red; background-color: blue}
-->
</STYLE >
Тепер класи red і bluebgrd можна застосовувати до будь-яких елементів документа, що мають властивості, визначені у стилі.
Замість параметра CLASS можна використати параметр ІР. Параметр ID задає унікальне ім'я елемента, яке використовується для посилань на нього у сценаріях і таблицях стилів. Для цього перед ім'ям записується символ #.
Приклад № 1
<НТМL>
<HEAD>
<ТІТLЕ> Використання параметра ID</TITLE>
<STYLE TYPE ="text/css">
#red {color: red; }
#bluebgrd {color: red; background-color: blue}
-->
</STYLE >
</HEAD>
<BODY>
<P ID=red>12345 </P>
<H1 ID=bluebgrd> 123456 </H1>
</BODY>
</HTML>
Тут, у новому абзаці, на що вказує дескриптор <Р>, текст 12345 буде відображено червоним кольором. Текст заголовка першого рівня буде відображено червоним кольором на синьому фоні. На це вказує рядок <Н1 ID=bluebgrd> 123456 </Н1>.
За допомогою контейнера <SPAN> можна перевизначити стиль фрагмента тексту всередині іншого стандартного контейнера.
Приклад № 2
<HTML>
<HEAD>
<TITLE> Використання контейнера SPAN </TITLE>
<STYLE TYPE="text/css">
P { color: red;}
SPAN {color: yellow;}
</STYLE>
</HEAD>
<BODY>
<P> Текст червоного кольору
<SPAN> Teкст жовтого кoльopy</SPAN>
Знову текст червоного кольору
</Р>
</BODY>
</HTML>
У цьому прикладі для дескриптора <Р> визначено червоний колір символів. Але за допомогою контейнера <SPAN> перевизначили колір символів усередині <Р> на жовтий. Після закінчення дії контейнера <SPAN> колір символів знову буде червоним.
До одного документа можна приєднати декілька таблиць стилів, які утворюють “каскад” (тому таблиці стилів називають каскадними). Таблиці стилів мають такий пріоритет (від найменшого до найбільшого): зв'язана таблиця стилів; імпортована таблиця стилів; правило, селектором у якому є елемент HTML; правило, селектором у якому є параметр CLASS; правило, селектором у якому є параметр ID; вбудоване правило у HTML-дескриптор.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 |
