Зовнішні таблиці стилів
Русский перевод: Внешние таблицы стилей
Ми створюємо зовнішні каскадні таблиці стилів в окремих документах, даючи їм розширення “.css”. Зовнішня каскадна таблиця стилів є простий список правил. Вона не містить HTML-тегів. CrashCourse / Demos / Stylesheet.css – приклад зовнішньої таблиці стилів.
Приклад коду
1
.warning {color:#ff0000}
2
h1.warning {text-decoration:underline}
3
p.warning {font-weight:bold}
Ми можемо підключити вказаний CSS-файл до будь-якої кількості сторінок HTML. Тег <link>, який розміщується у верхній частині HTML-сторінки, посилається на зовнішню каскадну таблицю стилів.
Приклад коду
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>External Style Sheet</title> 06 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 07 </head> 08 <body> 09 <h1 class="warning">WARNING</h1> 10 <p class="warning">Don't go there!</p> 11 </body> 12 </html>
Атрибути <link>
| Атрибути | Опис |
|---|---|
| href | вказує на місцезнаходження зовнішньої каскадної таблиці стилів |
| rel | атрибут повинен встановлювати значення “stylesheet” для посилання на таблицю стилів |
| type | повинно бути встановлено “text/css” для посилання на таблицю стилів |
Кількість зовнішніх каскадних таблиць стилів, які може використовувати сторінка HTML, необмежено. Більше того, ми можемо об’єднувати зовнішні таблиці стилів, використовуючи техніку впровадження стильових таблиць.
Вбудовані стилі
Ми створюємо вбудовані стилі, додаючи тегам атрибути стилю. Так само як і у випадку з класом чи атрибутами ідентифікатора (id), більшість елементів можуть мати стильові атрибути. Значення атрибуту стилю розділяються крапкою з комою. Зразок коду нижче демонструє застосування вбудованого стилю:
Зразок коду
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>Inline Styles</title> 06 </head> 07 <body> 08 <p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p> 09 <ul style="margin-top:-20px; font-size:10pt"> 10 <li style="list-style-type:square">Hello</li> 11 <li style="list-style-type:circle">Hi</li> 12 <li style="list-style-type:disc">Howdy</li> 13 </ul> 14 </body> 15 </html>