Главная Обратная связь

Дисциплины:






Використання стилів внутрішньої таблиці



Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.

<HEAD>

<STYLE>

Тегі { в л а с т и в і с т ь 1 1 : значення11; в л а с т и в і с т ь 1 2 : значення12; ...; в л а с т и в і с т ь 1 n : з н а ч е н н я і 1 n }

Тег2 { в л а с т и в і с т ь 2 1 : значення21; в л а с т и в і с т ь 2 2 : значення22; ...; в л а с т и в і с т ь 2 m : значення2m}

</STYLE>

</HEAD>

Як видно з коду, найпростіша внутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується, як правило, з нового рядка. Визначення тегу містить його ім'я без кутових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрапками. Розглянемо приклад.

Визначимо стилі заголовків першого та другого рівнів із використанням тегу <STYLE>.

<HTML>

<HEAD>

<STYLE>

H1 {font-size: 48pt; color: red}

H2 {font-size: 20pt; color: blue}

</STYLE>

<TITLE>Приклад використання CSS</TITLE>

</HEAD>

<BODY>

<Н1>Для заголовка першого рівня визначено розмір 48 pt, а колір тексту — червоний </Н!>

<Н2>Для заголовка другого рівня визначено розмір 20 pt, а колір тексту — синій </Н2>

<Р>Для цього абзацу стиль не застосовано, для оформлення тексту використано атрибути за умовчанням. </BODY>

</HTML>

У цьому описі стилю змінено оформлення заголовків Н1 та Н2. Зокрема, для першого призначено розмір 48 пунктів і червоний колір, а для другого — розмір 20 пунктів і синій колір.

У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до такого стилю за іменем, використовуючи атрибут СLASS=ім' я_стилю, де ім'я записують вже без крапки. Для одного тагу можна використовувати декілька стилів форматування.

Наприклад, застосовуючи атрибут CLASS тегу </Р>, задамо для двох абзаців різні стилі: першому надамо розмір шрифту 38 пунктів, білий колір символів і оливковий колір тла, другому — розмір шрифту 46 пунктів, фіолетовий колір символів і рожевий колір тла.

<HTML>

<HEAD>

<STYLE>

.stylel {font-size: 38pt; color: white; background-color: olive}

.style2 {font-size: 46pt; color: magenta; background-color: mistyrose}

</STYLE>

<TITLE>Приклад використання CSS</TITLE>

</HEAD>

<BODY>

<P CLASS=stylel>До цього абзацу застосовано стиль stylel </Р>

<Р CLASS=style2>До цього абзацу застосовано стиль style2 </Р>



</BODY>

</HTML>

Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприклад, ефект об'ємного тексту або накладання (часткового перекриття) фрагментів сторінки.

Приклад 5 . 1. Створення текстових ефектів за допомогою стилів

Визначимо для тегу <BODY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міститься між тегами <BODY> та </BODY>, буде автоматично відформатований відповідно до цих властивостей. Тепер визначимо стилі з

іменами тінь, основа, шар1 і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шар1 та шар2. Порядок накладання задано розташуванням фрагментів тексту в HTML-документі.

У прикладі буде застосовано такі властивості:

• margin-top — відступ згори (за від'ємних значень можна

забезпечити накладання фрагментів); • color — колір;

• font-size — розмір шрифту;

• font-family — сімейство шрифтів (гарнітура);

• line-height — висота рядка.

Визначені в документі стилі мають такі параметри:

• . тінь — колір зі значенням #DBDBDB (світло-сірий), вирівнювання по центру, відступ згори — ЗО пікселів, розмір шрифту — 80 пікселів, висота рядка — 270 пікселів, гарнітура — Times;

• . основа — червоний колір шрифту, відступ згори — -230 пікселів, розмір — 70 пікселів, висота рядка — 250 пікселів, гарнітура — Times;

• .шар1 — чорний колір шрифту, відступ згори — -100 пікселів, розмір шрифту — 50 пікселів, висота рядка 65 пікселів, гарнітура — Arial;

• .шар2 — зелений колір шрифту, відступ згори — 30 пікселів, розмір шрифту — 35 пікселів, висота рядка — 45 пікселів, гарнітура — Arial.

Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматуе, а лише відзначає фрагмент тексту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим

задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.

<HTML>

<HEAD>

<TITLE>Приклад використання CSS</TITLE>

<STYLE>

BODY {color: black; font-size: 16px; font-family: Arial}

.тінь {color: #DBDBDB; text-align: center;; margin-top: ЗОрх; font-size: 80px; line-height: 270px; font-family: Times}

176 Розділ 5. Таблиці каскадних стилів і динамічні веб-сайти .основа (color: red; margin-top: -230px; font-size: 70px; line-height: 250px; font-family: Times}

.шар1 {color: black; margin-top: -lOOpx; medium; font-size: 50px; line-height: 65px; font-family: Arial}

.шар2 {color: green; margin-top: ЗОрх; font-size: 35px; line-height: 45px; font-family: Arial}

</STYLE>

</HEAD>

<BODY>

Приклад використання каскадних стилів

<CENTER>

<TABLE WIDTH=500 CELLPADING=0 CELLSPASING=0 BORDER=0>

<TR>

<TD ALIGN=CENTER VALIGN=TOP>

<DIV CLASS=тінь>Текст із тінню</DIV>

<DIV CLASS=основа>Текст із тінню</DIV>

<DIV CLASS=шар1>Приклад тексту із тінню</DIV>

<DIV CLASS=шар2>Це приклад використання каскадних стилів</DIV>

</TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Вбудовані стилі

Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>... <Нб>, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення. Наприклад: <Р STYLE="font-size: 48pt; color: yellow">

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

Цей підхід використовують для оформлення невеликої кількості елементів.

Приклад використання атрибута STYLE для форматування заголовка другого рівня:

<Н2 STYLE="font-size: 48pt; font-family: Arial">Текст...</Н2>





sdamzavas.net - 2019 год. Все права принадлежат их авторам! В случае нарушение авторского права, обращайтесь по форме обратной связи...