3. Наведемо правила каскадності стилів:
- Зовнішня таблиця стилів, посилання на яку (тег <LINK>) знаходиться в сторінці пізніше, має приорітет перед тією таблицею, що прив’язана раніше.
- Внутрішня таблиця стилів має приорітет перед зовнішньою.
- Вбудовані стилі мають найвищий приорітет на сторінці.
- Більш конкретні стилі мають приорітет перед менш конкретними: стильові класи – перед стилем пере визначення, комбінований стиль – перед стильовим класом.
- Якщо прив’язані до тега декілька стильових класів, то ті, що вказані правіше мають приорітет перед записаними лівіше.
У стилях можна також створити важливі атрибути, які мають перевагу над всіма аналогічними атрибутами стилю, заданих в інших стилях, навіть в тих, що мають вищий приорітет. Для цього після атрибуту та його значення після пробілу пишуть !important.
EM { color: green; !important
font-weight: bold }
Мова CSS також дозволяє записувати коментарі розробника: однорядкові – з символом / (слеш) на початку стрічки; багаторядкові – містяться між символами /* та */ .
4. Всі розглянуті атрибути стилів можна вказувати і для блокових, і для вбудованих елементів сторінки. Проте деколи виникає необхідність застосувати якийсь конкретний стиль до частини елемента, наприклад, до фрагменту абзацу.
HTML для цього створює особливі елементи – контейнери.
Контейнер – елемент Web-сторінки, призначений тільки для виділення фрагменту елемента. Це може бути частина елемента, весь елемент або навіть декілька блокових елементів. Браузер ніяк не виділяє контейнер на сторінці.
Метою створення контейнерів є:
З його допомогою можна прив’язати до фрагменту, елементу чи сукупності елементів конкретний стиль.
Він також може забезпечувати прив’язку певної поведінки (реакції) сторінки на дії користувача.
Контейнери є блокові та вбудовані. Розглянемо вбудовані.
Вони є частиною блокового елементу сторінки. Створюються за допомогою парного тега <SPAN>. Фрагмент поміщають безпосередньо в цей тег.
<P> Тут почався абзац з <SPAN> дуже важливою </SPAN> інформацією. </P>
До цього контейнера можна прив’язати якийсь стиль:
.bolded { font-weight: bold }
…
<P> Тут почався абзац з <SPAN class="bolded"> дуже важливою </SPAN> інформацією. </P>
Потреба в вбудованих контейнерах виникає рідко, якщо Web-сторінка є добре структурованою.
Розглянемо блокові контейнери. Вони можуть зберігати тільки блокові елементи (як один, так і декілька). Формуються з допомогою парного тега DIV, всередині якого поміщають код, що формує вміст контейнера:
<DIV STYLE="text-align=center">
<H1> Це заголовок </H1>
<P> Тут буде текст першого абзацу </P>
<P> Тут буде абзац під номером 2 </P>
</DIV>
<DIV>
<TABLE border=2>
<HEAD>
<TR> <ТD>Заголовок 1<ТD>Заголовок 2
<TFOOT>
<TR> <ТD>Нижній блок таблиці<ТD>
<ТВODY>
<TR> <ТD>Стрічка 1 <ТD> Комірка 1.2
<TR> <ТD>Стрічка 2 <ТD> комірка 2.2
<ТВODY>
</TABLE>
</DIV>
Використання блокових контейнерів визначає сучасний стиль дизайну Web-сторінок (на противагу текстовому, фреймовому та табличному) – контейнерний Web-дизайн. Контейнер використовують для розміщення окремих частин сторінки, не зв’язуючи їх між собою: заголовка сайту, полоси навігації, основного змісту, повідомлення про авторські права тощо.
Для задання різних параметрів блокового контейнера передбачені різні атрибути CSS: розмір (ширина та висота), місце розміщення та поведінка при переповненні, колір фону, відступи, рамки і т.д.