2018-01-08
534
Як вам уже відомо, інформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, якщо ви плануєте застосовувати ці стилі до більшому, ніж однієї, кількості сторінок. Для цього потрібно створити звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, розмістити цей файл на Web-сервері, а в коді Web-сторінок, які будуть використати стилі із цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тегу <LINK>, що розташовується усередині тегу <BODY> ваших сторінок:
| <LINK REL=STYLESHEET TYPE="text/css" HREF="URL"> |
Перші два параметри цього тегу є зарезервованими іменами, що вимагаються для того, щоб повідомити броузеру, що на цій сторінці буде використатися CSS. Третій параметр - HREF= «URL» - указує на файл, що містить опису стилів. Цей параметр повинен містити або відносний шлях до файлу - у випадку, якщо він перебуває на тім же сервері, що й документ, з якого до нього звертаються - або повний URL («http://...») у випадку, якщо файл стилів перебуває на іншому сервері.
|
|
|
Другий варіант, при якому опис стилів розташовується в коді Web-сторінки, усередині тегу <BODY>, у тегу <STYLE type="text/css">... </STYLE>. У цьому випадку ви можете використати ці стилі для елементів, що розташовуються в межах сторінки. Параметр type="text/css" є обов'язковим і служить для вказівки броузеру використати CSS.
І третій варіант, коли опис стилю розташовується безпосередньо усередині тегу елемента, що ви описуєте. Це робиться за допомогою параметра STYLE, використовуваного при застосуванні CSS з більшістю стандартних тегів HTML. Цей метод небажаний, і зрозуміло чому: він приводить до втрати одного з основних переваг CSS - можливості відділення інформації від опису оформлення інформації. Втім, якщо необхідно описати лише один елемент, цей варіант розташування опису стилів також цілком застосуємо.
Давайте розглянемо механізм, за допомогою якого стилі привласнюються елементам Webстраниц. Найпростіший випадок присвоєння якому-небудь елементу певного стилю виглядає так:
| НАЗВА_ЕЛЕМЕНТА {властивість: значення;}, |
Де НАЗВА_ЕЛЕМЕНТА - ім'я HTML-тега (H1, P, TD, A і т.д.), а параметри у фігурних дужках - список властивостей елемента й привласнених їм значень. Більш докладно команди мови CSS ми розглянемо трохи пізніше.
Приклад:
| H1 {font-size: 30pt; color: blue;} |
У цьому прикладі всім заголовкам на сторінці, оформленим тегом Н1, привласнюється розмір шрифту 30 пунктів і синій кольори.
Також елементи сторінок, створені з використанням CSS, використають механізм спадкування: тобто якщо ви розташовуєте зображенн усередині тегу <P>...</P>, оформленого за допомогою CSS, з відступами, так, щоб параграф займав тільки певну частину ширини сторінки, зображення також успадкує значення відступів, зазначені для цього параграфа.
|
|
|
CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використається параметр CLASS = "ім'я класу" або ідентифікатор ID=«ім'я елемента», що привласнюються будь-якому елементу сторінки. Розглянемо ці можливості докладніше.
Параметр CLASS застосовується у випадку, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних).
Приклад:
| .b-з {font-weight: bold; text-align: center} - опис стилю для класу b-з |
Всі елементи класу b-з будуть відображатися жирним шрифтом з вирівнюванням по центрі сторінки (або осередку таблиці).
| <P CLASS="b-з">Текст параграфа</P>- параграфу привласнений стиль класу b-з. <TD CLASS="b-c">текст</TD>- осередку таблиці привласнений стиль класу b-c. |
текст, Що Втримується в осередку, буде відображатися відповідно до опису класу.
Таким чином, ви можете привласнити описаний стиль будь-яким текстовим елементам сторінок. Зверніть увагу, що при написанні назви класів необхідно дотримувати регістр символів, згідно тому, як ви назвали клас в описі стилю!
Присвоєння стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному ідентифікатору відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно привласнити такий стиль, трохи - це вже клас.
