- •Міністерство освіти і науки україни
- •Донецьк - 2010
- •Розділ 1. Розвиток інформаційного суспільства, мова html
- •Тема 1. Розвиток інформаційного суспільства
- •1.1. Інформація та її роль у глобалізованому світі
- •1.2. Теорії інформаційного суспільства
- •1.3. Побудування інформаційного суспільства в Україні
- •1.4. Мови розмітки – тенденції розвитку
- •1.5. Міжнародні установи, що регулюють розробку і впровадження сучасних засобів подання інформації
- •Тема 2. Мова розмітки гіпертексту html
- •2.1. Структура html - документа
- •2.2. Форматування даних на сторінці
- •2.3. Створення гіперпосилань
- •2.4. Escape - послідовності
- •2.5. Горизонтальні лінії
- •Тема 3. Створення списків, таблиць
- •3.1. Списки
- •3.2. Таблиці
- •3.3. Фрейми
- •Тема 4. Робота з зображеннями
- •3.1. Використання зображень на web - сторінці
- •4.2. Гіперпосилання у вигляді зображення, створення мапи посилань
- •4.3. Біглий рядок
- •Тема 5. Каскадні листи стилів css
- •5.1. Призначення, синтаксис css
- •5.2. Застосування таблиць стилів css
- •Тема 6. Створення форм
- •6.1.Форми
- •6.2. Засоби розробки сценаріїв опрацювання інформації форми
- •Тест за змістовим модулем 1 «Розвиток інформаційного суспільства, мова html»
- •Розділ 2. Мова сценаріїв JavaScript
- •Тема 7. Основи мови JavaScript
- •7.1. Мова JavaScript: основні поняття
- •7.2. Організація розгалужених обчислювальних процесів
- •If (умова) {блок операторів 1}
- •7.3. Організація циклічних обчислювальних процесів
- •While (умова) { оператори_циклу }
- •Do { оператори_циклу } while (умова)
- •7.4. Функції
- •Тема 8. Опрацювання форм
- •8.1. Об’єкти браузера
- •8.2. Обробка подій
- •8.3. Робота з текстовими полями
- •8.4 Використання перемикачів у сценаріях
- •8.5. Застосування списків
- •8.6. Робота з прапорцями
- •Тест за змістовим модулем 2 «Мова сценаріїв JavaScript»
- •Розділ 3. Розширювана мова розмітки xml, обробка xml – документів
- •Тема 9. Створення xml – документів, опис шаблону документа
- •9.1. Загальні відомості
- •9.2. Структура xml - документа
- •9.3. Опис шаблону документа dtd
- •9.4. Перевірка правильності xml - документів
- •9.5. Демонстрація xml – документів з використанням
- •Тема 10. Простори імен, xml - схеми
- •10.1. Простори імен xml
- •10.2. Розробка xml - схеми
- •10.3. Визначення умов на значення елементів і атрибутів
- •Тема 11. Мова xPath, мова xslt
- •11.1. Мова xPath
- •11.2. Розширювана мова стилів для перетворень xslt
- •Тема 12. Мова xQuery
- •12.1. Призначення мови xQuery, xQuery – процесор Saxon
- •12.2. Формування запитів xQuery
- •12.3. Конструктори, арифметичні операції та функції
- •12.4. Умовний оператор if
- •If (умова) then
- •Тема 13. Xml – аналізатори і перетворення інформації
- •13.2. Об’єктна модель документа, dom - аналізатори
- •13.3. Застосування об’єктної моделі dom
- •Об’єкт ixmldomNamedNodeMap – невпорядкована колекція вузлів, обраних за ім’ям
- •Тема 14. Застосування xml – технологій на практиці
- •14.1. Використання xml податковою адміністрацією України
- •14.2. Мова xbrl - Extensible Business Report Language
- •14.3. Мова ebXml - Electronic Business xml
- •14.4. Мова cXml - Commerce xml
- •Тест за змістовим модулем 3 «Розширювана мова розмітки xml, обробка xml – документів»
- •Теми рефератів
- •Глосарій
- •Література
- •Основні засади розвитку інформаційного суспільства в україні на 2007 - 2015 роки
- •I. Загальні положення
- •II. Завдання, цілі та напрями розвитку інформаційного суспільства в україні
- •III. Національна політика розвитку інформаційного суспільства в україні
- •IV. Організаційно-правові основи розвитку інформаційного суспільства в україні
- •V. Очікувані результати
- •Множина кольорів у html
Тема 5. Каскадні листи стилів css
5.1. Призначення, синтаксис css
Каскадні листи стилів CSS (від англ. Cascading Style Sheets – каскадні таблиці стилів) дають можливість задати стиль накреслення символів, шрифти, кольори символів і фону, кольори гіпертекстових посилань тощо і далі використовувати ці стилі при визначенні зовнішнього виду документа. CSS надають розробнику такі можливості:
Можна один раз створити файл, у якому міститься опис усіх стилів, і далі посилатися на нього з різних документів.
Швидко та просто змінювати вигляд документа.
CSS здійснюють додатковий контроль над характеристиками документів.
Зменшується час на завантаження документів, оскільки зменшується їх розмір.
Синтаксис листа стилю має структуру:
Елемент або селектор – це може бути будь-який тег або декілька тегів.
Властивість – атрибути форматування для певного елементу.
Значення – значення властивості.
Оголошення – властивість і значення, яке вона має прийняти.
|
|
|
Правило |
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
Оголошення |
|
||
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
Елемент |
|
Властивість |
|
Значення |
|||
Наприклад, запис H1 {color:red; size:20pt;} означає, що всі елементи заголовку першого рівня матимуть червоний колір і розмір 20 пунктів.
Характеристика деяких властивостей наведена у таблиці 5.1.
Таблиця 5.1 - Характеристика властивостей, які використовуються в CSS
Властивості |
Значення |
||
ім’я |
опис |
можливі значення |
опис |
1 |
2 |
3 |
4 |
Параметри шрифту |
|||
font-family |
Гарнітура шрифту |
serif |
шрифт з засічками |
sans-serif |
шрифт без засічок |
||
font-style |
стиль шрифту |
normal |
звичайний |
italic |
курсив |
||
oblique |
нахил |
||
font-variant |
варіанти відображення шрифту |
normal |
нормальний розмір букв |
small-caps |
усі букви виглядають як прописні |
||
font-weight |
жирність шрифту |
normal |
нормальне накреслення |
bold |
напівжирне |
||
bolder |
|
||
lighter |
|
||
|
значення від 100 до 900 з кроком 100 |
|
|
font-size |
розмір шрифту |
розмір |
|
xx-small |
|
||
x-small |
|
||
small |
у 1,2 рази менш ніж medium |
||
medium |
значення у браузері за замовчуванням |
||
large |
у 1,2 рази більш ніж medium |
||
x-large |
|
||
xx-large |
|
||
smaller |
|
||
larger |
|
||
Форматування тексту |
|||
word-spacing |
відстань між словами |
normal |
|
значення |
|
||
text-decoration |
текстові ефекти |
none |
|
underline |
підкреслення |
||
overline |
надкреслення |
||
line-through |
перекреслення |
||
blink |
мигання тексту |
||
letter-spacing |
відстань між буквами |
normal |
|
значення |
задається у тисячних долях М-пробілу (відношення висоти шрифту до висоти прописної букви) |
||
Продовження табл. 5.1
1 |
2 |
3 |
4 |
vertical-align |
позиціонування по відношенню до інших елементів, які знаходяться у одному блоці |
baseline |
по базовій лінії блоку |
sub |
по нижньому індексу |
||
super |
по верхньому індексу |
||
top-text |
по верхньому краю |
||
top |
по верхньому краю (лише для таблиць) |
||
middle |
по середині (лише для таблиць) |
||
bottom |
по нижньому краю (лише для таблиць) |
||
bottom-text |
по нижньому краю |
||
% |
|
||
text-transform |
зміна регістрів тексту |
none |
|
Capitalize |
перші букви усіх слів стають великими |
||
uppercase |
символи перетворюються на прописні |
||
lowercase |
символи перетворюються на строчні |
||
text-align |
вирівнювання тексту |
left |
ліворуч |
right |
праворуч |
||
center |
по центру |
||
justify |
по ширині |
||
text-indent |
відступ для першого рядка абзацу |
значення |
|
% |
|
||
line-height |
відступ зверху |
normal |
|
значення |
|
||
% |
|
||
Визначення кольору і фону |
|||
color |
колір елемента |
значення |
|
background-color |
колір фону елемента |
значення |
|
background-image |
зображення - фон |
none |
|
URL |
|
||
background-repeat |
варіанти повторення фонового зображення |
repeat |
повторюється |
repeat-x |
повторюється лише по осі Х |
||
repeat-y |
повторюється лише по осі У |
||
no-repeat |
не повторюється |
||
background-attachment |
можливість прокрутки фонового зображення |
scroll |
|
fixed |
|
||
Продовження табл. 5.1
1 |
2 |
3 |
4 |
background-position |
положення фонового зображення |
(%ширини%висоти |
|
top |
|
||
middle |
|
||
bottom |
|
||
left |
|
||
center |
|
||
right |
|
||
background |
узагальнює перелічені властивості |
будь-яка комбінація перелічених значень |
|
Параметри блока (уміст сторінки всередині контейнерів <P> або <DIV>) |
|||
margin-top |
визначає відступ зверху |
значення |
|
% |
|
||
auto |
|
||
margin-right |
визначає відступ праворуч |
значення |
|
% |
|
||
auto |
|
||
margin-bottom |
визначає відступ знизу |
значення |
|
% |
|
||
auto |
|
||
margin-left |
визначає відступ ліворуч |
значення |
|
% |
|
||
auto |
|
||
margin |
узагальнює перелічені властивості |
|
|
padding-top |
відступ від верхнього бордюру |
значення |
|
% |
|
||
padding-right |
відступ від правого бордюру |
значення |
|
% |
|
||
padding-bottom |
відступ від нижнього бордюру |
значення |
|
% |
|
||
padding-left |
відступ від лівого бордюру |
значення |
|
padding |
узагальнює перелічені властивості |
% |
|
border-top-width |
товщина верхнього бордюру |
значення |
|
thin |
тонка |
||
medium |
середня |
||
thick |
товста |
||
border-right-width |
товщина правого бордюру |
значення |
|
thin |
|
||
medium |
|
||
thick |
|
||
Продовження табл. 5.1
1 |
2 |
3 |
4 |
border-bottom-width |
товщина нижнього бордюру |
значення |
|
thin |
|
||
medium |
|
||
thick |
|
||
border-left-width |
товщина лівого бордюру |
значення |
|
thin |
|
||
medium |
|
||
thick |
|
||
border-width |
узагальнює перелічені властивості |
|
|
border-color |
колір бордюру |
значення |
|
border-style |
стиль лінії бордюрів |
none |
немає |
dotted |
крапками |
||
dashed |
пунктирна |
||
solid |
суцільна |
||
double |
подвійна |
||
groove |
втиснута |
||
ridge |
об’ємна |
||
inset |
блок всередині рамки відображається втиснутим |
||
outset |
блок всередині рамки відображається випуклим |
||
border-top |
узагальнює перелічені властивості |
|
|
border-right |
узагальнює перелічені властивості |
|
|
border-left |
узагальнює перелічені властивості |
|
|
border-bottom |
узагальнює перелічені властивості |
|
|
border |
узагальнює перелічені властивості |
|
|
width |
ширина елемента |
значення |
|
% |
|
||
height |
висота елемента |
значення |
|
% |
|
||
float |
розташування елемента |
left |
|
right |
|
||
none |
|
Продовження табл. 5.1
1 |
2 |
3 |
4 |
clear |
розташування інших елементів навколо даного |
left |
|
right |
|
||
both |
|
||
none |
|
||
Форматування списків |
|||
display |
визначає, як буде відображатися елемент |
none |
|
block |
|
||
inline |
|
||
list-item |
|
||
white-space |
визначає, як будуть відображатися пробіли між елементами |
normal |
|
pre |
|
||
nowrap |
|
||
list-style-type |
визначає вид list-item маркера в списках |
disc |
замальоване коло |
circle |
порожнє коло |
||
square |
квадрат |
||
decimal |
арабська цифра |
||
lower-roman |
римські цифри маленького розміру |
||
upper-roman |
римські цифри великого розміру |
||
lower-alpha |
стрічні латинські букви |
||
upper-alpha |
прописні латинські букви |
||
none |
|
||
list-style-image |
задає вид list-item маркера із картинки |
none |
|
URL |
|
||
list-style-position |
визначає положення маркера в залежності від list item елемента |
inside |
|
outside |
|
||
list-style |
узагальнює перелічені властивості |
|
|
При створенні нового стилю можна визначати тег, до якого цей стиль буде застосовуватися.
Наприклад, правило
P {color:black; font-family:Times New Roman}
визначає стиль для тексту всередині абзацу – чорний колір символів, шрифт Times New Roman.
Можна також перелічити декілька тегів, на які розповсюджується дане правило.
Наприклад, правило H1, H2, H3 {font-style:italic} визначає, що для заголовків першого, другого та третього рівня використовується стиль накреслення – курсив.
У правилах CSS використовується поняття класу. Клас визначається таким чином
Селектор.Клас { властивість CSS: значення}
Це надає можливість до одного серектору застосовувати різні класи – способи оформлення.
Наприклад,
H1.normal { color:black; font-style:normal;} – стиль заголовку normal
H1.funny { color:blue;font-style:italic} – стиль заголовку funny
Можна визначати також класи, не пов’язані з певними селекторами
.Клас { властивість CSS: значення}
Наприклад,
.red { color:blue } – клас синього кольору елементів.
У таблицях стилів CSS можна також створювати коментарі за таким правилом:
/* текст коментаря */