CSS-2 by Leonid Flegantov

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

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

Частина 2 Розширені можливості CSS Додатки: кольори в CSS

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

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

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

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

Зміст ЗАНЯТТЯ 3 .................................................................................... 5 Розширені можливості CSS ........................................................................ 5 Основні питання заняття............................................................................ 5 Псевдокласи гіперпосилань ...................................................................... 5 Псевдоелементи: перший рядок та буквиця .......................................... 8 Стилі курсору миші ..................................................................................10 Позиціонування елементів ......................................................................13 Копмоновка веб-сторінок за допомогою шарів (блоків)...................17 Візуальні ефекти........................................................................................22 Властивості полос прокрутки .................................................................27 Доповнення електронного довідника темою „Розширені можливості CSS” .......................................................................................29 Таблиця стилю електронного довідника ..............................................29 На цьому занятті ........................................................................................31 ДОДАТКИ..................................................................................... 32 Кольори в CSS ..............................................................................................32 Перелік додатків ........................................................................................32 216 міжплатформенних (веб-безпечних) кольорів.............................32 Червоний градієнт: від чорного до яскраво-червоного .....................33 Відтінки сірого кольору ...........................................................................33 Зелено-голубий градієнт ..........................................................................35

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

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

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

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

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

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

довідника

темою

„Розширені

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

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

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

Відповідне CSS-правило A:hover {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; } 6

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

DIV.menu2 { color: red; text-align:center; 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" шрифту</A><BR>

TARGET="_blank">Властивості

TARGET="_blank">Властивості

<A HREF="2.4.html" TARGET="_blank">Властивості кольору і фону</A><BR> <A HREF="2.5.html" списків</A></P>

TARGET="_blank">Властивості

</DIV> <H2>Горизонтальне меню</H2> <DIV CLASS="menu2"> <A HREF="http://" TARGET="_blank">Невідвідана</A> 7

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

&bull; <A HREF="2.1.html" &bull;

TARGET="_blank">Блоки</A>

<A HREF="2.2.html" &bull;

TARGET="_blank">Шрифт</A>

<A HREF="2.3.html" &bull;

TARGET="_blank">Текст</A>

<A HREF="2.4.html" фон</A> &bull;

TARGET="_blank">Колір

<A HREF="2.5.html" TARGET="_blank">Списки</A> </DIV> </BODY> </HTML>

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

та

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

Позиціонування елементів Звичайно всі елементи веб-сторінки позиціонуються попередніх елементів.

відносно

В CSS існує можливість встановлювати положення елементів вебсторінки незалежно від попередніх елементів. Для цього використовується CSS-властивість position, яка має три можливих значення. Можливі значення властивості position static Значення position:static задає звичайний елементу, його можна не вказувати.

порядок

розміщення

absolute Елемент веб-сторінки, для якого встановлена властивість position:absolute, займає прямокутну область, для якої необхідно вказати фіксовані координати, що визначають місце розміщення цієї області на веб-сторінці незалежно від інших елементів веб-сторінки. Координатами області вважаються координати її верхнього лівого кута. Вони задаються відносно верхнього лівого кута веб-сторінки (початок відліку) за допомогою CSS-властивостей top (відстань від початку відліку по вертикалі) та left (відстань від початку відліку по горизонталі). Якщо задати від'ємне значення координати left або top, яке перевищує розмір об'єкту, то об'єкт не буде видно на екрані. Цей прийом можна використати для зберігання прихованих даних. Приклад: DIV {position:absolute; top: 100px; left: 200px;} relative Елемент веб-сторінки, для якого встановлена властивість position:relative, також займає прямокутну область, для якої необхідно вказати фіксовані координати. Але ці координати визначають місце розташування цієї області на веб-сторінці відносно того місця, яке займав би об'єкт, коли б для нього не була задана властивість позиціонування, а не відносно всього документу. Завдяки цьому, при 9

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

зміні положення попереднього елемента, відповідно зміниться й положення наступного, для якого задане відносне позиціонування. При встановленій властивості position:relative та координатах top:0; left: 0, об'єкт займає своє стандартне положення. Якщо ж задати, наприклад, top:-100, то об'єкт зміститься вгору від стандартного положення; якщо, наприклад, top:100, то - вниз. Аналогічно, можна задавати зміщення вліво та вправо, задаючі відповідно від'єкмні або додатні значення координати left. Приклад: IMG {position:relative; top: -100px; left: 200px;} Лістинг 3.4. Файл 3.4.html <HEAD> <TITLE>Позиціонування елементів</TITLE> <STYLE TYPE="text/css"> DIV { width: 200; height: 200; text-align:center; } DIV.A { background: #fcc; border: solid 1px red; position:absolute; left:20; top: 180; } DIV.B { background: #cfc; border: solid 1px green; position:absolute; 10

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

left:120; top: 280; } DIV.C { background: #ffc; border: solid 1px #fc0; position:absolute; left:220; top: 380; } IMG.D { border: solid 1px #f60; position:absolute; left:425; top: 180; } H1.E { padding:5; background:yellow; border: solid 3px #f60; position:absolute; left:150; top: 310; } DIV.F { background: #080; color: lime; position:absolute; 11

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

left:-200; top: 350; } SPAN.for_rel_pos { position:absolute; top: 600; } .rel_obj1 { position:relative; top: -290; left:20; } .rel_obj2 { position:relative; top: -290; left:40; } </STYLE> </HEAD> <BODY> <H1>Позиціонування position</H1>

елементів.

Властивість

<HR> <H3>Абсолютне позиціонування елементів</H3> <P>Елементи, які мають абсолютне позиціонування, при зміщенні не залишають порожнього місця.</P> <DIV CLASS="A">Блок A</DIV> <DIV CLASS="B">Блок B</DIV> 12

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

<DIV CLASS="C">Блок C</DIV> <IMG CLASS="D" SRC="../images/blackcat.gif"> <H1 CLASS="E">Абсолютне позиціонування</H1> <DIV CLASS="F">Прихований блок</DIV> <SPAN CLASS="for_rel_pos"> <H3>Відносне позиціонування елементів</H3> <IMG SRC="../images/bg_clouds.jpg"> <P CLASS="rel_obj1">Цей надпис має відносне позиціонування<BR>відносно зображення неба.</P> <IMG CLASS="rel_obj2" SRC="../images/svin.jpg"> <P>Цей надпис розміщений відразу після зображення поросяти. Він не має властивостей позиціонування.</P> <P>Елементи, які мають відносне позиціонування, при зміщенні залишають порожнє місце.</P> </SPAN> </BODY></HTML>

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

Властивості полос прокрутки CSS дозволяє створювати стилі елементів інтерфейсу користувача відповідно до дизайну веб сайту. Зокрема, існує можливість керувати зовнішнім видом полос прокрутки, змінюючи їх колір за допомогою наступних CSS-властивостей (працюють тільки в Internet Explorer 5.5 та вище). CSS-властивості полос прокрутки scrollbar-base-color: "колір"; - колір основи полоси прокрутки. scrollbar-highlight-color: прокрутки.

"колір";

колір

"освітлення"

полоси

scrollbar-shadow-color: "колір"; - колір тіні від елементів полоси прокрутки. scrollbar-arrow-color: "колір"; - колір стрілок прокрутки. scrollbar-face-color: "колір"; - колір "обличчя" полоси прокрутки. scrollbar-3d-light-color: "колір"; - колір освітлення полоси прокрутки, що створює ефект об'єму. scrollbar-light-shadow-color: "колір"; - колір світлих тіней всіх елементів полоси прокрутки. scrollbar-dark-shadow-color: "колір"; - колір темних тіней всіх елементів полоси прокрутки. Лістинг 3.7. Файл 3.7.html <HEAD> <TITLE>Властивості полос прокрутки</TITLE> <STYLE TYPE="text/css"> BODY { background:#d0d9e9; /* CSS-властивості полос прокрутки */ scrollbar-base-color: #fff; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#036; 14

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

scrollbar-arrow-color:#fff; scrollbar-face-color:#069; /* scrollbar-3d-light-color:red; scrollbar-light-shadow-color:; scrollbar-dark-shadow-color:; */ } HR {color:#069;} DIV { width: 100%; height:200%; } </STYLE> </HEAD> <BODY> <H1>Властивості полос прокрутки</H1> <HR> <DIV></DIV> </BODY> </HTML> Доповнення електронного довідника темою „Розширені можливості CSS” Щоб додати тему „Розширені можливості CSS” до складу електронного довідника, у головний файл електронного довідника index.html перед закриваючим тегом </OL> в кінці файлу додайте наступні рядки: Лістинг 3.8. Доповнення до файлу index.html 15

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

<LI> Розширені можливості CSS. <UL> <LI><A HREF="css/3.1.html">Псевдокласи гіперпосилань.</A> <LI><A HREF="css/3.2.html">Псевдоелементи: перший рядок та буквиця.</A> <LI><A миші.</A>

HREF="css/3.3.html">Стилі

курсору

HREF="css/3.4.html">Позиціонування

<LI><A HREF="css/3.5.html">Копмоновка сторінок за допомогою шарів (блоків).</A> <LI><A ефекти.</A>

веб-

HREF="css/3.6.html">Візуальні

<LI><A HREF="css/3.7.html">Властивості полос прокрутки.</A> </UL> Таблиця стилю електронного довідника Застосуйте до електронного довідника таблицю стилів. Для цього у заголовочну частину файла index.html закриваючим тегом </HEAD> вставьте наступні рядки. Лістинг 3.9. Доповнення до файлу index.html <STYLE TYPE="text/css"> BODY { /* 1- варіант стилю: "Робочий" */ color:black; background-color:buttonFace; background-attachment: fixed; background-image: url(images/bg_gray.jpg); 16

перед

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

/* 2-й варіант стилю: "Святковий" color:rgb(10%,40%,80%); background-color:#99ccff; background-image: url(images/bg_snow.gif); background-repeat: repeat-y; background-position: bottom right; */ } A {color:navy; text-decoration: weight: normal;} A:hover {color: underline;}

brown;

none;

font-

text-decoration:

UL { background: #fff; width: 480; margin: 5; padding: 5; border: solid 1px gray; } LI {color: brown; font-weight: bold;} HR {width: 525; text-align:left;} </STYLE> Примітка. Щоб змінити стиль веб-сторінки з „Робочий” на „Святковий”, зніміть знаки коментаря з відповідних рядків таблиці стилю, які описують стиль „Святковий”, і встановіть коментар на рядки, що описують стиль „Робочий”.

На цьому занятті - Псевдокласи гіперпосилань 17

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

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

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

довідника

темою

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

„Розширені

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

Додатки Кольори в CSS Перелік додатків - 216 міжплатформенних (веб-безпечних) кольорів. - Червоний градієнт: від чорного до яскраво-червоного - Відтінки сірого кольору - Зелено-голубий градієнт

216 міжплатформенних (веб-безпечних) кольорів Ці 216 міжплатформенних (веб-безпечних) кольорів відображаються однаково на моніторі будь-якого комп'ютеру, що правцює під управлінням будь-якої з існуючих операційних систем. 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 19

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

669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

МЕТОДИЧКА 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-му шейному позвонку и обратно до появления чувства «прилива» к голове.

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