CSS-1 by Leonid Flegantov

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

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

Частина 1 Базові відомості про CSS Основні CSS-властивості HTML-елементів

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

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

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

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

Зміст ЗАНЯТТЯ 1 ........................................................................................................ 5 Базові відомості про CSS................................................................................... 5 Основні питання заняття ..................................................................................5 Організація робочого середовища....................................................................5 Порядок виконання вправ.................................................................................6 Стилі окремих елементів. Атрибут STYLE......................................................7 Внутрішні таблиці стилю. Елемент STYLE .....................................................8 Класи стилю ...................................................................................................11 Зовнішні таблиці стилю. Елемент LINK ........................................................14 Коментарі у таблицях стилю..........................................................................16 Одиниці довжини у таблицях стилю..............................................................18 Доповнення електронного довідника темою „Базові відомості про CSS” ....21 На цьому занятті.............................................................................................22 ЗАНЯТТЯ 2 ......................................................................................................23 Основні CSS-властивості HTML-елементів.................................................. 23 Основні питання заняття ................................................................................23 Властивості блокових елементів ....................................................................23 Властивості шрифту .......................................................................................27 Властивості тексту..........................................................................................29 Властивості кольору і фону............................................................................32 Властивості списків........................................................................................36 Доповнення електронного довідника темою „Основні CSS-властивості HTML-елементів”...........................................................................................38 На цьому занятті.............................................................................................39

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

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн".

посібнику

докладно

розглядаються

основні

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

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

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

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

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

\Web

\Images \Sounds \Videos \HTML

Створіть у папці Web ще одну папку під назвою CSS. Таким чином, дерево папок повинно набути такого виду: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS 5

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

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

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

код у текстовому редакторі Блокнот (контекстне меню > Просмотр в виде HTML), внесіть необхідні зміни, збережіть виправлений файл, перейдіть у вікно броузера і виконайте команду Обновить на панелі інструментів - веб-сторінка зміниться відповідно до внесених виправлень. 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> 7

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

<BODY> <H1>Стилі окремих елементів. Атрибут STYLE</H1> <HR> <H1 STYLE="font-size: 20pt; text-align: center; font-family: Verdana;">Цей заголовок має розмір 20pt, вирівнювання По центру, гарнітура шрифту 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. Частина 1.

Зовнішні таблиці стилю. Елемент 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; 9

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

} DIV { 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>До цієї веб-сторінки підключена зовнішня 10

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

таблиця стилів. <H1>Заголовок 1. Всі заголовки H1 мають однакове форматування</H1> <P>Абзац 1. Всі абзаци на сторінці мають <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. Частина 1.

Заняття 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 встановлює ширину для всіх чотирьох внутрішніх полів всередині блока. Задається в абсолютних одиницях. 12

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

Для кожного поля окремо є своя властивість: 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;} 13

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

clear Властивість 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;

/* Ширина блока відповідає 14

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

шириніі малюнку разом із товщиною границі */ height: 200; /* Висота блока відповідає висоті 2-абзаців разом із зовнішними границями */ 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.

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

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

зліва</P> </BODY> </HTML> Властивості шрифту Для управління шрифтами в CSS передбачені властивості, які дозволяють задавати гарнітуру, розмір, вид шрифту тощо. font-family Властивість font-family задає гарнітуру шрифту. Значенням цієї властивості може бути назва конкретного шрифта (наприклад, Arial) або назва одного з сімейства шрифтів, а саме: serif (наприклад, Times New Roman, Georgia), sans-serif (наприклад, Arial, Futura, Helvetica, Tahoma, Verdana), monospase (наприклад, Courier New), cursive та fantasy. У властивості font-family можна задати назви декількох шрифтів через кому. Приклад: P {font-family: Verdana, Arial, Tahoma;} font-size Властивість font-size задає розмір шрифту. Значення цієї властивості може бути задано в абсолютних одиницях (наприклад, 11pt, 8mm, 0.5in), в процентах від основного шрифта (наприклад, 120%), а також за допомогою спеціальних назв: xx-small (самий малий), x-small (дуже малий), small (малий), smaller (менше), medium (середній), large (більше), large (великий), x-large (дуже великий), xx-large (самий великий). Приклад: P {font-size: 120%;} font-style Властивість font-style задає стиль шрифту. Можливі наступні значення цієї властивості: normal (звичайний), italic (курсив), oblique (з нахилом). Приклад: P {font-style: italic;} font-weight 16

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

Властивість font-weight задає "жирність" шрифту. Для задання цієї властивості можна використовувати цілі числа 100, 200, 300, 400, ..., 900. Частіше застосовують ключові слова: bold (жирний), bolder (більш жирний), lighter (більш тонкий). Приклад: P {font-weight: bold;} font-variant Властивість font-variant задає вигляд шрифту. Є два можливих значення цієї властивості: small-cars (малі прописні букви), normal (звичайний вид). Приклад: P {font-variant: normal;} font Властивість font дозволяє узагальнити всі властивості шрифту, вказавши їх у наступному порядку: {font: style variant weight size family} Приклад: P {font: italic normal bold 24pt Verdana,Arial,sans-serif;} Лістинг 2.2. Файл 2.2.html <HEAD> <TITLE>Властивості шрифту</TITLE> <STYLE TYPE="text/css"> DIV { font-style: italic; font-variant: normal; font-weight: bold; font-size: 180%; font-family: Arial, sans-serif; /* Ті самі властивості можна задати у скороченому вигляді, а саме font: italic normal bold 180% Arial,sansserif; 17

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

*/ } </STYLE> </HEAD> <BODY> <H1>CSS-властивості шрифту</H1> <HR> <P>Для наступного блоку задані особливі властивості шрифту.</P> <DIV>Для управління шрифтами в CSS передбачені властивості, які дозволяють задавати гарнітуру, розмір, вид шрифту тощо.</DIV> </BODY> </HTML>

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

Властивості списків Таблиці стилю дозволяють керувати відображенням списків: задавати гарнітуру, розмір і колір шрифта, а також встановлювати вид маркерів списку. Розглянемо 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;} 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 19

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

<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> <LI>Третій елемент списку</LI> <LI STYLE="list-style-type:decimal">Четвертий елемент списку</LI> <LI STYLE="list-style-type: upperroman">П'ятий елемент списку</LI> </OL> <H3>Маркірований список</H3> <UL> <LI>Перший елемент списку</LI> <LI>Другий елемент списку</LI> 20

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

<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> Доповнення електронного довідника темою „Основні CSSвластивості HTML-елементів” Щоб додати тему „Основні CSS-властивості HTML-елементів” до складу електронного довідника, у головний файл електронного довідника index.html перед закриваючим тегом </OL> в кінці файлу додайте наступні рядки: Лістинг 2.6. Доповнення до файлу index.html <LI> Основні CSS-властивості HTML-елементів. <UL> <LI><A HREF="css/2.1.html">Властивості блокових елементів.</A> <LI><A HREF="css/2.2.html">Властивості 21

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

шрифту.</A> <LI><A HREF="css/2.3.html">Властивості тексту.</A> <LI><A HREF="css/2.4.html">Властивості кольору і фону.</A> <LI><A HREF="css/2.5.html">Властивості списків.</A> </UL> На цьому занятті - Властивості блокових елементів - Властивості шрифту - Властивості тексту. - Властивості кольору і фону - Властивості списків - Доповнення електронного довідника

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

властивості HTML-елементів”

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

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