CSS_1-2 by Leonid Flegantov

Основи Web-майстерності

CSS Методичні вказівки та завдання до лабораторних робіт

Частина 1-2 Базові відомості про CSS Розширені можливості CSS

Основи Web-майстерності: CSS.

Основи Web-майстерності: CSS. Частина 1-2. Методичні вказівки та завдання до лабораторних робіт. – 64 с.

Фрагмент методического пособия представлен для ознакомления с продукцией электронного магазина МЕТОДИЧКА http://metodichka.com.ua/ МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

Основи Web-майстерності: CSS.

Зміст ЗАНЯТТЯ 1 ........................................................................................................ 5 Базові відомості про CSS................................................................................... 5 Основні питання заняття ..................................................................................5 Організація робочого середовища....................................................................5 Порядок виконання вправ.................................................................................6 Стилі окремих елементів. Атрибут STYLE......................................................7 Внутрішні таблиці стилю. Елемент STYLE .....................................................8 Класи стилю ...................................................................................................10 Зовнішні таблиці стилю. Елемент LINK ........................................................13 Коментарі у таблицях стилю..........................................................................15 Одиниці довжини у таблицях стилю..............................................................18 Доповнення електронного довідника темою „Базові відомості про CSS” ....20 На цьому занятті.............................................................................................21 ЗАНЯТТЯ 2 ......................................................................................................22 Основні CSS-властивості елементів HTML .................................................. 22 Основні питання заняття ................................................................................22 Властивості блокових елементів ....................................................................22 Властивості шрифту .......................................................................................26 Властивості тексту..........................................................................................28 Властивості кольору і фону............................................................................30 Властивості списків........................................................................................34 Доповнення електронного довідника темою „Основні CSS-властивості елементів HTML” ...........................................................................................36 На цьому занятті.............................................................................................37 ЗАНЯТТЯ 3 ......................................................................................................38 Розширені можливості CSS............................................................................. 19 Основні питання заняття ................................................................................38 Псевдокласи гіперпосилань............................................................................38 Псевдоелементи: перший рядок та буквиця...................................................41 Стилі курсору миші........................................................................................43 Позиціонування елементів .............................................................................45 Копмоновка веб-сторінок за допомогою шарів (блоків) ................................49 Візуальні ефекти.............................................................................................54 Властивості полос прокрутки.........................................................................59 Доповнення електронного довідника темою „Розширені можливості CSS”..60 Таблиця стилю електронного довідника ........................................................61 На цьому занятті.............................................................................................62

Основи Web-майстерності: CSS.

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються основні можливості та практичні аспекти застосування CSS (Cascading Style Sheets, каскадні таблиці стилю) до розробки веб-сторінок. За основу взято останню на цей час базову версію CSS1. Частина 1 методичних вказівок містить: базові відомості про CSS, основи створення стилю окремих елементів, створення внутрішніх таблиць стилю, створення та підключення зовнішніх таблиць стилю. Частина 2 методичних вказівок містить: відомості про розширені можливості CSS, зокрема, про псевдокласи гіперпосилань, псевдоелементи, стилі курсору миші, позиціонування шарів вебсторінок тощо, а також додатки: кольори в CSS. Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати використання у веб-дизайні CSS та навчитись їх застосовувати для розробки веб-сторінок та вебсайтів. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

Основи Web-майстерності: CSS.

Заняття 1 Базові відомості про CSS Основні питання заняття - Організація робочого середовища - Порядок виконання вправ - Стилі окремих елементів. Атрибут STYLE - Внутрішні таблиці стилю. Елемент STYLE - Класи - Зовнішні таблиці стилю. Елемент LINK - Коментарі у таблицях стилю - Одиниці довжини у таблицях стилю - Доповнення електронного довідника темою „Базові відомості про

CSS” Організація робочого середовища У вашій робочій папці має бути наступне дерево папок: Ваша папка

\Web

\Images \Sounds \Videos \HTML

Створіть у папці Web ще одну папку під назвою CSS. Таким чином, дерево папок повинно набути такого виду: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS Папка CSS призначена для зберігання веб-сторінок (HTML-файлів), які будуть створені вами під час виконання вправ при вивченні каскадних таблиць стилю (CSS). Під час виконання вправ ша 5

Основи Web-майстерності: CSS.

застосування CSS зберігайте всі створені Вами веб-сторінки до цієї папки, якщо у методичних вказівках не сказано інше. Методичні вказівки побудовані таким чином, щоб по закінченні роботи ви одержали самостійно створений вами електронний "Довідник Веб-майстра". Для цього необхідно лише ретельно виконувати всі вправи, і суворо додержуватися методичних вказівок. Порядок виконання вправ HTML-документи з використанням каскадних таблиць стилю (CSS)– це прості текстові документи, як і звичайні HTML-документи. Тому для їх створення можна використовувати будь-якій текстовий редактор. На цих заняттях, як і раніше, ми будемо користуватися текстовим редактором Блокнот, якій входить до складу стандартних програм операційної системи Windows. При виконанні вправ рекомендуємо дотримуватися наступного порядку: 1. Прочитайте вступні зауваження. 2. Ознайомтеся з лістингом коду. 3. Наберіть текст коду у текстовому редакторі Блокнот. 4. Збережіть набраний код у файлі з розширенням *.html або *.htm під назвою, яка вказана у лістингу. Файли зберігайте у папку CSS, яку необхідно завчасно створити у своїй робочій папці. 5. Зовнішні таблиці стилю зберігайте у файлах з розширенням *.css і також зберігайте у папку CSS. 6. Відкрийте створений HTML-файл подвійним клацанням (файл відкриється, як веб-сторінка, у вікні броузера Internet Explorer) і оцініть результат. 7. Якщо необхідно внести зміни або доповнення в код вебсторінки, тоді через контекстне меню веб-сторінки відкрийте її код у текстовому редакторі Блокнот (контекстне меню > Просмотр в виде HTML), внесіть необхідні зміни, збережіть виправлений файл, перейдіть у вікно броузера і виконайте команду Обновить на панелі інструментів - веб-сторінка зміниться відповідно до внесених виправлень. 6

Основи Web-майстерності: CSS.

8. Якщо необхідно внести зміни, доповнення або виправлення у зовнішню таблицю стилю (CSS-файл), тоді через контекстне меню CSS-файлу відкрийте цей файл у Блокноті командою (Открыть с помощью > Блокнот). По закінченні редагування, збережіть CSS-файл і перезавантажте зв'язану веб-сторінку, щоб переглянути результат. Стилі окремих елементів. Атрибут STYLE Стиль – це сукупність параметрів форматування. Щоб задати стиль окремого елементу використовують атрибут STYLE, у якому вказують властивості стилю. Властивості стилю записують у вигляді пар назва_властивості:значення_властивості. Властивості відокремлюють знаком „;” (крапка з комою). Кожен елемент HTML-документу має свій допустимий набір властивостей. Для надання стильових властивостей окремому HTML-елементу використовується атрибут STYLE. Записують, наприклад, STYLE="color:red; text-align:center;" Створіть файл з використанням CSS-властивостей стилю, які застосовуються до окремих HTML-елементів, згідно наступного лістингу. Лістинг 1.1. Файл 1.1.html <HEAD> <TITLE>Стилі окремих елементів. Атрибут STYLE</TITLE> </HEAD> <BODY> <H1>Стилі окремих елементів. Атрибут STYLE</H1> <HR> <H1 STYLE="font-size: 20pt; text-align: center; font-family: Verdana;">Цей заголовок має розмір 20pt, вирівнювання По центру, гарнітура шрифту 7

Основи Web-майстерності: CSS.

Verdana</H1> <P STYLE="color:red; font-weight: bold; fontstyle:italic; ">Цей текст виділений червоним кольором, жирним шрифтом, курсивом.</P> <DIV STYLE=" width: 50%; height: 200; background:#ffffee; border: solid 1px red;"> Цей блок має ширину 50% екрана, висоту 200 пкс, фоновий колір #ffffee, суцільну рамку товщиною 1 пкс червоного кольору. </DIV> </BODY> </HTML>

Пользуясь эти методическим пособием Вы сможете детально, на прмерах, изучить применение каскадных таблиц стилей CSS МЕТОДИЧКА http://metodichka.com.ua/

Основи Web-майстерності: CSS.

Зовнішні таблиці стилю. Елемент LINK Коли необхідно задати однаковий стиль одночасно для кількох вебсторінок, тоді таблицю стилів створюють в окремому файлі за допомогою будь-якого текстового редактору, і зберігають цей файл з розширенням *.css . Таблиця стилів, яка розміщена в окремому файлі, називається зовнішньою таблицею стилів. Всі зміни, які будуть внесені у зовнішню таблицю стилів, відображаються одночасно на всіх вебсторінках, де використовується зовнішня таблиця стилів, після іх перезавантаження. Зовнішню таблицю стилів підключають до кожної веб-сторінки за допомогою тега LINK, якій розміщують у заголовочній частині коду веб-сторінки. Тег LINK має такі атрибути: HREF - задає URL-адресу зовнішнього CSS-файла, що містить таблицю стилів. TYPE="text/css" - вказує броузеру, що застосовується текст формату CSS. REL="stylesheet" - вказує броузеру на те, що зв'язаний файл містить каскадну таблицю стилів. Створіть зовнішню таблицю стилів в окремому файлі з обов’язковим розширенням *.css. Лістинг 1.4. Файл first.css H1 { font-size: 20pt; text-align: center; font-family: Verdana; color:#008000; } P { background:#eeeeee; } DIV { 9

Основи Web-майстерності: CSS.

width: 50%; height: 200; background:#eeffee; border: solid 5px #ffcc00; padding: 10; } SPAN { background: red; color:white; font-weight:bold; } HR {color:#ffcc00;} Створіть веб-сторінку з підключеною до неї зовнішньою таблицею стилів. Лістинг 1.5. Файл 1.4.html <HEAD> <TITLE>Зовнішні таблиці стилю. Елемент LINK</TITLE> <LINK HREF="first.css" REL="stylesheet">

TYPE="text/css"

</HEAD> <BODY> <H1>Зовнішні таблиці стилю. Елемент LINK</H1> <HR> <P>До цієї веб-сторінки підключена зовнішня таблиця стилів. <H1>Заголовок 1. Всі заголовки H1 мають однакове форматування</H1> <P>Абзац 1. Всі абзаци на сторінці мають 10

Основи Web-майстерності: CSS.

<SPAN>однакове форматування</SPAN>.</P> <DIV>Блок 1. Всі блоки на сторінці мають <SPAN>однакові властивості</SPAN>.</DIV> <H1>Заголовок 1</H1> <P>Абзац 2.</P> <DIV>Блок 2</DIV> <H1>Заголовок 1</H1> <P>Абзац 3.</P> <DIV>Блок 3</DIV> <HR> </BODY> </HTML>

Основи Web-майстерності: CSS.

Заняття 2 Основні CSS-властивості елементів HTML Основні питання заняття - Властивості блокових елементів - Властивості шрифту - Властивості тексту - Властивості кольору і фону - Властивості списків - Доповнення електронного довідника

темою „Основні CSS-

властивості елементів HTML” Властивості блокових елементів Всі HTML-елементи, які є контейнерами для тексту або зображень (такі, як P, DIV, BODY, IMG, а також, у деяких випадках, SPAN) можна вважати прямокутними блоками. Для них передбачені спеціальні CSS-властивості, які дозволяють задавати для блоків зовнішні та внутрішні поля, границі, розміри блоків, керувати взаємним розміщенням блоків. margin Властивість margin встановлює ширину для всіх чотирьох зовнішніх полів навколо блока. Задається в абсолютних одиницях або в процентах. Якщо необхідно встановити різні значення ширини полів, то використовують похідні властивості: margin-top (верхнє поле), margin-bottom (нижнє поле), margin-left (ліве поле), margin-right (праве поле). Приклад: DIV {margin: 10px} padding Властивість padding встановлює ширину для всіх чотирьох внутрішніх полів всередині блока. Задається в абсолютних одиницях.

Основи Web-майстерності: CSS.

Для кожного поля окремо є своя властивість: padding-top (верхнє поле), padding-bottom (нижнє поле), padding-left (ліве поле), paddingright (праве поле). Приклад: DIV {padding: 10px} border Властивість border встановлює набір властивостей границі блока стиль границі, товщина границі, колір границі. Стиль границі може мати такі значення: solid (суцільна границя), dotted (границя з точок), dashed (пунктир), double (подвійна лінія), groove (вдавлена ліня), ridge (опукла лінія), insert (вдавлений блок), outset (опуклий блок). Стиль границі можна задати окремо від інших властивостей за допомогою властивості border-style. Ширина границі (властивість border-width) задається в абсолютних одиницях (наприклад, 200px) або в процентах, а також може мати такі значення: thin (тонка), medium (середня), thick (товста). Колір границі (властивість border-color) можна задавати стандартною назвою кольору, 16-ковим кодом #rrggbb, у 10-ковому форматі rgb(255,255,255), у процентному форматі rgb(100%,100%,100%). Приклад: DIV {border: solid 3px red;} width та height Властивість width встановлює ширину блока. Задається в абсолютних одиницях (наприклад, 200px) або у процентах. Властивість height встановлює висоту блока. Задається тільки абсолютних одиницях. Приклад: DIV {width: 300px; height: 100px;} float Властивість float задає розміщення блока по горизонталі відносно зовнішніх елементів, що слідують за блоком. Може приймати значення left (обтікання зліва), right (обтікання зправа), none (заборона обтікання зліва). Приклад: DIV {float: left;} clear 13

Основи Web-майстерності: CSS.

Властивість clear відміняє дію властивості float, встановленої для попереднього блоку. Може приймати значення left (відміна обтікання зліва), right (відміна обтікання зправа), both (заборона обтікання з обох боків). Приклад: DIV {clear: left;} Лістинг 2.1. Файл 2.1.html <HEAD> <TITLE>Властивості блокових елементів</TITLE> <STYLE TYPE="text/css"> BODY { margin-top: 50; margin-bottom: 50; margin-left: 100; margin-right: 100; } P { margin: 2px; padding: 10px; border: solid 1px orange; width: 100%; height: 99px;/* Висота 3-х абзаців відповідає висоті малюнку разом із товщиною границі */ } DIV { margin: 2px; padding: 10px; border: solid 2px green; width: 233; /* Ширина блока відповідає шириніі малюнку разом із товщиною границі */ height: 200; /* Висота блока відповідає висоті 2-абзаців разом із зовнішними границями */ 14

Основи Web-майстерності: CSS.

float: left; } IMG { border: solid 10px red; clear: left; float: left; } </STYLE> </HEAD> <BODY> <H1>Властивості блокових елементів</H1> <HR> <DIV>Блок DIV. Для блоків задано обтікання зліва</DIV> <P>Абзац тексту P. зліва</P>

Обтікає попередній блок

<P>Наступний абзац тексту P. блок зліва</P> <P>Ще один абзац тексту P. блок зліва</P>

Обтікає попередній

<IMG SRC="../images/blackcat.gif"> <P>Абзац тексту P.

Обтікає малюнок зліва</P>

<P>Наступний абзац тексту P. зліва</P>

Обтікає малюнок

<P>Ще один абзац тексту P. зліва</P>

Обтікає малюнок

<P>Ще один абзац тексту P. зліва</P>

Обтікає малюнок

</BODY> </HTML>

Основи Web-майстерності: CSS.

Властивості списків Таблиці стилю дозволяють керувати відображенням списків: задавати гарнітуру, розмір і колір шрифта, а також встановлювати вид маркерів списку. Розглянемо CSS-властивості, які дозволяють встановлювати вид маркерів. list-style-type Властивість list-style-type встановлює вид маркерів списку. Можливі значення: square - квадратик circle - кружечок disc - диск decimal - числа 1, 2, 3, ... lower-roman - малі римські цифри і, іі, ііі,... upper-roman - великі римські цифри І, ІІ, ІІІ,... lower-alpha - малі латинські букви a, b, c, d, ... upper-alpha - великі латинські букви A, B, C, D, ... Приклад: OL {list-style-type:square;} 16

Основи Web-майстерності: CSS.

list-style-image Властивість list-style-image встановлює замість маркера зображення з файлу. Значення цієї властивості - адреса URL файлу зображення. Приклад: LI {list-style-image: url(image.gif);} list-style-position Властивість list-style-position встановлює позицію маркера. Можливі два значення цієї властивості: outside (маркер зовні області списку), inside (маркер всередині області списку). Приклад: LI {list-style-position: outside;} Лістинг 2.5. Файл 2.5.html <HEAD> <TITLE>Властивості списків</TITLE> <STYLE TYPE="text/css"> OL { list-style-type:upper-alpha; list-style-position: outside; } UL {list-style-position: outside;} UL.image {list-styleimage:url(../images/arrow.gif);} </STYLE> </HEAD> <BODY> <H1>CSS-властивості списків</H1> <HR> <H3>Нумерований список</H3> <OL> <LI>Перший елемент списку</LI> <LI>Другий елемент списку</LI> 17

Основи Web-майстерності: CSS.

<LI>Третій елемент списку</LI> <LI STYLE="list-style-type:decimal">Четвертий елемент списку</LI> <LI STYLE="list-style-type: upperroman">П'ятий елемент списку</LI> </OL> <H3>Маркірований список</H3> <UL> <LI>Перший елемент списку</LI> <LI>Другий елемент списку</LI> <LI>Третій елемент списку</LI> <LI STYLE="list-style-type:square">Четвертий елемент списку</LI> <LI STYLE="list-style-type:circle">П'ятий елемент списку</LI> </UL> <H3>Маркірований список з маркерамизображеннями</H3> <UL CLASS="image"> <LI>Перший елемент списку</LI> <LI>Другий елемент списку</LI> <LI>Третій елемент списку</LI> <LI>Четвертий елемент списку</LI> <LI>П'ятий

елемент списку</LI>

</UL> </BODY> </HTML>

Основи Web-майстерності: CSS.

Заняття 3 Розширені можливості CSS Основні питання заняття - Псевдокласи гіперпосилань - Псевдоелементи: перший рядок та буквиця - Стилі курсору миші - Позиціонування елементів - Копмоновка веб-сторінок за допомогою шарів (блоків) - Візуальні ефекти - Властивості полос прокрутки - Доповнення

електронного можливості CSS”

довідника

темою

„Розширені

- Таблиця стилю електронного довідника

Псевдокласи гіперпосилань Управління стилями гіперпосилань здійснюється за допомогою псевдокласів гіперпосилань. В CSS передбачені наступні псевдокласи гіперпосилань: link - застосовується для відображення гіперпосилань, які ще не були відвідані Відповідне CSS-правило A:link {CSS-властивості} visited - застосовується для відображення гіперпосилань, які вже були відвідані Відповідне CSS-правило A:visited {CSS-властивості} active - застосовується для відображення гіперпосилання, яке було щойно активізоване Відповідне CSS-правило A:active {CSS-властивості} hover - застосовується для відображення гіперпосилання, над яким наведено покажчик миші Відповідне CSS-правило A:hover {CSS-властивості} 19

Основи Web-майстерності: CSS.

focus - застосовується задання особливостей полів вводу даних у формах. Лістинг 3.1. Файл 3.1.html <HEAD> <TITLE>Псевдокласи гіперпосилань</TITLE> <STYLE TYPE="text/css"> A { font-family: Verdana, Arial; font-size: 13; text-decoration: none; } A:link {color: #33699cc;} A:visited {color: green;} A:hover { color: orange; background: black; font-weight: bold; text-decoration: underline; letter-spacing:2px; } A:active {color: red;} DIV.menu1 { width: 50%; padding: 10px; background: #efe; border: solid 1px orange; } DIV.menu2 { color: red; text-align:center; 20

Основи Web-майстерності: CSS.

background: #eee; border: solid 1px orange; } </STYLE> </HEAD> <BODY> <H1>Псевдокласи гіперпосилань</H1> <HR> <H2>Вертикальне меню</H2> <DIV CLASS="menu1"> <P> <A HREF="http://" TARGET="_blank">Невідвідана вебсторінка</A><BR> <A HREF="2.1.html" TARGET="_blank">Властивості блокових елементів</A><BR> <A HREF="2.2.html" TARGET="_blank">Властивості шрифту</A><BR> <A HREF="2.3.html" TARGET="_blank">Властивості тексту</A><BR> <A HREF="2.4.html" TARGET="_blank">Властивості кольору і фону</A><BR> <A HREF="2.5.html" TARGET="_blank">Властивості списків</A></P> </DIV> <H2>Горизонтальне меню</H2> <DIV CLASS="menu2"> <A HREF="http://" TARGET="_blank">Невідвідана</A> &bull; <A HREF="2.1.html" TARGET="_blank">Блоки</A> &bull; <A HREF="2.2.html" TARGET="_blank">Шрифт</A> &bull; 21

Основи Web-майстерності: CSS.

<A HREF="2.3.html" TARGET="_blank">Текст</A> &bull; <A HREF="2.4.html" TARGET="_blank">Колір та фон</A> &bull; <A HREF="2.5.html" TARGET="_blank">Списки</A> </DIV> </BODY> </HTML>

Візуальні ефекти Заборона відображення об'єкта. Властивість display Властивість display служить для тимчасової заборони відображення об'єктів. Щоб заборонити відображення об'єкта йому необхідно надати стиль display:none. Щоб відновити відображення об'єкта йому необхідно надати властивість display:yes. Якщо об'єкт прихований за допомогою властивості display:none, то при цьому не залишається порожнього місця на місці об'єкта. Приклад: .block_off {display:none;} .block_on {display:yes;} Вивід елемента на екран. Властивість visibility 22

Основи Web-майстерності: CSS.

Якщо HTML-об'єкт знаходиться всередині іншого об'єкта, який є невидимим, то і внутрішній об'єкт теж є невидимим. Властивість visibility дозволяє керувати видимістю внутрішніх об'єктів незалежно від того, чи є видимим зовнішній об'єкт. Властивість visibility має три можливих значення: visible - виводить елемент на екран. inherit - видимість залежить (зовнішнього) елемента.

від

видимості

"батьківського"

hidden - елемент є невидимим (замість нього залишається порожнє місце) Приклад: .block_visible {visibility:hidden;}

{visibility:visible;}

.block_hidden

Вирізання області. Властивість clip Властивість clip дозволяє "вирізати" частину області таким чином, що все те, що опиниться за межами "вирізання" не буде видимим. Властивість clip застосовується тільки для абсолютно позиціонованих елементів, т.т. елементів, що мають властивість position:absolute. Область "вирізання" є прямокутником, прив'язаним до верхнього лівого кута абсолютно позиціонованого елемента. Для задання "вирізання" використовують наступний запис властивості clip: clip:rect (top right bottom left) Аргументи top, right, bottom, left задають координати прямокутної області вирізання. Координати можна задавати в абсолютних одиницях, у процентах від розміру об'єкта, до якого застосовується вирізання, а також можливе значення auto, при якому координата автоматично стає рівною розміру об'єкта. Тобто вирізання у відповідному напрямі (по ширині або по висоті) не відбувається. Наприклад, clip:rect (0 auto auto 0) - вирізання відсутнє. Переповнення області. Властивість overflow Якщо розміри зовнішнього елемента-контейнера менші, ніж розмір внутрішнього об'єкта, що міститься у контейнері, тоді можна задати спосіб відображення тієї частини, що опинилася за межами контейнера. Для цього використовують властивість overflow, яка може приймати такі значення: 23

Основи Web-майстерності: CSS.

visible - відображається все, що за межами вирізання. hidden - відображається тільки те, що попало в область вирізання. scroll - до області врізання додається полоса прокрутки. auto - полоса прокрутки з'являється в разі необхідності. Зміна порядку розташування блоків (шарів). Властивість z-index Вважається, що кожен HTML-елемент (наприклад, блок DIV) знаходиться на своєму шарі. Якщо позиціоновані елементи перекриваються, то враховувати порядок шарів, у яких вони знаходяться.

необхідно

Звичайний порядок шарів такий: елементи, які зустрічаються в коді веб-сторінки раніше, знаходяться на нижчих шарах, а ті, що зустрічаються пізніше - на вищих. Щоб змінити порядок слідування шарів без перенесення коду елемента на інше місце, застосовують властивість z-index. Властивість z-index приймає тільки цілі значення (як додатні, так і від'ємні). Звичайний порядок слідування шарів відповідає значенням 0, 1, 2, ... (знизу-вгору). Значення z-index:0; має базовий елемент, відносно якого ведеться нумерація шарів. Звичайно, це елемент BODY. Якщо задати іншому елементу властивість z-index:-1, то він переміщується на один шар вниз відносно базового елементу. Якщо задати z-index:2, то елемент переміщується на два шара вгору. Лістинг 3.6. Файл 3.6.html <HEAD> <TITLE>Візуальні ефекти</TITLE> <STYLE TYPE="text/css"> DIV { width: 200; height:200; border: solid 1px red; position:absolute; } 24

Основи Web-майстерності: CSS.

BLOCKQUOTE

{

width: 100px; height: 100px; margin-top: 50px; margin-left: 50px; background:#edd; border: thin dashed black; overflow: auto; } </STYLE> </HEAD> <BODY> <H1>Візуальні ефекти</H1> <HR> <H3>Заборона відображення об'єкта. Властивість display</H3> <P><IMG SRC="../images/car.jpg" STYLE="display:none;">

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

Гимнастика для глаз А. Динамический комплекс 1.

Движения глаз вправо-влево, 30 секунд.

Движения глаз вверх-вниз, 30 секунд.

Движения глаз по диагоналям, по 30 секунд.

Круговые движения глазами по часовой стрелке, 30 секунд.

Круговые движения глазами против часовой стрелки, 30 секунд.

Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.

Б. Самомассаж глаз 1.

Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.

Быстро моргать в течение 1-2 минут.

Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 2530 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.

Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.

Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.

Выполнить массаж затылочной области продольными движениями пальцев обеих рук в направлении от затылочного бугра к 7-му шейному позвонку и обратно до появления чувства «прилива» к голове.

Регулярное выполнение этих простых упражнений поможет вам уменьшить усталость глаз при работе на компьютере и надолго сохранить хорошее зрение.