, , і помаранчевого кольору. У звичайному HTML для цього нам знадобилося б кожен заголовок помістити в контейнер з параметром color="#CD6600":
Заголовок 1
...
Заголовок 4
І якби знадобилося змінити колір заголовків, нам довелося б шукати їх по всьому документу і змінювати кожен заголовок окремо.
А за допомогою CSS ми створили стиль для тегов , , і в окремому файлі style_school.css (див. рядок 22). І всі заголовки, задані цими тегами, без додаткових тегов володітимуть потрібними властивостями.
І якщо ми захочемо змінити яку-небудь властивість в заголовків, нам досить буде змінити стиль тегов, і всі заголовки будуть автоматично змінені.
Стилі надають розробникові значно більше можливостей в порівнянні із звичайним HTML.
Наприклад, за допомогою стилів можна задати такі властивості тексту, які не можна задати за допомогою стандартних параметрів того або іншого html-тега.
Всі стилі можна зберігати в окремому файлі. Браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде трохи швидший.
18/04/2007, Ю. Філі
11 Додавання стилів
Внутрішні стилі
Глобальні стилі
Зв'язані стилі
Поєднання різний видів стилів
Вправа
Стилі можна додати трьома способами.
Внутрішні стилі
Внутрішній стиль - це свого роду розширення html-тега. Такий стиль створюється у разі потреби задати які-небудь властивості для конкретного об'єкту, а не групи об'єктів. Ці властивості называютя атрибутами стилю.
Для створення такого стилю використовується параметр style, який є у всіх тегов. Параметру style привласнюються перераховані через "крапку з комою" атрибути із заданими значеннями. Значення атрибутам привласнюються не знайомий "рівно", як завжди, а знаком "двокрапка".
Наприклад, Ви хочете, якийсь конкретний заголовок написати помаранчевим кольором і розміром 22 піксели. Для цього напишіть наступне:
Урок 1
Розберемо цей приклад. Фраза "Урок 1" виділена тегом заголовка . В тега створюється стиль за допомогою параметра style. В стилю задаються 2 атрибути color (колір) і font-size (розмір шрифту), розділені "крапкою з комою". Атрибуту color привласнюється значення #CD6600, атрибуту font-size привласнюється значення 22px.
Глобальні стилі
Глобальні стилі створюються у разі потреби задати які-небудь властивості для групи об'єктів. Такі стилі створюються на початку документа усередині тега
Наприклад, зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів:
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами і без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
і помаранчевого кольору. У звичайному HTML для цього нам знадобилося б кожен заголовок помістити в контейнер з параметром color="#CD6600":
Заголовок 1
...
Заголовок 4
І якби знадобилося змінити колір заголовків, нам довелося б шукати їх по всьому документу і змінювати кожен заголовок окремо.
А за допомогою CSS ми створили стиль для тегов , , і в окремому файлі style_school.css (див. рядок 22). І всі заголовки, задані цими тегами, без додаткових тегов володітимуть потрібними властивостями.
І якщо ми захочемо змінити яку-небудь властивість в заголовків, нам досить буде змінити стиль тегов, і всі заголовки будуть автоматично змінені.
Стилі надають розробникові значно більше можливостей в порівнянні із звичайним HTML.
Наприклад, за допомогою стилів можна задати такі властивості тексту, які не можна задати за допомогою стандартних параметрів того або іншого html-тега.
Всі стилі можна зберігати в окремому файлі. Браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде трохи швидший.
18/04/2007, Ю. Філі
11 Додавання стилів
Внутрішні стилі
Глобальні стилі
Зв'язані стилі
Поєднання різний видів стилів
Вправа
Стилі можна додати трьома способами.
Внутрішні стилі
Внутрішній стиль - це свого роду розширення html-тега. Такий стиль створюється у разі потреби задати які-небудь властивості для конкретного об'єкту, а не групи об'єктів. Ці властивості называютя атрибутами стилю.
Для створення такого стилю використовується параметр style, який є у всіх тегов. Параметру style привласнюються перераховані через "крапку з комою" атрибути із заданими значеннями. Значення атрибутам привласнюються не знайомий "рівно", як завжди, а знаком "двокрапка".
Наприклад, Ви хочете, якийсь конкретний заголовок написати помаранчевим кольором і розміром 22 піксели. Для цього напишіть наступне:
Урок 1
Розберемо цей приклад. Фраза "Урок 1" виділена тегом заголовка . В тега створюється стиль за допомогою параметра style. В стилю задаються 2 атрибути color (колір) і font-size (розмір шрифту), розділені "крапкою з комою". Атрибуту color привласнюється значення #CD6600, атрибуту font-size привласнюється значення 22px.
Глобальні стилі
Глобальні стилі створюються у разі потреби задати які-небудь властивості для групи об'єктів. Такі стилі створюються на початку документа усередині тега
Наприклад, зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів:
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами і без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 1
...
Заголовок 4
І якби знадобилося змінити колір заголовків, нам довелося б шукати їх по всьому документу і змінювати кожен заголовок окремо.
А за допомогою CSS ми створили стиль для тегов ,
, і в окремому файлі style_school.css (див. рядок 22). І всі заголовки, задані цими тегами, без додаткових тегов володітимуть потрібними властивостями.
І якщо ми захочемо змінити яку-небудь властивість в заголовків, нам досить буде змінити стиль тегов, і всі заголовки будуть автоматично змінені.
Стилі надають розробникові значно більше можливостей в порівнянні із звичайним HTML.
Наприклад, за допомогою стилів можна задати такі властивості тексту, які не можна задати за допомогою стандартних параметрів того або іншого html-тега.
Всі стилі можна зберігати в окремому файлі. Браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде трохи швидший.
18/04/2007, Ю. Філі
11 Додавання стилів
Внутрішні стилі
Глобальні стилі
Зв'язані стилі
Поєднання різний видів стилів
Вправа
Стилі можна додати трьома способами.
Внутрішні стилі
Внутрішній стиль - це свого роду розширення html-тега. Такий стиль створюється у разі потреби задати які-небудь властивості для конкретного об'єкту, а не групи об'єктів. Ці властивості называютя атрибутами стилю.
Для створення такого стилю використовується параметр style, який є у всіх тегов. Параметру style привласнюються перераховані через "крапку з комою" атрибути із заданими значеннями. Значення атрибутам привласнюються не знайомий "рівно", як завжди, а знаком "двокрапка".
Наприклад, Ви хочете, якийсь конкретний заголовок написати помаранчевим кольором і розміром 22 піксели. Для цього напишіть наступне:
Урок 1
Розберемо цей приклад. Фраза "Урок 1" виділена тегом заголовка . В тега створюється стиль за допомогою параметра style. В стилю задаються 2 атрибути color (колір) і font-size (розмір шрифту), розділені "крапкою з комою". Атрибуту color привласнюється значення #CD6600, атрибуту font-size привласнюється значення 22px.
Глобальні стилі
Глобальні стилі створюються у разі потреби задати які-небудь властивості для групи об'єктів. Такі стилі створюються на початку документа усередині тега
Наприклад, зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів:
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами і без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
в окремому файлі style_school.css (див. рядок 22). І всі заголовки, задані цими тегами, без додаткових тегов володітимуть потрібними властивостями.
І якщо ми захочемо змінити яку-небудь властивість в заголовків, нам досить буде змінити стиль тегов, і всі заголовки будуть автоматично змінені.
Стилі надають розробникові значно більше можливостей в порівнянні із звичайним HTML.
Наприклад, за допомогою стилів можна задати такі властивості тексту, які не можна задати за допомогою стандартних параметрів того або іншого html-тега.
Всі стилі можна зберігати в окремому файлі. Браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде трохи швидший.
18/04/2007, Ю. Філі
11 Додавання стилів
Внутрішні стилі
Глобальні стилі
Зв'язані стилі
Поєднання різний видів стилів
Вправа
Стилі можна додати трьома способами.
Внутрішні стилі
Внутрішній стиль - це свого роду розширення html-тега. Такий стиль створюється у разі потреби задати які-небудь властивості для конкретного об'єкту, а не групи об'єктів. Ці властивості называютя атрибутами стилю.
Для створення такого стилю використовується параметр style, який є у всіх тегов. Параметру style привласнюються перераховані через "крапку з комою" атрибути із заданими значеннями. Значення атрибутам привласнюються не знайомий "рівно", як завжди, а знаком "двокрапка".
Наприклад, Ви хочете, якийсь конкретний заголовок написати помаранчевим кольором і розміром 22 піксели. Для цього напишіть наступне:
Урок 1
Розберемо цей приклад. Фраза "Урок 1" виділена тегом заголовка . В тега створюється стиль за допомогою параметра style. В стилю задаються 2 атрибути color (колір) і font-size (розмір шрифту), розділені "крапкою з комою". Атрибуту color привласнюється значення #CD6600, атрибуту font-size привласнюється значення 22px.
Глобальні стилі
Глобальні стилі створюються у разі потреби задати які-небудь властивості для групи об'єктів. Такі стилі створюються на початку документа усередині тега
Наприклад, зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів:
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами і без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
Стилі надають розробникові значно більше можливостей в порівнянні із звичайним HTML.
Всі стилі можна зберігати в окремому файлі. Браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде трохи швидший.
Внутрішні стилі
Глобальні стилі
Зв'язані стилі
Поєднання різний видів стилів
Вправа
Розберемо цей приклад. Фраза "Урок 1" виділена тегом заголовка . В тега
створюється стиль за допомогою параметра style. В стилю задаються 2 атрибути color (колір) і font-size (розмір шрифту), розділені "крапкою з комою". Атрибуту color привласнюється значення #CD6600, атрибуту font-size привласнюється значення 22px.
Глобальні стилі
Глобальні стилі створюються у разі потреби задати які-небудь властивості для групи об'єктів. Такі стилі створюються на початку документа усередині тега
Наприклад, зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів:
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами і без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
червоного кольору і розміром 20 пікселів:
Після додавання цих стилів, всі заголовки Вашого документа, виділені тегами і без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
без додаткових тегов володітимуть потрібними властивостями. І якщо Ви захочете змінити або додати яку-небудь властивість, Ви просто зміните або додасте його в соответсвующем стилі.
Зв'язані стилі
Таблиці зв'язаних стилів (Linked Style Sheet) створюються в окремому файлі з розширенням .css і підключаються до документа (або декільком документам).
Цей спосіб додавання стилів найбільш зручний зі всіх описаних способів і надає більше число можливостей для web-разработчика.
По-перше, дія стилів, описаних в отдельномом файлі, поширюється на будь-яку кількість документів, до яких він підключений, а також цей же файл можна використовувати і на інших сайтах.
По-друге, можна змінювати стилі без зміни html-страниц. І всі зміни автоматично застосуються до всіх сторінок, до яких підключений файл стилів.
І, по-третє, при першому завантаженні браузер кэширует (запам'ятовує) такі файли, тому завантажуватися Ваш сайт буде нескольк про швидше.
Прикладом таблиці зв'язаних стилів є файл style_school.css, який підключається до кожної сторіночки наших уроків. І варто нам захотіти змінити, наприклад, колір або розмір заголовків у всіх уроках, ми всього лише змінимо відповідні параметри в підключеному файлі стилів, і заголовки у всіх уроках автоматично набудуть потрібних властивостей.
Аби підключити до документа файл стилів, потрібно на початку документа усередині тега
Де параметри rel="stylesheet" і type="text/css" - постійні, а параметру href привласнюється адреса файлу стилів. Адреса може бути як абсолютний, так і відносний.
Наприклад, до наших уроків файл стилів style_school.css можна підключити так:
Усередині файлу стилів описуються всі необхідні стилі, розділені перенесенням рядки, так само як і глобальні стилі:
стиль1 {
атрибут1: значення;
атрибут2: значення;
...
}
стиль2 {
атрибут1: значення;
атрибут2: значення;
...
}
...
Поглянете, як влаштований файл style_school.css.
Для прикладу створимо документ із заголовками (відкрийте його, поглянете, як він виглядає без стилів, і поглянете його код). Зробимо всі заголовки помаранчевого кольору і розміром 22 піксели і всі заголовки червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
червоного кольору і розміром 20 пікселів. Для цього створимо файл стилів style.css, що містить наступне:
h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}
І підключимо цей файл до нашого документа:
Вийде такий документ (відкрийте його, поглянете, як він виглядає із застосуванням стилів, і поглянете його код).
Поєднання різний видів стилів
Всі описані види стилів можна використовувати спільно один з одним. Лише в цьому випадку варто пам'ятати про пріоритети: більший пріоритет мають внутрішні стилі, потім глобальні, і найменший - зв'язані таблиці стилів.
Наприклад, зробимо всі заголовки помаранчевого кольору, а один конкретний - червоного кольору. Для помаранчевих заголовків створимо глобальний стиль, а для червоного - внутрішній:
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 1
Заголовок 2
Заголовок 3
1 2