 |
|
 |
r8-project.xyz - створи сайт безкоштовно! |
|
||||
|
|
|||
|
|
|
|
4.2. Визначення стилів в спеціальній таблиці
Читаючи попередній розділ, деякі, швидше за все, кілька разів череню малі: “Ну і де ж тут обіцяна зручність? Невже зручніше написати
<SPAN STYLE="text-style: italic;">, чем просто <I>?” 
Мал. 4.4. Веб-сторінка написана з елементарним застосуванням CSS
Все вірно, в деяких випадках Сівба-запис дійсно трохи довша, але ми і не стверджували, що тепер потрібно використовувати тільки CSS ~ в деяких випадках можна скористатися і старими тегамі, нічого в цьому негожого немає. Проте за допомогою CSS ми маємо, по-перше, набагато ширші можливості, а по-друге, отримуємо зручність роботи над власне стилями. У попередньому розділі ви це зручність відчути не могли, оскільки в учбових цілях ми записували всі властивості стилів як значення атрибуту STYLE=. Цей спосіб широко застосовується, але лише в тих випадках, коли потрібно застосувати який-небудь стиль до окремо взятого фрагмента. А в більшості випадків використовують так звані таблиці, стилів.
Ви, напевно, звернули увагу на те, що в попередньому прикладі є багато повторень стильових властивостей. Властивості, що повторюються, можна визначити для кожного тега HTML заздалегідь, і вони згодом застосовуватимуться до нього автоматично.
Стилі елементів
Таблиця стилів зазвичай розташовується в заголовку HTML-документа, в розділі <HEAD> . Вона займає місце між тегамі <STYLE> і </STYLE> . Синтаксис таблиці стилів такий. Ви пишете ім'я елементу HTML, для якого визначаєте стиль, а після нього слідує блок визначення стилю, ув'язнений у фігурні дужки. Наприклад, в нашому прикладі можна написати так:
<STYLE> BODY { background-color: #ВАВААО; color: rgb(29,29,24); }
</STYLE>
Пропуски тут не мають ніякого значення, так само, як і переклади рядків. Після цього в самому тексті HTML-документа досить вказати тег <BODY>, і до нього автоматично будуть застосовані дані кольори фону і тексту.
Поки що ми начебто не отримали ніякої видимої економії, хоча скоро ви побачите, що має сенс розташовувати стильові властивості <BODY> саме в таблиці стилів. Щоб продемонструвати економію, підемо далі. У нашому прикладі ми три рази вирівнювали заголовки по центру (ще добре, що три, а не п'ятдесят шість). Натомість можна просто написати в таб обличчі стилів:
Н1,Н2 { text-align: center; }
і після цього просто указувати в документі теги <Н1 > або <Н2>, місти моє яких автоматично центруватиметься. Звернете увагу на те, що в таблиці стилів, щоб визначити стиль відразу для декількох елементів, ми перерахували їх через кому.
Якщо ви пам'ятаєте, у нас ще залишалися в теге <BODY> три “відмінені” атрибути: LINK=, ALINK= і VLINK=. Замість них рекомендується визначити стилі для різних псевдокласів елементу <А>. Це робиться так:
A:link,A:visited { color: #634438; } A:active { color: black; }
Як бачите, для елементу <А> визначено три псевдокласи (імена кото рих відділяються двокрапкою): link - для гіперпосилань, visited - для посе щенних гіперпосилань і active - для активних. Крім того, в другій версії CSS (CSS Level 2) для тега <А> визначені ще псевдокласи hover (гіперпосилання, над яким знаходиться покажчик миші) і focus (вибраний
ная гіперпосилання). Проте в броузере Internet Explorer версії 5 підтримується тільки перший з них. Наприклад, якщо написати
A:hover { color: white; }
то при наведенні покажчика миші на посилання вона підсвічуватиме білим кольором. Це вже схоже на динамічну взаємодію з користувачем!'
Далі, в нашому прикладі ми двічі визначали однаковий стиль для горизонтальної лінії. Простіше, звичайно, написати в таблиці стилів:
HR { margin-top: 24px; width: 75%; }
і потім в текст документа вставляти тільки тег <HR>, і тоді, якщо не вказане інше, лінія вийде такій, якою потрібно.
Стилі класів
Все це добре, звичайно, але як бути далі? Адже в тексті нашого прикладу кілька разів (в даному випадку два, але могло б бути і значно більше!) визначається один і той же стиль для тексту епіграфа, інший стиль для основного тексту і третій для підпису до епіграфа... Добре б теж визначити їх в таблиці стилів, проте в нашому HTML--документі всі вони розташовані усередині елементів <DIV>, тому треба визначити декілька різних стилів для одного елементу. Виявляється, це теж можна зробити! Для цього, правда, доведеться використовувати декілька довший запис, проте це все одно зручніше і коротше, ніж всякий раз визначати атрибут STYLE= або задавати інші атрибути.
Отже, у нас повинні бути три різні стильові варіанти для елементу <DIV> . У CSS вони називаються класами. Щоб відрізнити ці елементи один від одного, у них доведеться встановити атрибут CLASS=, приблизно так:
<DIV CLASS="epig">...</DIV> <DIV CLASS="pdps">...</DIV> <DIV CLASS="ab">...</DIV>
Імена класів вибираються довільно. В даному випадку ми утворили їх від слів “епіграф”, “підпис” і “абзац”. У таблиці стилів ці класи можна визначити так:
DIV.epig { text-align: justify; font-size: smaller; width: 130; }
DIV.pdps { font-style: italic;
text-align: right; }
DIV.ab { text-align: justify;
text-indent: 2em; }
Між іншим, інші елементи (причому практично все) також можуть мати атрибут CU=. Якщо треба, щоб визначення класу було доступне всім елементам, його можна визначити так:
pdps { font-style: italic;
text-align: right; }
Тобто, при визначенні не указується ім'я конкретного елементу HTML, а указується тільки ім'я класу, яке у будь-якому випадку починається з крапки (але тільки в таблиці стилів, а при зверненні до класу в тексті документа крапка не ставиться). У даному прикладі ми визначали класи тільки для елементу <DIV>. Більш того, в такому визначенні передбачається (тобто ми як би пам'ятаємо), що елемент класу pdps буде вкладений в елемент класу epig. Хоча, з іншого боку, наше визначення pdps годиться не тільки для підпису під епіграфом, але і для будь-якої іншої, якщо її раптом буде потрібно.
До речі, окрім стильових властивостей елементів HTML і класів, ми можемо визначати властивості так званих ідентифікаторів. Річ у тому, що у кожного елементу HTML може бути атрибут ID= - його унікальне ім'я в даному документі (цей атрибут грає велику роль при динамічній взаємодії з користувачем, так що з ним нам ще доведеться не раз зіткнутися). Якщо ви хочете визначити в таблиці стилів властивості для елементу, що має певний ідентифікатор ID=, це можна зробити так:
#соо1 { color: white; background-color: black; )
Тоді елемент на ім'я cool (наприклад <DIV ID="cool"> ) буде наділений вказаними властивостями (в даному випадку білим кольором символів на чорному фоні). Тільки не забувайте, що в кожному HTML-документі кожен ідентифікатор ID= повинен бути унікальним, тобто не може бути два і більш за елементи з однаковим значенням атрибуту ID=.
Гаразд, це ми трохи відвернулися, так що давайте подивимося на новий варіант сторіночки Сергея Сергєєва цілком.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLE>Домашняя страница Сергея Cepreeвa</TITLE>
<STYLE>
<!--
BODY { background-color: #BABAAO;
color: rgb(29,29,24);
}
H1,H2 { text-align: center;
} A:link,A:visited { color: #634438;
} A:active { color: black;
} HR { margin-top: 24px;
width: 75%; ) DIV.epig { text-align: justify;
font-size: smaller;
width: 130; } DIV.pdps { font-style: 'italic;
text-align: right;
} DIV.ab { text-align: justify;
text-indent: 2em; }
-->
</STYLE>
</HEAD>
<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>
<DIV STYLE="text-align: center;"><A HREF="#skazka">CKА3KА &1аquо;Иван-царевич и серый зaяц»</A>
<А HREF="#rasskaz">PaccKa3 «МОЛОТОK»</A>
</DIV>
<BR>
<DIV STYLE="font-size: larger;">
<SPAN STYLE="font-weight:
bold;">Сергей Сергеев</SPAN> Smdash; писатель-авангардист, автор 20 рассказов.<BR>
В жизни большой любитель собак и компьютерных игр.<ВR>
<ВR>
Некоторые его рассказы вы можете прочитать прямо здесь.</DIV>
<HR>
<Н2><А NAME="skazka">ИBAH-ЦAPEВИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>
<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2>
<DIV STYLE="text-align: right ;">
<DIV CLASS="epig">
Ну, погоди!..
<DIV CLASS="pdps">(Из мультфильма)</DIV>
</DIV>
</DIV> <BR>
<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>
<DIV CLASS="ab">Дoлгo ли, коротко ли, ...</DIV>
<DIV CLASS="ab">...И они жили долго и счастливо и умерли в один день.</DIV>
<HR>
<Н2><А NAME="rasskaz">МОЛOTOK</A>
<BR>
<SPAN STYLE="font-style: italic; ">paccкaз</SPAN>
</H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig"> Мы кузнецы, и дух наш молод. <DIV CLASS="pdps">(Из песни)</DIV>
</DIV>
</DIV>
<BR>
<DIV CLASS="ab">Этo случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>
</BODY>
</HTML>
При цьому результат вийде таким же, як і у попередньому випадку, просто сам запис набагато компактнєє, та і зручніше. Крім того, в ній легко орієнтуватися. Поглянувши на початковий текст, ми відразу можемо по імені класу знайти, де абзац, а де епіграф. У попередньому прикладі вишукувати потрібні місця тексту серед нагромадження стильових властивостей було набагато важче.
Напевно, ви звернули увагу на дивні поєднання <!-- і -->, які з'явилися в нашому прикладі біля тегов <STYLE> . Взагалі кажучи, в такі символьні поєднання (це, до речі, теж теги) в HTML-докумен-тах укладають коментарі. Тобто все, що знаходиться між цими тегамі, ігнорується броузером. Але в даному випадку ми користуємося тим, що усередині STYLE -блока діють закони синтаксису не HTML, а CSS. Отже ті броузери, які “розуміють” тег <STYLE> і, отже, CSS, “зрозуміють” і те, що в даному випадку це не символи коментаря, і проінтерпретують таблицю стилів, як годиться. А ті броузери (в основному, старі), які CSS не розуміють, сприймуть вміст таблиці стилів як коментар. (Якщо не поставити теги коментарів, то ці броузери, проігнорувавши тег <STYLE> як незрозумілий їм, швидше за все стануть виводити на екран весь вміст таблиці стилів.) Таким же чином ми “одурюватимемо” старі броузери при використанні тега <SCRIPT>.
Зовнішні стильові таблиці
Ще одна чудова властивість стильових таблиць полягає в тому, що за допомогою однієї таблиці, що знаходиться в окремій файлі, можна задавати стилі для цілого набору веб-сторінок. Це, до речі, дуже важливо при розробці великих сайтів, оскільки, по-перше, сприяє сохра ненію єдність стилю, а по-друге, надає можливість швидко змінити що-небудь відразу в багатьох файлах проекту. Для цього слід просто написати всю таблицю стилів (без тегов <STYLE> і </STYLE> ) в окремому файлі з розширенням .css, а потім “підключити” її у всіх HTML- документах, які повинні її використовувати. Наприклад, якщо файл таблиці стилів називається mainstyle.css, то в розділ <HEAD> кожного з HTML-документів, що використовують її, потрібно вставити такий рядок:
<LINK REL="Stylesheet" HREF="mainstyle.css" TYPE="text/css">
Атрибут TYPE= указувати не обов'язково, але краще це зробити (до речі, це можна робити і в теге <STYLE> ). По-перше, це ознака хорошого тону, а потім хіба мало що - раптом користувачеві, наприклад, попадеться який-небудь божевільний броузер, що використовує для стильових таблиць за умовчанням не CSS, а, допустимий, JASS.
Є і інший спосіб “підключення” стильової таблиці із зовнішнього файлу - директива @import. Вона уживається таким чином:
<STYLE TYPE="text/css"> @import url (mainstyle.css) ; </STYLE>
Як бачите, ця директива винна знаходиться між тегамі <STYLE> і </STYLE>, оскільки вона не є елементом мови HTML (як тег <LINK> ). Її використання менш переважно, оскільки броузери можуть інтерпретувати її по-різному.
|
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © r8-project.xyz, 2008 - 2021 |