 |
|
 |
Siteua.info - створи собі сайт безкоштовно! |
|
||||
|
|
|||||||
|
|
|
4.3. Огляд інших можливостей стильових таблиць
У прикладах попередніх двох розділів ми стисло продемонстрували способи застосування стильових таблиць CSS і їх зручність. Проте, крім впорядковування стильової інформації, таблиці стилів CSS відкривають для творця веб-сторінок і багато нових можливостей, які недоступні в стандартній мові HTML. Правда, на жаль, вживаючи нові можливості CSS, потрібно чітко уявляти собі, що не всі броузери зможуть їх проінтерпретувати правильно. На сьогоднішній день існує два “абстрактні” стандарти CSS - так званий стандарт CSS1 і новіший стандарт CSS2. Реальні броузери по-різному підтримують (або не підтримують) їх. Деякі властивості стилів, описані в CSS1 і, особливо, CSS2, до цих пір не отримали підтримки у ряді броузеров, а деякі не підтримуються взагалі. І, навпаки, існують броузерниє розширення, не описані в стандартах CSS1/CSS2.
Проте не треба це лякатися: все одно нові можливості використовувати стоїть, просто треба перевіряти результати своєї роботи разних бро-узерах і порівнювати їх. Втім, це відноситься навіть не стільки до CSS, скільки до динамічних сторінок, що створюються з використанням JavaScript Отже, давайте познайомимося з деякими новими можливостями CSS. Чудово, що багато стильових властивостей тут можна застосовувати практично до всіх елементів. Наприклад, колір фону (властивість background-color), який ми в попередніх прикладах визначали для елементу <BODY>, може з таким же успіхом задаватися і для окремих текстових блоків і навіть слів. Більш того, всі елементи можуть мати свій фоновий малюнок (властивість background-image).
Практично для всіх елементів можна тепер також визначити поля (властивість margin), рамки різного вигляду і товщина (властивість border), і відступи (властивість padding). Відмінність між полем і відступом полягає в тому, що відступ знаходиться усередині рамки елементу, а поле - поза нею. Властивості полий, рамок і відступів можуть задаватися індивідуально для кожної із сторін блоку. Гнучкіше можна вибирати властивості шрифту: його зображення, розмір, ступінь “жирності”, гарнітуру і оформлення (це, відповідно, властивості: font-stlye, font-size, font-weight, font-family, text-decoration). Цікава властивість text-decoration дозволяє, наприклад, не тільки закреслювати або підкреслити текст, але і зробити його підкресленим (text-decoration: overline) або навіть миготливим (text-decoration: blink). Правда, значення blink підтримується поки тільки в Netscapel і Opera 4. Можна декілька “пожвавити заголовки за допомогою властивості font-variant: small-caps. Правда, поки що це працює тільки в Netscape 6, а Internet Explorer просто преобра зуєт рядкові букви в прописні, а прописні не збільшує.
Щоб було цікаво, давайте розглянемо деякі властивості на кон кретном прикладі. Пам'ятаєте веб-сервер-сторіночку гіпотетичної фірми “Ледар” з розділу 2? Зараз ми спробуємо узяти її за основу і поліпшити оформлення.
Розміщення блоків тексту
Взагалі-то “Ледар”, хоч і гіпотетична, але все таки фірма, тому на її сайті повинні бути присутніми декілька розділів, без яких корпоративний сайт вже не сприймається, типу “Про компанію”, “Послуги” (або “Продукція”), “Ціни”, “Новини” та інші. Тому ми теж снаб дім спершу цю сторіночку блоком відповідних гіперпосилань:
<DIV CLASS="lnk">УСЛУГИ</DIV> <DIV CLASS="lnk">
<A HREF="prices.html">ЦЕНЫ</A></DIV>
<DIV CLASS="lnk"><A HREF="forml .html">ФОРМА 3AKA3A</A></DIV>
<DIV CLASS="lnk"><A HREF="history.html">ИСТОРИЯ КОМПАНИИ</А> </DIV>
<DIV CLASS="lnk"><A HREF="guestbook.html">KHИГА OT3ЫBOB</A></DIV>
Як можна організовувати завантаження розділів.
Звернете увагу на те, що для списку посилань ми визначили клас Ink. Поки що визначення властивостей цього класу у нас немає, але ясно, що блок посилань повинен виглядати якось не так, як все остальноє. Оскільки ми вже начебто знаходимося в розділі “Послуги” (див. зміст стра нічки), гіперпосилання на нього відсутнє.
Те, що у нас вийшло, показане на мал. 4.5. Поки це виглядає не дуже привабливо. Перш за все, давайте визначимося з розташуванням блоку посилань на сторінці. Наприклад, його можна було б розташувати
Мал. 4.5. Додамо на сторіночку блок гіперпосилань
.hdr
{ position: absolute; left: 50px;
top: 10рх; } Мы немного отступили от края странички, хотя можно было указать,
конечно, и нулевые значения left и top. Заодно можно сразу указать свойство text-align: center;
для центрирования нашего заголовка. В тексте документа напишем:
<DIV CLASS="hdr">ФИРМА ЛЕНТЯЙ</DIV>
Про всяк випадок ми тут використовуємо нерозривний пропуск замість звичайного, щоб уникнути перенесення слова “Ледар” на наступний рядок. Потім визначимо клас Ift для лівої частини сторіночки:
.ift { position: absolute; font-size: meduim; left: 10рх; top: 160px; width: 550px; height: 400px; overflow: auto; }
Тут потрібно трохи пояснити. По-перше, ми визначили відступ від верх його краї в 160 пікселов, щоб залишити місце для заголовка. Крім того, властивість width визначає ширину цього блоку так, щоб залишити трохи місця справа для блоку гіперпосилань. Ми могли не визначати властивість height, проте з його допомогою можна “вгнати” всю інформацію в преде ли екрану, а ту, що не поміститься, діставати за допомогою додаткової смуги прокрутки, визначивши для цього властивість overflow: auto. Тоді назва ніє фірми завжди залишатиметься у верхній частині екрану. Можна також було визначити властивість overflow: scroll;, і тоді додаткова смуга прокрутки (для лівого блоку) була б видна у будь-якому випадку. Значення auto примушує броузер показувати її тільки тоді, коли це необхідно, тобто, коли є інформація, що не поміщається в межах блоку.
У тексті документа, відповідно, укладемо всю основну інформацію в блок класу Ift:
<DIV CLASS="lft"> Наша фирма предоставляет следующие услуги: <UL>
<li>Бытовые услуги
И, наконец, определим класс rght для блока гиперссылок, который будет располагаться справа:
.rght { position: absolute; font-size: large; left: 565px;
top: 160px;
width: 160px; height: 400px; }
Оскільки гіперпосилання повинні бути добре помітні на тлі всього остального, ми відразу визначаємо для них крупніший шрифт (font-size: large;). Значення властивості top повинне бути таким же, як і у класу Ift, щоб обидва блоки розташувалися на однаковій висоті. Значення left вибране таким, щоб зліва залишилося достатньо місця для інформаційного блоку. Тепер привласнимо клас rght нашому блоку гіперпосилань:
<DIV CLASS="rght">
<DIV CLASS="lnk">УСЛУГИ</DIV>
<DIV CLASS="lnk"><A HREF="prices.html">ЦЕНЫ</A></DIV>
<DIV CLASS="lnk"><A HREF="forml.html">ФОPMA 3AKA3A</A></DIV>
<DIV CLASS="lnk"><A HREF="history.html">ИСТОРИЯ КОМПАНИИ</А> </DIV>
<DIV CLASS="lnk"><A HREF="guestbook .html">KHИГА OT3ЫBOB</A></DIV>
</DIV>
Додавання фонового малюнка
Те, що у нас вийшло, показане на мал. 4.6. Перш ніж ми займемося стильовим оформленням кожного блоку, давайте замість однотонового фону встановимо градієнт. Хай основна інформація знаходиться на світлому фоні, а в районі блоку гіперпосилань логічно було б почати градієнтний перелив в темніший відтінок. Тільки ось біда: якщо ми створюватимемо фоновий малюнок з градієнтним переливом справа, то абсолютно незрозуміло, якої ширини він повинен бути. Ще добре, що на цій сторіночці абсолютне позиціонування - можна, в принципі, почати градієнт на 565-ій крапці зліва. Проте все одно незрозуміло, де його закінчувати - адже ширина екрану залежить від дозволу!
Давайте скористаємося витонченішим методом. Створимо градієнт, що має зліва той же колір, що і колір фону, і розташуємо його справа. Для цього нам треба написати у властивостях елементу BODY:
background-position: right;
Проте подивитеся на результат (мал. 4.7). Фоновий малюнок дійсно вирівняний по правому краю, але він повторюється на всі боки, а нам це не потрібно. Щоб він повторювався тільки по вертикалі, потрібно додати в свій ства BODY ще такий рядок:
background-repeat: repeat-y; i
Мал. 4.6. Позиціонування блоку гіперпосилань
Ось тепер вийшло те, що потрібне. До речі, можна примусити фоновий малюнок повторюватися тільки по горизонталі (repeat-x) або взагалі не повторюватися (no-repeat). В цьому випадку можна вказати будь-яке значення властивості background-position у відсотках, пікселах або інших одиницях.
Оформлення тексту
Тепер давайте займемося інформаційним блоком. Щоб інформація добре читалася і сприймалася, він не повинен особливо страждати надмірностями, проте, щоб виділити заголовки списків, їх можна написати крупніше і шрифтом іншого зображення. Для цього визначимо відповідний клас: .bigger { font-size: larger; font-family: sans-serif; }а в тексті документа застосуємо його:
<DIV CLASS="bigger">Haшa фирма предоставляет следующие услуги:</DIV>
Як ви вже, напевно, зрозуміли, властивість font-family визначає гарнітуру шрифту. Значення sans-serif відповідає шрифтам, що не мають зарубок. За умовчанням зазвичай визначений шрифт serif (із зарубками, звичайно це Times New Roman).
Крім того, скористаємося вже знайомим нам стильовою властивістю list- style-image для використання графічних маркерів списку. Оскільки список у нас трирівневий, то логічно створити три маркери різних квітів. Як застосувати графічні маркери, ви вже знаєте:
<UL STYLE="list-style-iiriage: url ("Images/markeri .gif ) ; ">
Можна було, звичайно, створити спеціальні класи для кожного рівня списку, але ми цього робити поки не будемо, тому що списків небагато і, відповідно, цілком достатньо атрибуту STYLE=.
Далі трохи змінюватимемо вид гіперпосилання при наведенні на неї миші. Тут можна придумати різні варіанти. У нашому прикладі ми вирішили змінювати шрифт на напівжирний і прибирати підкреслення при наведенні миші:
A:hover { font-weight: bold; text-decoration: none; } Всі ці властивості вам вже знайомі. Давайте поглянемо, що у нас виходить (мал. 4.7).
Декоративне оформлення тексту
Для інформаційного блоку оформлення вже цілком закінчене. Тепер займемося блоком гіперпосилань. Пригадаємо, що ми для цього навіть загото вили клас Ink. Щоб наші розділи були добре помітні, давайте їх обведемо рамками:
.Ink { border-width: thick; border-style: ridge; border-color: #319CFF; color: red; text-align: center; } Щоб рамка взагалі відобразилася, необхідно визначити властивість border-style (річ у тому, що за умовчанням його значення - none, тобто рамки немає). Тут ми можемо вибрати вид рамки з можливих: solid (звичайна), double (подвійна), groove (увігнута з обох боків), ridge (опукла з обох боків), inset (увігнута), outset (опукла), dotted (точкова) і dashed
(пунктирна).
Мал. 4.7. Застосування стилів до основної частини сторіночки
Останні два значення, правда, поки відтворюються тільки в бро-узере Netscape 6. Ми вибрали значення ridge. Щоб рамка не втрачалася на тлі великих букв, задамо властивість border-width: thick; (товста рамка; ще можна указувати значення thin - тонка і medium - середня, а також задавати товщину в будь-яких одиницях). За допомогою властивості border-color встановимо колір рамки, по відтінку що поєднується з фоном.
Оскільки в одному з позначених розділів ми завжди знаходитимемося, його назва не буде гіперпосиланням. Для нього ми визначили властивість color: red; (червоний колір тексту). У гіперпосилань, як ви пам'ятаєте, свій колір.
Проте при цьому доведеться змінити колір гіперпосилань світліший. Але будьте уважні! Колір гіперпосилань потрібно змінити тільки для класу Ink, тому що в інших місцях гіперпосилання розташовані на світло лом фоні, і їх вже не можна освітлювати, інакше вони не буде видно. Тому не (потрібно перевизначати властивості елементу <А> цілком. Потрібне переопре ділити деякі його властивості тільки усередині класу Ink:
.Ink A{ text-decoration: none; color: white;
Такий запис робить якраз те, що нам потрібне: у класі Ink для елементу <А> визначаються деякі нові властивості, а остальниє залишаються такими ж, як і у всіх елементів <А>. Заразом ми використовували властивість text- decoration: none;, щоб зняти підкреслення з гіперпосилань в цьому блоці - в такому “кнопковому” оформленні воно недоречне.
Тепер все начебто нормально, проте одна з кнопок “вилазить” за межі відведеного простору (із-за слова “компанії”). Можна, звичайно, це простір збільшити, але давайте краще спробуємо трохи “стиснути” це слово. Є така стильова властивість letter-spacing, яке задає додаткову відстань між буквами. Якщо це відстань задати негативним, букви розташуються тісніше звичайного:
<DIV CLASS="lnk"><A НRЕF="histогу.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3рх;">KOMПAHИИ</SPAN></A></DIV>
Оформлення заголовка
Тепер можна зайнятися заголовком. По-перше, потрібно задати його ширину і висоту, причому першу ми задамо у відсотках, щоб вона могла змінюватися разом з шириною вікна броузера:
width: 90%; height: 100рх;
Ці значення ми визначаємо для класу hdr. Значення height вибираємо з таким розрахунком, щоб залишився ще трохи простору зверху від решти блоків наший веб-сервера-сторіночки. Далі для заголовка краще призначити шрифт побільше:
font-size: 6Орх;
Крім того, буде краще, якщо шрифт заголовка буде контрастний щодо решти всіх шрифтів. Виберемо яку-небудь незвичайну гарнітуру:
font-family: OdessaScriptFWF;
Проте, указуючи в явному вигляді назву гарнітури шрифту, слід передбачити випадок, коли на комп'ютері користувача цього шрифту не опиниться. Для цього можна визначити (через кому) ще декілька варіантів зображення шрифту в порядку убування переваги. Останнім обов'язково вкажіть зображення із стандартного набору (serif, sans-serif, cursive, fantasy, monospace). В даному випадку нам потрібний незвичайний шрифт, тому вкажемо значення fantasy:
font-family: OdessaScriptFWF, fantasy;
Тепер розставимо букви трохи поширше за допомогою вже знайомого нам властивості letter-spacing, а також визначимо висоту рядка, рівній висоті нашого блоку:
letter-spacing: 0.05em; line-height: 100рх;
font-weight: 900;
Як бачите, ми визначили тут максимально можливу жирність шрифту. Тепер визначимо колір тексту, що поєднується з кольором фону:
color: #3163CE;
Далі, ми хотіли намалювати рамку навколо заголовка. Визначимо її властивості, використовуючи скорочений запис:
border: 10рх outset #003163;
У цьому записі визначено відразу три властивості: border-width, border-style і border-color. В деяких випадках допустиме подібне об'єднання значень декількох властивостей в один рядок. Це можна написати швидше, хоч і менш наочно.
В принципі заголовок готовий. Давайте тільки додамо до нього ще візуальний ефект за допомогою властивості filter. Це працює, правда, тільки в броузере Internet Explorer і відсутній в специфікаціях CSS, проте виглядає дуже красиво. Можна застосувати цю властивість, наприклад, так:
filter: shadow;
В результаті наш блок відкидатиме тінь. Існують такі значення властивості filter, як dropshadow (інший тип тіні), blur (розмиття), wave (віддзеркалення в хвилі) та інші.
Накладення елементів веб-сторінки
Для повного завершення картини непогано б ще додати який-небудь фоновий малюнок типу “водяного знаку”, символізуючий профіль діяльності фірми. Оскільки фірма називається “Ледарем”, візьмемо за основу фотографію компанії, зайнятої неробством. Щоб вона стала схожа на “ водяний знак ”, спочатку обробимо її в графічному редакторові, наприклад в Adobe Photoshop.
Початкове зображення спочатку декілька розмиємо. У Adobe Photoshop це робиться фільтром фільтр> Розмиття > Сильне розмиття (Filter > Blur > Blur More). Для посилення ефекту застосуємо цей фільтр кілька разів підряд. Потім дайте команду Зображення > Настройка > Відтінок і насиченість (Image > Adjust > Hue>Saturation). Тут можна додати зображенню відтінок, схожий з кольором фону. Потім необхідно зменшити контрастність зображення, щоб воно не відволікало на себе дуже багато увагу, і збільшити його яскравість, оскільки у нас світлий фон: Зображення > Настройка > Яскравість/Контраст (Image > Adjust > Brightness/Contrast). Після цього обрізатимемо зображення по контуру основного малюнка і збережемо у форматі GIF з прозорим фоном.
- Стоп! - скажете ви, - а що ж робити далі? Адже у нас вже є на веб-сторінці один фоновий малюнок - градієнт! Адже відразу два фонові малюнки призначити не можна!?
Ну, по-перше, не можна призначити два фонові малюнки одному елементу, так що ми можемо спокійно призначити його, наприклад, лівому (інформаційному) блоку. Проте хотілося б підкласти цей малюнок не тільки під інформаційний блок, а зробити його як би нейтральним фоновим малюнком всієї сторінки. Тому попросту давайте знову скористаємося абсолютним позиціонуванням. Визначимо клас logo, розташований в центрі нашої сторінки, ближче до низу:
.logo { position: absolute; left: 150; top: 220; } Теперь присвоим этот класс нашему рисунку:
<IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0">
Дійсно, при абсолютному (та і відносному) позиціонуванні блоки можуть накладатися один на одного, і тоді виникає проблема “третього вимірювання” - який з них виявиться “вищим”? Для вирішення цієї проблеми придумали стильову властивість z-index. Чим більше його значення, тим “вище” розташовується блок при накладенні.
Щоб наш “водяний знак” не загороджував все остальноє, визначимо для класу logo негативне значення z-index:
z-index: -5;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitionai//EN"> <HTML>
<HEAD>
<TITLE>ФИРМА "ЛЕНТЯЙ"</ТIТLЕ>
<STYLE> BODY {
background-color: #D2FFFF;
color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y;
} A:link,A:active,A:visited { color: #006A6A;
} A:hover { font-weight: bold; text-decoration: none;
}.hdr { position: absolute; left: 50px; top: 10рх; text-align: center; font-family: OdessaScriptFWF, fantasy, font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10рх outset #003163; color: #3163CE;
} .rght { position: absolute; font-size: large; left: 565px; top: 160px; width: 160px; height: 400px; overflow-x: visible; }
.Ink { border-width: thick; border-style: ridge; margin: 10рх; padding: 5px; border-color: #319CFF; background-image: uri("Images/backlnki.jpg") ; color: red; text-align:center;
} .Ink A { text-decoration: none; color: white; } .1ft { position: absolute; font-size: meduim; left: 10рх; top: 160px; width: 550px; height: 400px; overflow: auto; } .bigger { font-size: larger; font-family: sans-serif; } .logo { position: absolute; left: 150; top: 220; z-index: -5; }
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="hdr">ФИРМА &1аquо;ЛЕНТЯЙ&raquо;</DIV>
<DIV CLASS="rght"> <DIV CLASS="lnk">УСЛУГИ</DIV>
<DIV CLASS="lnk"><A HREF="prices.html">ЦЕНЫ</A></DIV>
<DIV CLASS="lnk"><A HREF="forml.html">ФОРMA 3AKA3A</AX/DIV>
<DIV CLASS="lnk"><A HREF”"history.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3px; ">КОМПАНИЯ</SPAN>
</A>
</DIV>
<DIV CLASS="lnk"><A HREF="guestbook.html">КНИГА ОТЗЫВОВ</А> </DIV>
</DIV> <DIV CLASS="lft"> <DIV CLASS="bigger">Haшa фирма предоставляет услуги:</DIV>
<UL STYLE=list-style-image: url('Images\markerl.gif);">
<LI>Бытовые услуги <UL STYLE="list-style-image: url('Images\rriarker2.gif');">
<LI>Вкручивание электрических лампочек <LI>Услуги по наведению чистоты <UL STYLE="list-style-image: url('Images\marker3.gif');"> <LI>Подметание пола <LI>Вынесение мусора из квартиры <LI>Мытье посуды </UL>
</UL> <LI>Приготовление пищи <LI Компьютерные услуги <UL STYLE="list-style-image: url('Images\marker2.gif');"> <LI>Дефрагментация жестких дисков
<LI>Переустановка Windows </UL> </UL>
<DIV CLASS="bigger">Чтобы воспользоваться услугами, следует: </DIV>
<OL> <LI> Зарегистрироваться (<А НRЕF="reg.htm1">здесь</А>)
<LI>Заполнить форму заказа (<А HREF="forml.htm1">здесь</А>)
<LI>Подтвердить заказ:
<OL TYPE="I">
<LI>Получив письмо с паролем, послать пустой ответ
<LI>Заполнить форму-подтверждение заказа
(<А НRЕF="form2.htm1">здесь</А>)
</OL> <LI>Приготовить деньги для оплаты услуг </OL> </DIV>
<IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0">
</BODY>
</HTML>
У наступних розділах ми ще повернемося до цієї сторіночки і продемонструємо деякі методи динамічної взаємодії з користувачем. А зараз давайте відкладемо її на якийсь час.
У цьому розділі ми розглянули, зрозуміло, не всі можливості CSS. Проте ми продемонстрували застосування більшості стильових властивостей.
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © , 2008 |