Додавання CSS
Таблиці стилів можуть бути додані на веб-сторінку трьома різними способами, які розрізняються за своїми можливостями.
Таблиці пов'язаних стилів
Найпотужніший і зручний спосіб визначення стилів і правил для сайту. Стилі зберігаються в окремому файлі, який може бути використаний для будь-яких веб-сторінок. Для підключення таблиці пов'язаних стилів використовується тег <LINK> в заголовку сторінки (приклад 1).
Приклад 1. Підключення таблиці пов'язаних стилів
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
<Link rel = "stylesheet" type = "text / css" href = "mysite.css">
<Link rel = "stylesheet" type = "text / css" href = "http://www.mysite.ru/main.css">
</ Head>
<Body>
<H1> Hello, world! </ H1>
</ Body>
</ Html>
Шлях до файлу зі стилями може бути як відносним, так і абсолютним, як показано в даному прикладі.
Переваги даного способу
- Використовується один файл зі стилем для будь-якої кількості веб-сторінок, також можливо його застосовувати на інших сайтах.
- Можна змінювати таблицю стилів без модифікації веб-сторінок.
- При зміні стилю в одному єдиному файлі, стиль автоматично застосовується до всіх сторінок, де є на нього посилання. Безсумнівно, зручно. Вказуємо розмір шрифту в одному тільки місці, і він змінюється на всіх сто або більше веб-сторінках нашого сайту.
- Файл із стилем при першому завантаженні поміщається в кеш на локальному комп'ютері, окремо від веб-сторінок, тому завантаження сайту відбувається швидше.
Таблиці глобальних стилів
Стиль визначається в самому документі і зазвичай розташовується в заголовку веб-сторінки. За своєю гнучкості і можливостям цей спосіб використання стилю поступається попередньому, але також дозволяє розміщувати всі стилі в одному місці. В даному випадку, прямо в тілі документа. Визначення стилю задається тегом <STYLE> (приклад 2).
Приклад 2. Використання таблиці глобальних стилів
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
<Style type = "text / css">
H1 {
font-size: 120%; /* Розмір шрифту */
font-family: Verdana, Arial, Helvetica, sans-serif; / * Сімейство шрифту * /
color: # 336; / * Колір тексту * /
}
</ Style>
</ Head>
<Body>
<H1> Hello, world! </ H1>
</ Body>
</ Html>
В даному прикладі показано зміна стилю заголовка <H1>. На веб-сторінці тепер достатньо вказати тільки цей тег і стилі будуть додані до нього автоматично.
внутрішні стилі
Внутрішній стиль є по суті розширенням для одиночного тега використовується на веб-сторінці. Для визначення стилю використовується параметр style, а його атрибути вказуються за допомогою мови таблиці стилів (приклад 3) ..
Приклад 3. Використання внутрішніх стилів
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
</ Head>
<Body>
<H1 style = "font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 336"> Hello, world! </ H1>
</ Body>
</ Html>
Рекомендується використовувати внутрішній стиль для одиночних тегів відмовитися від його використання взагалі, оскільки зміна ряду елементів стає проблематичним. Внутрішні стилі не відповідають ідеології структурного документа, коли вміст і його оформлення розділені.
Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в поєднанні один з одним. В цьому випадку необхідно пам'ятати про їх ієрархії. Першим завжди застосовується внутрішній стиль, потім таблиця глобальних стилів і в останню чергу таблиця пов'язаних стилів. У прикладі 4 використовуються відразу два методи додавання таблиць стилів в документ.
Приклад 4. Поєднання різних методів підключення стилів
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
<Style type = "text / css">
H1 {font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</ Style>
</ Head>
<Body>
<H1 style = "font-size: 36px; font-family: Times, serif; color: red;"> Hello, world! </ H1>
<H1> Hello, world! </ H1>
</ Body>
</ Html>
У наведеному прикладі перший заголовок задається червоним кольором розміром 36 пікселів, а наступний - зеленим кольором і іншим шрифтом.
Copyright що кредитують © www.htmlbook.ru
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.