Опис в секції заголовка.

Його дія поширюється на всю сторіночку. Визначення стилів відбувається за допомогою класів, які є списками з визначенням всіх необхідних параметрів оформлення.

При використанні цього методу опис стилів необхідно розмістити в секції заголовка:

<head> ....

<!--

.header {

text-align :center;

font-size : 27pt;}

.red {color : red; }

-->

</style>

</head>

Тепер ці стилі можна застосовувати в будь-якому місці html-коду. Для цього використовується наступна конструкція:

<p class=header>Цей текст написаний стилем header<p>

<p class=red>Цей текст написаний червоним кольором<p>

Як бачите, все не так вже складно. Головне зрозуміти основні принципи. Окрім визначення нових класів ми також маємо можливість перевизначати стандартні теги. Наприклад, тег <p>:

<!-- p { text-align : center; font-size :12pt;}

--> </style>

Тепер весь текст, ув'язнений, в теги <p></p> виглядатиме так, як визначено даним стилем. Це дуже зручно і дозволяє легко адаптувати вже існуючі сторінки до використання стилів. Крім того, це декілька зменшує об'єм файлу за рахунок відсутності зайвих атрибутів class.

Винесення опису стилів в зовнішній файл.

Діапазон його дії тягнеться на всі файли, в які включений опис. Це спосіб найбільш відповідає концепції HTML 4.0. В разі, якщо нам потрібно буде змінити зовнішній вигляд сайту, то буде досить скоректувати лише один цей файл. Порівняєте його з попередніми способами. У одному з них доведеться міняти опис на кожній сторінці, а в іншому навіть більш того - біля кожного тега, що, зрозуміло, абсолютно не надихає.

Яким же чином проводиться впровадження зовнішнього файлу? Спершу створюється стильовий файл з описом всіх потрібних нам класів (mystyle.css):

.header { text-align : center; font-size : 27pt;}

.red { color :red; }

p { text-align : center; font-size : 12pt;}

А потім посилання на нього упроваджується в документ за допомогою тега <link>:

<head> .... <link rel="stylesheet" type="text/css"

href="css/mystyle.css" title="MyStyleSheet"> .... </head>

Це найзручніший спосіб, і для основної таблиці стилів рекомендується користуватися саме ним.

Каскадність стилів

Каскадність полягає в тому, що стилі можуть перевизначатися. Приведений вище список способів впровадження стилів відповідає порядку перевизначення. Розташований нижче спосіб може перевизначати вищерозміщений.

Наприклад, ми визначили в зовнішньому стильовому файлі, що текст в тегу <p> має бути написаний за допомогою шрифту заввишки 10 пунктів. Але якщо в заголовку сторінки ми додатково вкажемо, що той же текст в тегі <p> має бути написаний шрифтом в 12 пунктів, то текст буде виведений саме такий кеглем - тобто стиль в заголовку сторінки перевизначив стиль в зовнішньому файлі.

Синтаксис CSS

Опис кожного класу робиться за допомогою конструкції, подібної цій:

.small { font-size: 9pt; }

Спочатку вказується ім'я класу - воно може бути довільним, але бажано все-таки давати осмислену назву. Далі, у фігурних дужках перераховуються всі необхідні параметри для даного класу. Параметри відділяються один від одного крапкою з комою. Ще один приклад, в якому використовується довший опис:

Відмітьте, що ім'я класу починається з крапки і таким чином визначає універсальний клас, тобто такий, який може бути застосований до будь-якого тегу. І робиться це за допомогою наступної конструкції:

<p class=small>Накладаємо стиль на цей текст</p>

Існують універсальні класи і, так звані, тегові класи:

p.small { font-size: 9pt; }

Клас, визначений таким чином, спрацює лише в тому тегу, для якого він призначений, а для всіх інших буде проігнорований.

Ми можемо визначати параметри не лише для одного тега, але і відразу для декількох. Для цього у визначенні стилю досить перерахувати їх через кому:

p, td { font-size: 9pt; color:green;}

Такий прийом називається угрупуванням, і в даному випадку ми визначили і для <p>, і для <td> однаковий розмір і колір тексту.

В разі перевизначення існуючих тегів, в описі стилю можна вказувати не всі параметри, а лише ті з них, які ми хочемо змінити. Всі останні параметри набудуть значень за умовчанням, які для різних тегів різні.

Псевдокласи

У CSS є таке поняття як псевдоклас. На відміну від звичайного класу, дія псевдокласу поширюється не на весь текст, до якого застосований даний стиль, а лише на його частину і можливо лише в певному стані. Аби було зрозуміліше, давайте розберемо ефект, при якому посилання підкреслюються лише при наведенні на них курсору. Ось фрагмент таблиці стилів, який дозволяє досягати вищеописаного ефекту:

а { text-decoration: none; }

a:hover { text-decoration: underline;}

Верхня строчка - це перевизначення стандартного тега <a>, яке забороняє підкреслювати посилання, а ось нижня - це визначення стилю для псевдокласу hover, який описує стиль посилання в мить, коли курсор знаходиться над ним.

А ось і інший приклад псевдокласу - визначення буквиці спочатку абзацу:

p:first-letter { font-size: 200\%; font-weight: bold; }

Відмітьте, що і в тому, і в іншому випадку дія стилю поширюється або на певний стан (користувач збирається клацнути по засланню), або на фрагмент тексту (змінюється лише перша буква абзацу). У цьому і полягає сенс псевдокласів.

Примітки

Як і в будь-якій досить складній мові, при створенні таблиці стилів можна користуватися коментарями. Їх формат аналогічний класичному C:

/* Цей текст є коментарем */

Для невеликих сайтів ця можливість Вам навряд чи згодиться, а ось при створенні складних, багаторівневих таблиць стилів коментарі можуть згодитися. До речі, тут буде доречно привести золоте правило - чим зрозуміліше названа змінна (в даному випадку ім'я класу), тим менше коментарів необхідно.

123

Дата добавления: 2016-04-02; просмотров: 562;