|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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> ). Її використання менш переважно, оскільки броузери можуть інтерпретувати її по-різному.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
|