|
Читайте также: |
1. CSS однією дією дозволяє змінювати відразу всю групу параметрів.
Наприклад, в наших уроках всі заголовки, задані тегами <h1>, <h2>, <h3> і <h4> помаранчевого кольору. У звичайному HTML для цього нам знадобилося б кожен заголовок помістити в контейнер <font> з параметром color="#CD6600":
<font color="#CD6600"><h1>Заголовок 1</h1></font>
...
<font color="#CD6600"><h4>Заголовок 4</h4></font>
І якби знадобилося змінити колір заголовків, нам довелося б шукати їх по всьому документу і змінювати кожен заголовок окремо.
А за допомогою CSS ми створили стиль для тегов <h1>, <h2>, <h3> і <h4> в окремому файлі style_school.css (див. рядок 22). І всі заголовки, задані цими тегами, без додаткових тегов володітимуть потрібними властивостями.
І якщо ми захочемо змінити яку-небудь властивість в заголовків, нам досить буде змінити стиль тегов, і всі заголовки будуть автоматично змінені.
2. Стилі надають розробникові значно більше можливостей в порівнянні із звичайним HTML.
Наприклад, за допомогою стилів можна задати такі властивості тексту, які не можна задати за допомогою стандартних параметрів того або іншого html-тега.
3. Всі стилі можна зберігати в окремому файлі. Браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде трохи швидший.
18/04/2007, Ю. Філі
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> і їх дія поширюється на весь документ.
Глобальні стилі додаються в документ таким чином:
1. Усередині тега <head> вставляється парний тег <style> з параметром type="text/css";
2. Усередині тега <style> розташовуються всі стилі для даного документа. Стилі розділяються просто перенесенням рядка.
3. Стиль описується так: пишеться назва стилю і ставляться "фігурні дужки" { }.
4. Між "фігурними дужками" пишуться всі атрибути стилю з привласненими значеннями, розділені "крапкою з комою". Значення атрибутам привласнюються "двокрапкою", а не знаком "рівно". Після значення останнього атрибуту "крапку з комою" ставити необов'язково.
<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>
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки <h1> помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
<head>
h1 {
color: #CD6600
}
</head>
<body>
<h1>Заголовок 1</h1>
<h1 style="color: #FF0000">Заголовок 2</h1>
<h1>Заголовок 3</h1>
</body>
В результаті даного прикладу "Заголовок 1" і "Заголовок 3" будуть помаранчевого кольору, а "Заголовок 2" - червоного.
Вправа
Створіть html-документ, в якому різні об'єкти виділите різним кольором за допомогою всіх трьох видів стилів.
Викладете файл, що вийшов, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.
Дата добавления: 2015-10-02; просмотров: 56 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Приклади використання | | | ОСНОВНЫЕ ПОЛОЖЕНИЯ КОНКУРСОВ |