Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Поняття про таблиці каскадних стилів
Стиль — це набір правил оформлення та форматування, який мож на застосувати до різних елементів веб-документа. У разі викори стання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться задавати ці властивості для кожного елемента. Викори стання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. Стилі дають змогу позиціювати елементи сто рінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказу вати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.
Таблиці каскадних стилів — це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще ви значеннями тегів. Наприклад:
Р {
Тут задано параметри для тегу абзацу <Р>, які встановлюють розмір шрифту 40 пунктів, колір шрифту — зелений, гарніту ру — Comic Sans MS. У документі достатньо ввести теги <Р>...</Р> із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.
Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML. У наведено му прикладі встановлено розмір шрифту 40 пунктів, хоча в мові HTML за допомогою атрибута SIZE можна задати для шрифту максимальний розмір 7, що відповідає 36 пунктам. Крім того, таблиці каскадних стилів дають змогу визначити єди ний стиль оформлення для різних сторінок документа і швид ко модифікувати його зміною відповідного параметра у таблиці стилів.
Параметрів форматування, які можна задавати за допомогою сти лів, досить багато. Це, зокрема:
Застосування каскадних стилів у HTML-документах
Є три способи зв'язку каскадних стилів із HTML-документом: під ключення зовнішньої таблиці стилів; розташування опису стилів у розділі HEAD документа; задавання властивостей стилів безпосе редньо в тегах абзаців чи заголовків.
Підключення зовнішньої таблиці стилів
Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .ess. Його підключають до HTML-докумен та за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">
Атрибути REL та TYPE вказують браузеру на те, що сторінка ви користовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css).
Вправа 5.1
Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів.
1. Відкрийте текстовий редактор Блокнот і введіть таке визна чення тегу <Р>:
Р (
2. Збережіть файл з іменем mystyle.css.
Створіть у Блокноті файл такого змісту:
<HTML> <HEAD>
<LINK REL="stylesheet" TYPE="text/ess" HREF="mystyle.css">
<ТІТЬЕ>Приклад використання CSS</TITLE>
</HEAD>
<BODY>
<Р>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту - зелений, а гарнітура - Comic Sans MS.</P> </BODY> </HTML>
Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.
Відкрийте файл pryklad1.html у вікні браузера (рис. 5.1). Як бачите, хоча в цьому документі не задано жодних параметрів для тегу <Р>...</Р>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.
Перевага такого методу підключення CSS полягає у тому, що одну таблицю стилів можна підключати до багатьох документів, і всі вони матимуть єдине стильове оформлення.
Використання стилів внутрішньої таблиці
Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами
<STYLE> та </STYLE>.
<HEAD> <STYLE>
Terl {властивістьіі: значенняіі; властивість12: значення12;
властивістьіп: значенняіп} Тег2 {властивість21: значення21; властивість22: значення22;
властивість2т: значення2т}
</STYLE> </HEAD>
Як видно з коду, найпростіша внутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується, як пра вило, з нового рядка. Визначення тегу містить його ім'я без ку тових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрап ками. Розглянемо приклад.
Визначимо стилі заголовків першого та другого рівнів із викори станням тегу <STYLE>.
<HTML> <HEAD> <STYLE>
HI {
<ТІТЬЕ>Приклад використання CSS</TITLE>
</HEAD>
<BODY>
<Н1>Для заголовка першого рівня визначено розмір 48 pt, а колір тексту — червоний </Н1>
<Н2>Для заголовка другого рівня визначено розмір 20 pt, а колір тексту — синій </Н2>
<Р>Для цього абзацу стиль не застосовано, для оформлення
тексту використано атрибути за умовчанням.
</BODY>
</HTML>
У цьому описі стилю змінено оформлення заголовків ні та Н2. Зокрема, для першого призначено розмір 48 пунктів і червоний колір, а для другого — розмір 20 пунктів і синій колір. У вікні браузера цей документ матиме вигляд, як на рис. 5.2.
У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до тако го стилю за іменем, використовуючи атрибут CLASS=iм'я_стилю, де ім'я записують вже без крапки. Для одного тегу можна вико ристовувати декілька стилів форматування.
Наприклад, застосовуючи атрибут CLASS тегу </Р>, задамо для двох абзаців різні стилі: першому надамо розмір шрифту 38 пунк тів, білий колір символів і оливковий колір тла, другому — роз мір шрифту 46 пунктів, фіолетовий колір символів і рожевий колір тла.
<HTML> <HEAD> <STYLE>
.stylel {
.style2 {
</STYLE>
<ТІТЬЕ>Приклад використання CSS</TITLE>
</HEAD>
<B0DY>
<p CLASS=stylel>MP цього абзацу застосовано стиль stylel </Р> <p CLASS=style2>flo цього абзацу застосовано стиль style2 </Р> </B0DY> </HTML>
Який вигляд має цей документ у вікні браузера, показано на рис. 5.3.
Рис. 5.3. Застосування різних стилів форматування для тегу абзацу
Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприк лад, ефект об'ємного тексту або накладання (часткового перекрит тя) фрагментів сторінки.
Приклад 5.1. Створення текстових ефектів за допомогою стилів
Визначимо для тегу <B0DY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міс титься між тегами <BODY> та </B0DY>, буде автоматично відформа тований відповідно до цих властивостей. Тепер визначимо стилі з іменами тінь, основа, шарі і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шарі та шар2. Порядок накладан ня задано розташуванням фрагментів тексту в HTML-документі.
У прикладі буде застосовано такі властивості:
margin-top — відступ згори (за від'ємних значень можна забезпечити накладання фрагментів);
Визначені в документі стилі мають такі параметри:
Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматує, а лише відзначає фрагмент тек сту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.
<HTML> <HEAD>
<ТІТЬЕ>Приклад використання CSS</TITLE> <STYLE>
BODY {color: black;
Визначені у такий спосіб властивості мають найвищий пріоритет порівняно з іншими, оскільки вони визначені безпосередньо у те-гу. Цей підхід використовують для оформлення невеликої кіль кості елементів.
Приклад використання атрибута STYLE для форматування заго ловка другого рівня:
<Н2 STYLE="
Позиціювання елементів веб-сторінки за допомогою стилів
Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць — каскадні стилі надають для цього додаткові цікаві можливості.
Зокрема, можна обирати один із трьох типів позиціювання еле ментів на сторінці: статичне, відносне та абсолютне позиціюван ня. Тег визначається атрибутом POSITION, який може набувати таких значень:
Для відносного та абсолютного позиціювання використовують чотири властивості — left (ліворуч) та right (праворуч), які задають відступи для розміщення об'єкта по горизонталі, і top (згори) та bottom (знизу) — по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху — той, який описали останнім.
Якщо потрібна зміна стандартного порядку накладання, засто совують шари. Шар об'єкта задають за допомогою властиво сті z- index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї власти вості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.
Вправа 5.2
Розглянемо, як позиціювати три об'єкти-зображення і два фраг менти тексту. Координати спеціально вибрані так, щоб об'єкти пе рекривалися. Зауважте, що слід використовувати атрибут STYLE, а не тег <STYLE>.
1. У програмі Блокнот введіть такий текст веб-сторінки:
<HTML> <HEAD>
<ТІТLЕ>Позиціювання</ТІТLЕ>
</HEAD> <BODY>
<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100"> <IMG SRC="fly. jpg"X/DIV>
<DIV STYLE="position: absolute; top: 10; left: 15; width: 600; height: 100">
<H1 STYLE="color: yellow">rioBНнi, вітре, до схід сонця, до схід сонця, край віконця. </Hlx/DIV>
<DIV STYLE="position: absolute; top: 60; left: 400; width: 50; height: 100">
<H1 STYLE="color: blue">4auKa</Hlx/DIV>
</BODY> </HTML>
Тег <DIV> тут виконує роль контейнера: елементи, що міс тяться в ньому, успадковують його властивості, зазначені в ат рибуті STYLE. Перший контейнер містить зображення, тип роз ташування якого є абсолютним, з нульовим відступом згори, 70 пікселів - відступ зліва; його ширина становить 50, висо та - 100 пікселів. Другий контейнер містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», він зміще ний на 10 пікселів від початку сторінки вниз та на 15 вліво, ширина контейнера - 600, висота - 100 пікселів; завдяки ви користанню тегу Н1 із атрибутом STYLE текст має відповідний до заголовка першого рівня розмір та жовтий колір. Третій контейнер зміщений на 60 пікселів униз та 400 ліворуч, ши рина контейнера - 50, висота - 100 пікселів. Слово «Чайка» оформлене як заголовок першого рівня синього кольору.
2. Збережіть цей документ у файлі з іменем pryklad2.html. Ско піюйте у папку з цим документом зображення fly.jpg (можна інший файл, але його назва має збігатися з на звою в HTML-документі).
3. Відкрийте файл pryklad2.html у браузері (рис. 5.5) — контей нери перекриваються згідно з розташуванням у документі.
Рис. 5.5. Позиціювання фрагментів тексту і зображення за допомогою стилів
4. Внесіть зміни у текст веб-сторінки, який стосується першо го контейнера (із зображенням). Для цього клацніть правою кнопкою миші вільне місце сторінки у вікні браузера і вибе ріть пункт Перегляд HTML-коду (View Source). У вікні редакто ра, що з'явиться, внесіть такі зміни:
<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100; z-index: 2"> <IMG SRC="fly. jpg"x/DIV>
Решту документа залиште без змін. Хоча в тексті HTML-доку мента зображення описане першим, завдяки тому, що йому присвоєно індекс із більшим номером, воно відобразиться по верх інших об'єктів. 5. Збережіть внесені зміни (командою Файл ► Зберегти), закрийте текстовий редактор і оновіть веб-сторінку за допомогою коман ди Вигляд ► Оновити або функціональної клавіші F5. Вигляд цього документа у вікні браузера показаний на рис. 5.6.
Рис. 5.6. Використання властивості z-index
Отже, використання властивості z-index дає змогу відобра жати об'єкти незалежно від порядку їх розташування в тексті HTML-документа.
6. Під час відображення сторінки може статися, що розміри еле мента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямо кутник. У таких випадках використовують властивість over flow (переповнення). Вона може мати три значення:
<DIV STYLE="position: absolute; top: 10; left: 15; width: 220; height: 120; overflow: scroll"> <H1 STYLE="color: уе11ою">Повій, вітре, до схід сонця, до схід сонця, край віконця </Hlx/DIV> 7. Збережіть зміни та оновіть веб-сторінку в браузері. Який ви гляд вона матиме, показано на рис. 5.7.
Вигляд цього документа після відкриття його у вікні браузера, показано на рис. 5.4.