- •Уроки html
- •1. Теги, структура html документа
- •Структура html сторінок
- •2. Форматування тексту
- •Шрифти: гарнітура, розмір, колір
- •Оформлення тексту
- •Заголовки
- •Текст у вигляді великого заголовка
- •Текст у вигляді маленького заголовка Теги перенесення рядка і форматування абзацу
- •Вирівнювання тексту
- •3. Списки.
- •Марковані списки
- •Нумеровані списки
- •Вкладені списки
- •Списки визначень
- •4. Таблиці.
- •Створення таблиць
- •Параметри таблиці
- •Параметри комірок
- •Приклад таблиці.
- •5. Зображення
- •Вставка зображення
- •Розміри зображення
- •Рамка довкола зображення
- •Альтернативний текст
- •Вирівнювання зображення
- •Відступи довкола зображення
- •Розбиття зображення на частини
- •6. Властивості сторінки - параметри тега body
- •Колір тексту
- •Колір фону
- •Фонове зображення
- •Колір заслань
- •Vlink - колір відвіданого заслання (visited link).
- •Відступи довкола контента
- •7. Заслання
- •Як зробити текст засланням
- •Як зробити зображення засланням
- •Колір заслань
- •Заслання усередині сторінки
- •Заслання на нове вікно
- •Заслання у фреймах
- •Заслання на адресу електронної пошти
- •8. Форми.
- •Створення форм
- •Текстове поле
- •Поле для пароля
- •Багаторядковий текст
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Поле із списком
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •1. Символьні об'єкти.
- •Що таке символьні об'єкти?
- •Приклади використання
- •Що таке css?
- •Що таке css?
- •Переваги css перед html
- •Css однією дією дозволяє змінювати відразу всю групу параметрів.
- •11 Додавання стилів
- •Внутрішні стилі
- •Глобальні стилі
- •Зв'язані стилі
- •Поєднання різний видів стилів
Внутрішні стилі
Внутрішній стиль - це свого роду розширення html-тега. Такий стиль створюється у разі потреби задати які-небудь властивості для конкретного об'єкту, а не групи об'єктів. Ці властивості называютя атрибутами стилю.
Для створення такого стилю використовується параметр style, який є у всіх тегов. Параметру style привласнюються перераховані через "крапку з комою" атрибути із заданими значеннями. Значення атрибутам привласнюються не знайомий "рівно", як завжди, а знаком "двокрапка".
Наприклад, Ви хочете, якийсь конкретний заголовок написати помаранчевим кольором і розміром 22 піксели. Для цього напишіть наступне:
<h1 style="color: #CD6600; font-size: 22px">Урок 1</h1>
Розберемо цей приклад. Фраза "Урок 1" виділена тегом заголовка <h1>. В тега <h1> створюється стиль за допомогою параметра style. В стилю задаються 2 атрибути color (колір) і font-size (розмір шрифту), розділені "крапкою з комою". Атрибуту color привласнюється значення #CD6600, атрибуту font-size привласнюється значення 22px.
Глобальні стилі
Глобальні стилі створюються у разі потреби задати які-небудь властивості для групи об'єктів. Такі стилі створюються на початку документа усередині тега <head> і їх дія поширюється на весь документ.
Глобальні стилі додаються в документ таким чином:
Усередині тега <head> вставляється парний тег <style> з параметром type="text/css";
Усередині тега <style> розташовуються всі стилі для даного документа. Стилі розділяються просто перенесенням рядка.
Стиль описується так: пишеться назва стилю і ставляться "фігурні дужки" { }.
Між "фігурними дужками" пишуться всі атрибути стилю з привласненими значеннями, розділені "крапкою з комою". Значення атрибутам привласнюються "двокрапкою", а не знаком "рівно". Після значення останнього атрибуту "крапку з комою" ставити необов'язково.
<head> <style type="text/css"> стиль1 { атрибут1: значення; атрибут2: значення; ... } стиль2 { атрибут1: значення; атрибут2: значення; ... } ... </style> </head>
Наприклад, зробимо всі заголовки <h1> помаранчевого кольору і розміром 22 піксели і всі заголовки <h2> червоного кольору і розміром 20 пікселів:
<head> <style type="text/css"> h1 { color: #CD6600; <-- стиль для тега <h1> font-size: 22px } h2 { color: #FF0000; <-- стиль для тега <h2> font-size: 20px } </style> </head>
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами <h1> і <h2> без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега <head> вставити тег <link> з трьома параметрами:
<head> <Link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
<head> <Link rel="stylesheet" type="text/css" href="style_school.css"> </head>
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 { атрибут1: значення; атрибут2: значення; ... } стиль2 { атрибут1: значення; атрибут2: значення; ... } ...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки <h1> помаранчевого кольору і розміром 22 піксели і всі заголовки <h2> червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 { color: #CD6600; font-size: 22px } h2 { color: #FF0000; font-size: 20px }
І підключимо цей файл до нашого документа:
<head> <Link rel="stylesheet" type="text/css" href="style.css"> </head>
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).