ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Додавання стилів на web-сторінку
Таблиці стилів можуть бути додані в сторінку трьома різними способами, що розрізняються за своїми можливостями:
• таблиці зв'язаних стилів (linked style sheet);
• таблиці глобальних стилів (global style sheet);
• внутрішні стилі (inline style).
Таблиці зв'язаних стилів (linked style sheet) - найпотужніший і Найзручніший спосіб, визначення стилів і правил для сайту.
Створюється текстовий файл, описуються Ы допомогою мови CSS необхідні стилі, далі розміщують цей файл на Web-сервері, as коді Web-сторінок, що будуть використовувати стилі з цього файлу, потрібно за допомогою тега <LINK> зробити посилання на нього, наприклад:
<LINK REL=STYLESHEET TYPE="text/css?' HREF="URL"> Перші два параметри цього тегу є зарезервованими іменами, які Призначені для того, щоб повідомити оглядачу, що, на цій сторінці буде використовуватися CSS. Третій параметр - HREF= «URL» - вказує на файл, що містить опис стилів.
Приклад 1. Підключення таблиці зв'язаних стилів: <html> <head>
<link'rel="stylesheet" type="text/css" href=mysite.css> </head>
<body> y •
<hl> Підключення таблиці зв'язаних стилів </hl> •' /body> </html>
Переваги даного методу:
1, Використовується один файл зі стилем для будь-якої кількості
" web-сторінок, а також можна його застосовувати на інших сайтах.
2. Мояона змінювати таблицю стилів без модифікації web-сторінок.
3. При зміні стилю в одному файлі, стиль автоматично застосовується до всіх сторінок, де є на нього посилання.
4, При використанні CSS полегшується підтримка сайту.
Файл зі стилем при першому завантаженні міститься в кеш на локальному комп'ютері, окремо від web-сторінки, тому завантаження сайту відбувається швидше.
Таблиці глобальниж стилів (global style sheet) - стиль визначається В самому документі та зазвичай розташовується в заголовку web-сторінки. За гнучкістю та можливостями цей спосіб використання стилю поступається попередньому, але також дозволяє розміщувати всі стилі в одному місці. В даному випадку, прямо в тілі документа. Визначення стилю задається тегом STYLE.
Приклад 2. Використання таблиці глобальних стилів:
<html>
<head>
<style type="text/css">
<H1 { font-size: 120%; font-family: Verdana, Axial, Helvetica, sans-serif; color: #333366; }
</style>
</head> <body>
<Hl> Використання таблиці глобальних стилів </Н1> < /body> </html>
В заголовку визначений стиль тега НІ, який надалі можна використовувати
у будь-якому місці даної web-сторінки.
Внутрішні стилі (inline style) - це розширення для одиночного тега, що використовується на web-сторінці. Для визначення стилю застосовується параметр style, а його атрибути вказуються за допомогою мови таблиці стилів.
Приклад 3. Використання внутрішніх «тилів:
<html>.
<body>
<Н1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; ">.'""■ Використання внутрішніх стилів < /Hl>
</body> пийЯ
</html>
Рекомендується використовувати внутрішній стиль для одиночних тегів або відмовитися від його використання взагалі, оскільки зміна ряду елементів стає проблематичною. Внутрішні стилі не відповідають ідеології структурованого документу, коли вміст та його оформлення розділені.
Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в поєднанні один з одним. Першим завжди застосовується внутрішній стиль, потім таблиця глобальних стилів і в останню чергу таблиця зв'язаних стилів. В прикладі використовуються відразу два методи додавання таблиць стилів у документ.
Приклад 4. Сполучення різних методів підключення стилів: <html>
<head>
<style type="text/css">
<Hl { 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;"> Сполучення різних методів
Підключення стилів </Н1>
<Н1> Сочетание різних методів підключення стилів </н
</body>
</htral>
В приведеному прикладі перший заголовок задається червоним
кольором розміром 36 пікселів, а наступний - зеленим та іншим шрифтом.
Присвоєння СТИЛІВ
Найпростіший випадок присвоєння будь-якому елемещу Визначеного стилю виглядає так:
ИАЗВА_ЕЛЕМЕНТА { властивість: значення;}, де НАЗВА_ЕЛЕМЕНТА - ім'я HTML-тега (НІ, Р, TD, А і т.д.), а параметри в фігурних дужках - список властивостей елемента і привласнених їм значень.
Приклад:!
НІ {font-size: 30pt; color: blue;}
В даному прикладі всім заголовкам на сторінці, оформленим тегом НІ, привласнюється розмір шрифту 30 пунктів і синій колірР
Також елементи сторінок, які створені з використанням CSS, використовують механізм успадковування: тобто якщо розташувати зображення всередині тега <Р>...</Р>, оформленого за допомогою CSS, з відступами, так, щоб параграф займав тільки визначену частину ширини сторінки, зображення також успадкує значення відступів, зазначених для цього параграфа.
CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ГО="ім'я елемента", що привласнюються будь-якому елементу сторінки.
Параметр CLASS застосовується у випадку, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних). Наприклад, розглянемо опис стилю для класу Ь-з: Ь-з {font-weight: bold; text—align: center}
Всі елементи класу b-c будуть відображатися жирним шрифтом з вирівнюванням по центру сторінки (або комірки таблиці).
<P CLASS="b-c">TeKCT параграфа</Р> —параграфу привласнений стиль класу Ь-с.
<TD CLASS="b-c">TeKCT</TD> - комірці таблиці привласнений стиль класу Ь-с.
Присвоєння стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному ідентифікатору відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно привласнити такий стиль, декілька — це вже клас.
Не нашли, что искали? Воспользуйтесь поиском: