УЧЕБНИКИ ОНЛАЙН
бесплатные полнотекстовыe онлайн учебники
безкоштовні повнотекстові онлайн підручники

Вирівнювання тексту у FrontPage. Каскадні таблиці стилів У HTML передбачені чотири можливості для вирівнювання тексту: Default, Left, Center і Right. Скористатися ними можна трьома способами: На панелі інструментів Formatting передбачені кнопки Align Left, Center і Align Right (див. табл.4). Якщо будь-яке вирівнювання вже застосоване до тексту, відповідна кнопка буде показана натисненою. При використанні вирівнювання за умовчанням жодна з кнопок не натиснена. Можна клацнути по абзацу правою кнопкою миші і в контекстному меню вибрати Paragraph. У діалоговому вікні, що відкрилося, можна настроїти вирівнювання в полі Alignment. У меню Format виберіть Paragraph. Відкриється те ж діалогове вікно, що і в попередньому випадку. Всі ці можливості, а також можливість вирівнювати текст по довжині рядка (Justify) надають у ваше розпорядження каскадні таблиці стилів. Короткий огляд каскадних таблиць стилів У перших версіях HTML не були передбачені можливості для вказівки типу шрифту, відступів, відстані між рядками і інших елементів оформлення тексту. У більш пізніх версіях з'явилися можливості вказівки типів шрифту і кольору, але тільки для спеціально виділених проміжків тексту. Централізоване управління елементами оформлення тексту тільки засобами HTML досі недосяжне. Основи CSS Щоб забезпечити максимальні можливості в області оформлення Web-сторінок, організацією World Wide Web Consortium були затверджені стандарти в області технології, яка отримала назву каскадних таблиць стилів (Cascading Style Sheets, CSS). Застосування CSS складається з двох етапів: Визначення стилю. Стиль - це набір властивостей тексту. Наприклад, до таких властивостей відносяться: вибраний вами шрифт, його колір, розмір, фон і рамка. У CSS стиль називається селектором (selector). Застосування стилю до одного або декількох проміжків тексту. У залежності від використаного вами підходу стиль може застосовуватися автоматично, або ж ви повинні будете вказати область його застосування вручну. Реально для застосування CSS використовуються рядки коду. На скільки це можливо, замість коду ми будемо розглядати діалогові вікна FrontPage, за допомогою яких код CSS генерується автоматично. Спочатку декілька визначень. Стиль CSS (CSS style) - це набір властивостей тексту, наприклад: гарнітура шрифту, його розмір, насиченість ліній, колір, колір фону, тип рамки і її товщина та інше. Правило CSS (CSS rule) - це вираз, який привласнює властивості одному або декільком стилям. Ось приклад правила, яке вказує назву шрифту і колір для стилів H1 і H2: H1, H2 {font-family; Anal; color; red} Між правилами і стилями існують відносини типу більшість-до-більшості. Одне правило можна застосовувати до будь-якої кількості стилів, і до одного стилю можна застосовувати будь-яку кількість правил. Селектор (selector) - ця назва стилю CSS. Для наших цілей цікаві тільки три типи селекторів: Клавіатурні селектори (type selectors) називаються так само, як і теги HTML: Р - для звичайних абзаців, H1 - для Heading1 (заголовка першого рівня), LI - для елемента списку, TD - для елемента таблиці і т.д. Застосування правила до клавіатурного селектора приводить до того, що змінюється вигляд всіх елементів сторінки, що управляються відповідним тегом HTML. Перше правило в наведеному нижче прикладі застосовує курсив до всіх комірок заголовка таблиці, друге правило робить весь напівжирний шрифт на сторінці червоним. TH { font-style; italic;} B { color; red;} Селектори класів (Class selectors) не застосовуються автоматично до яких-небудь частин сторінки. Вам необхідно вказати, до яких дільниць сторінки ви маєте намір їх застосувати. Перший вираз в прикладі створює клас goga, а другий - застосовує його до абзацу. .goga { color: white; background-color: black; } <p class=goga> Цей текст буде білим на чорному фоні. </р> Зверніть увагу, що вираз, за допомогою якого ви визначаєте клас, починається з крапки. При застосуванні стилю до абзацу крапку на початку ставити не треба! Селектори ідентифікаторів (ID selectors) діють подібно до селекторів класів. Єдина відмінність полягає в тому, що після створення стилю і прив'язки його до ідентифікатора ви можете вказати цей ідентифікатор для елемента сторінки. Ось простий приклад. Створюється стиль для всіх елементів з ідентифікатором bruce, а потім ідентифікатор bruce присвоюється абзацу. У результаті текст в абзаці повинен стати напівжирним. #bruce { font-weight: bold; } <р id=bruce> Цей текст буде виділений напівжирним. </р> На жаль, не можна використовувати один і той же ідентифікатор більше ніж для одного елемента на сторінці. Тому селектори ідентифікаторів, на відміну від селекторів класів, використовуються відносно рідко. Зверніть увагу на префікс #, який використовується при створенні селектора ідентифікаторів. Браузери, що підтримують CSS CSS - це відносно нова технологія, і не всі браузери її підтримують. В Internet Explorer підтримка CSS з'явилася, починаючи з версії 3, а в Netscape Navigator - з версії 4. Більшість старих браузерів відносяться до CSS так само, як і до інших невідомих тегів HTML - вони їх ігнорують. Але серед браузерів, які підтримують CSS, є істотні відмінності відносно трактування деяких команд CSS. Висновок звідси простий: чим важливіший вміст сторінки, в оформленні якої ви використовуєте CSS, тим на більшій кількості браузерів вона повинна бути протестована. Може здатися, що CSS - дуже складні в застосуванні і підтримуються малим числом браузерів. Моя думка така, що відносно інших можливостей (наприклад, зробити всю сторінку графічним зображенням або взагалі залишити шрифти на повний розгляд браузера, відмовившись від CSS). CSS - найкращий вибір. Де можна розмістити правила CSS Є декілька можливостей для розміщення правил CSS на Web-сторінці. Приєднати до елемента сторінки. В останніх версіях HTML для елементів сторінки передбачений атрибут STYLE, який дозволяє вам застосовувати до елемента форматування CSS. Код HTML при використанні цього атрибута виглядає таким чином: <р style="text-transform; uppercase;" > Це буде відображене великими буквами. </р> При використанні кнопки Style у властивостях цього елемента FrontPage застосує до нього вибрані вами настройки форматування CSS саме цим способом. Розмістити в розділі <STYLE> Web-сторінки. В останніх версіях HTML є спеціальні стильові теги, за допомогою яких браузеру повідомляється вся необхідна інформація про правила CSS. У більшості Web-сторінок все ці теги вміщуються в спеціальний розділ <STYLE>, який, в свою чергу, вміщується в розділ <HEAD>. Ось приклад Web-сторінки: <HTML> <HEAD> <STYLE> H1 { color: green; } </STYLE> </HEAD> <BODY> <H1> Цей заголовок буде виділений зеленим кольором. </H1> </BODY> </HTML> Щоб вставляти подібні вирази не в режимі написання коду HTML, а за допомогою діалогових вікон FrontPage, виберіть в меню Format команду Style. Далі ви зможете створити потрібні вам селектори, використовуючи угоду про найменування (назва нового клавіатурного селектора повинна співпадати з тегом структури сторінки HTML, назва селектора класів - починатися з крапки (.), а назва селектора ідентифікаторів - зі знаку фунта (#). До виділених частин тексту селектори застосовуються по-різному. Клавіатурні селектори після їх створення вже застосовані до відповідних частин тексту. Селектори класів можна вибрати в числі інших стилів зі списку Change Style панелі інструментів Formatting. Селектори ідентифікаторів доведеться вставляти в режимі редагування коду HTML (див.  “Основи CSS” ). Розмістити в файлі, на який буде посилатися декілька Web-сторінок. Дуже зручно відвести для визначення всіх стилів CSS окремий файл, на який будуть посилатися інші Web-сторінки. Цим ви забезпечите собі централізоване управління стилями CSS на всіх Web-сторінках. Синтаксис CSS Синтаксис CSS відрізняється від звичайного синтаксису HTML. Давайте розглянемо наступний приклад: H2, H3 { font-family: Arial, sans=serif; color; blue;} Перші елементи рядка - це назви селекторів. Якщо між назвами двох селекторів стоїть кома, це означає, що правило буде застосоване до обох селекторів незалежно. У нашому прикладі це селектори H2 і H3. Якщо назви двох селекторів не розділені комами, це означає, що правило буде застосовуватися тільки в ситуаціях, коли проміжок тексту володіє атрибутами обох селекторів. Наприклад, в наступному прикладі правило буде застосоване тільки до заголовків другого рівня, виділеного напівжирним: H2 В {color; red;} Весь список властивостей береться в фігурні дужки. Кожна властивість записується таким чином: спочатку йде ім'я властивості, потім двокрапка, а потім одне або декілька значень. Декілька значень однієї і тієї ж властивості розділяються комами. Крапка з комою означає кінець визначення властивості. Каскадність та успадкування У будь-якому браузері, який підтримує CSS, є набір стилів за умовчанням. Якщо для Web-сторінки вказані свої стилі, то саме вони будуть використовуватися. Якщо до одного стилю застосовано декілька взаємовиключаючих правил, вони будуть використовуватися в порядку їх появи на Web-сторінці. У цьому й полягає ідея каскадності. Інший принцип, який використовується в каскадних таблицях стилів, - це принцип успадкування. Відповідно до цього принципу деякі стилі можуть успадковувати властивості від інших стилів. Звичайно механізм дії успадкування засновується на тегах HTML. Наприклад, ви привласнили який-небудь атрибут CSS селектору <UL> (Unnumbered List, тобто маркірований список) або селектору <OL> (Ordinary List, тобто нумерований список). У результаті всі елементи цих списків (<LI>, List Item), підлеглі стилям <UL> і <OL>, успадкують ті ж самі властивості. Незважаючи на те, що інтерпретація успадкування в різних браузерів може відрізнятися, в багатьох ситуаціях це дуже корисна властивість. Інтеграція CSS і FrontPage Як самі стилі CSS, так і правила для роботи з ними - це абстрактні службові елементи, які не будуть показані в режимі WYSIWYG. Звичайно, можна скористатися режимом редагування коду HTML. Це дозволить вам використати абсолютно всі можливості CSS, і в деяких ситуаціях результати можуть вразити. Однак з технічної точки зору робота з CSS в режимі коду забере у вас багато часу. У цій ситуації FrontPage знову пропонує засоби, які полегшать вашу роботу. Вибравши в меню Format команду Style, ви відкриєте діалогове вікно Style (мал. 20). За допомогою цього діалогового вікна ви отримуєте зручний спосіб для роботи із стилями CSS на рівні сторінки. Мал. 20. Діалогове вікно Style призначене для роботи зі стилями CSS Коли ви в перший раз відкриєте це діалогове вікно, в списку Styles будуть показані всі доступні теги HTML, незалежно від того, чи визначені для них які-небудь правила. По визначенню будь-який з цих тегів може бути використаний як назва для клавіатурного селектора. Щоб відобразити вже створені вами правила CSS для Web-сторінки, в списку List виберіть User-Defined Styles. При виборі будь-якого з цих стилів у вікні Paragraph preview буде показано, як буде виглядати абзац, до якого застосували цей стиль, а у вікні Character preview - як будуть виглядати символи з цим стилем. У полі Description виводиться текстовий опис атрибутів стилю. Незалежно від того, чи вибрали ви всі теги HTML, чи ж тільки стилі, визначені користувачем, створення, зміна, видалення стилів CSS проводиться за допомогою тих же кнопок New (новий), Modify (змінити) і Delete (видалити) Видаляти можна тільки стилі, визначені користувачем. В результаті відкриється діалогове вікно (мал. 21), з яким ви вже, напевно, стикалися при роботі з різними елементами. Мал. 21. Це діалогове вікно - головний відправний пункт для настройки параметрів шрифту, абзацу, рамки і списків для стилів CSS Ми розглянемо перші чотири можливості настройки оформлення в цьому діалоговому вікні - Font, Paragraph, Border і Numbering трохи нижче. Одиниці вимірювання, що використовуються в CSS. Одиниці вимірювання використовуються для різних атрибутів, що задаються з допомогою CSS Наприклад, в чомусь необхідно вказувати висоту символів, ширину рядків в абзаці і товщину рамки. Всі величини вказуються в наступному форматі, спочатку йде число, а за ним (без пропуску) одиниця вимірювання. Можливі одиниці вимірювання представлені в табл. 5a – 5в. Таблиця 5a. Абсолютні одиниці вимірювання, прийняті в каскадних таблицях стилів Позначення Найменування Опис mm milimeter (міліметр) 24,4 мм дорівнюють  одному дюйму cm сentimeter (сантиметр) 1 см це 10 мм In іnch (дюйм) 1 дюйм це 5,4 мм Pt point (точка) 72 точки дорівнють 1 дюйму pc pica (ціцеро) 1 ціцеро дорівнює 12 точкам, 6 ціцеро дорівнюють 1 дюйму   Таблиця 5б. Відносні одиниці вимірювання, прийняті в каскадних таблицях стилів Позначення Найменування Опис % percent (відсоток) Степінь збільшення(зменшення) відносно нормального розміру. Наприклад, 200% означає два нормальних розміри, а 50% - половину нормального розміру em Em 1 еm означає розмір в точках поточного шрифта ex Ex 1 ех означає х-висоту поточного шрифта (тобто висоту рядкового символа х)   Таблиця 5в. Залежні від апаратних установок одиниці вимірювання, прийняті в каскадних таблицях стилів Позначення Найменування Опис px Pixel (піксель) 1 піксель – найменша одиниця здатності даного дисплея Звичайно проблеми виникають з абсолютними одиницями вимірювання. Наприклад, задавши величину 1іm, нам абсолютно невідомо, як таку величину відобразить монітор відвідувача Web-сайта. У більшості відеосистем одна точка еквівалентна одному пікселю, але це справедливо не для всіх систем. При використанні процентних одиниць вимірювання їх значення може бути різним в залежності від типу об'єкта. Для переважної більшості об'єктів відсоток береться від їх розмірів за умовчанням. Наприклад, якщо вказана довжина рядків в параграфі, дорівнює 80%, це означає, що буде використана довжина, рівна 80% від значення, яке використовувалося б без цієї команди. Однак з цього правила є і виключення. Для кольору процентні одиниці вимірювання будуть відповідати звичайній RGB-шкалі (значення від 0 до 255). Якщо ви вкажете товщину лінії в процентах, то вона буде встановлена в процентах від розміру шрифту (в крапках), який оточує цю лінію. При вказівці кольору можна використати будь-яку з 5 незалежних схем. За іменем. Ви можете використати 16 стандартних кольорів FrontPage (назви кольорів виводяться при переміщенні курсора на выбраний вами кольором в першому діалоговому вікні для вибору кольорів). Приклад: { color, red; } За допомогою шістнадцяткового 12-бітного значення. Вкажіть співвідношення червоного, зеленого і синього за допомогою трьох шістнадцяткових значень від 0 до F, перед якими стоїть знак фунта (#). Приклад: { color: #FOO; } За допомогою шістнадцяткового 24-бітного значення. Співвідношення червоного, зеленого і синього вказується вже за допомогою шести шістнадцяткових цифр (від 00 до FF). Перед ними також ставиться знак фунта. Приклад: { color- #FFOOOO; } За допомогою десятекового 24-бітного значення. Використовується звичайне десятеричне значення (0-255), а замість знаку фунта - ключове слово rgb. Приклад: { color: rgb(255,0,0); } За допомогою позначення інтенсивності кожного кольору в процентах. Приклад: { color: rgb(100%, 0%, 0%), } ПОРАДА Пам'ятайте про необхідність використання, де це можливо, безпечних кольорів Для схем позначення, про які говорилося вище, безпечними будуть наступні значення: 12 6іт: 0, 3, 6, 9, С і F 24 біт: 00, 33, 66, 99, CC, FF Десяткові: 0, 51, 102, 153, 204, 255 Привласнення властивостей CSS Звернімося ще раз до мал. 21. Натиснення кнопки Format в нижньому лівому кутку відкриває меню з п'ятьма категоріями властивостей CSS. Настав час детальніше розглянути перші чотири категорії. Призначення шрифтів CSS При виборі пункта Font відкриється діалогове вікно, показане на мал.22. Мал. 22. Діалогове вікно для вказівки шрифту CSS і його властивостей Чи не виглядає вікно й справді дуже знайомим? Все, що на ньому знаходиться, є і в діалоговому вікні для настройки шрифту виділеної частини тексту (див.мал.18). Відмінності пов'язані з тим, що в нашому випадку ми настроюємо властивості не для частини тексту, а для абстрактного стилю. У табл. 6 показано, які поля цього діалогового вікна відповідають назвам властивостей CSS, що відображаються в коді HTML, і які значення для цих властивостей можна вказувати в коді.   Таблиця 6. Властивості шрифтів CSS Поле діалогового вікна Назва властивості CSS Опис і можливі значення Font Font-family Список шрифтів, доступних в системі Font Style Font-style Може бути normal (звичайний текст), italic (більш тонкий та вигнутий) та oblique (текст нахилений, але у всіх інших відносинах ідентичний звичайному) Font Style font-weight Для позначення товщини ліній шрифту використовуються значення: Цифрові (від 100 до 900); Ключові слова normal (=400) і bold (=700); ключові слова bolder і lighter. Ці слова використовуються для отримання відповідно більшої або меншої товщини ліній по відношенню до батьківського об'єкта Size font-size Висота шрифту (вимірюється від вершини найбільш високого символа до нижнього краю символа, який більш усього виступає вниз). Можна використати будь-які одиниці вимірювання CSS Small Caps font-variant Можуть використовуватися значення normal і small-caps (всі букви замінюються на прописні зменшеної величини) (немає) font Це скорочене найменування всіх властивостей, перерахованих вище. Його можна використати замість будь-якого з цих властивостей. Браузер буде розпізнавати те, що ви мали на увазі, основуючись на синтаксисі виразу Color color Колір шрифту. У діалоговому вікні Frontpage використовуються три стандартних вікна вибору кольору Underline, Strikethrough, Overhne, Blink text-decoration Управляє наступними атрибутами тексту: underline (підкреслення), overlme (горизонтальна межа зверху), strikethrough (закресллення) і blink (мерехтіння). За умовчанням використовується none (нічого) Capitalize, All Caps text-transform Застосовує до тексту потрібний регістр, який буде показаний незалежно від того, як набранo текст. Можуть використовуватися ключові слова: capitalize (перша буква у всіх словах прописна, інша рядкова); uppercase (всі букви прописні); lowercase (всі букви рядкові); none (нічого, це значення використовується за умовчанням) Hidden visibility Ключове слово hidden (для Internet Explorer) або hide (для Netscape Navigator) робить елемент невидимим. Ключові слова visible (Explorer) або show (Navigator), навпаки, роблять елементи видимими Вказівка шрифтів Яку б назву шрифту ви не вказали в якості атрибуту CSS, гарантії того, що цей шрифт буде встановлено на комп'ютері всіх відвідувачів Web-сайта, немає. Якщо вказаний вами шрифт не встановлений на комп'ютері відвідувача сайта, його браузер зробить підстановку іншого шрифту, але якого саме, передбачити важко. Для розв'язання цієї проблеми є декілька способів: Вказуйте тільки найпоширеніші шрифти. До таких відносяться шрифти, що постачаються з Windows, Microsoft Office та з поширеними браузерами. Вказуйте загальні ознаки шрифтів. Для цього призначені наступні ключові слова: serif - “serif” означає засічки, маленькі горизонтальні риски, які використовуються в деяких шрифтах. Детальніше про них буде розказано трохи далі в цьому розділі. Використання ж ключового слова serif означає, що буде використаний системний шрифт за умовчанням із засічками. Як правило, це Times New Roman або Times Roman. sans-serif- системний шрифт за умовчанням без засічок. Швидше всього, ним буде Arial або Helvetica. cursive ~ шрифт “під рукописний”. fantasy - декоративний шрифт. monospace - моноширинний шрифт, що використовується в системі за умовчанням. Швидше всього, це буде Courier New або Courier. Як показує практика, коли ви вказуєте cursive або fantasy, браузер може вибрати що завгодно. Відповідність же інших ключових ознак конкретним шрифтам більш-менш нормалізувалася. Вказуйте відразу декілька шрифтів. При використанні атрибута font-family ви можете вказати цілий список шрифтів, при цьому ви можете вказати їх в порядку переваги. Наприклад: H1 { font-family: Verdana, Arial, Helvetica, sans-serif; } Спочатку браузер перевірить, чи доступний шрифт Verdana, і якщо він доступний, буде використовувати саме його. Якщо ж шрифт Verdana недоступний, точно така ж перевірка буде вироблена по відношенню до Arial. Якщо недоступний і Arial, настане черга Helvetica, а потім - шрифту за умовчанням без засічок, який встановлено в системі. Small Caps Іноді використання звичайних шрифтів, наприклад з розміром великих букв в 12 пунктів і малих букв розміром в 9 пунктів, не задовольняє вас внаслідок того, що товщина ліній у великих букв буде відрізнятися від товщини ліній рядкових. У цій ситуації можна скористатися значенням small-caps атрибута CSS font-variant. При використанні small-caps весь текст буде виглядати так, неначе він був набраний тільки великими буквами дещо зменшеного розміру. Відстань між символами Настройка відстані між символами з використанням CSS проводиться на другій вкладці діалогового вікна Font, яка називається Character Spacing (мал. 23). Мал. 23. Вкладка Character Spacing діалогового вікна Font   На цій вкладці є два поля. Їх пояснення і відповідні до них назви атрибутів CSS, що вказуються в коді HTML, представлені в табл. 7. Шрифти, що завантажуються при перегляді сайту Каскадні таблиці стилів надають у ваше розпорядження могутні засоби для вказівки шрифтів і настройки їх параметрів Однак всі ваші зусилля можуть ні до чого не привести, якщо вказаний вами шрифт просто не встановлений на комп'ютері відвідувача Web-сайта В Інтернеті явно назріла необхідність знайти засіб, який дозволяв би завантажувати шрифти прямо з Web-сторінкою, в якій вони використовуються Це дуже допомогло б як Web-дизайнерам, так і відвідувачам Web. З одного боку, дизайнерам не треба було б перетворювати текст в зображення, що сповільнює перегляд сайтів, з іншого боку, відвідувачі бачили б сайт таким, як його створив дизайнер. В програші при такій системі залишаються лише компанії, що розробляють шрифти, так як втрачають можливість продавати шрифти кожному окремому користувачеві. На даному етапі загальноприйнятих механізмів завантаження шрифтів разом з Web-сторінками в Інтернеті ще не існує Однак дещо в цьому напрямі вже зроблено: за адресою www.microsoft.com/opentype розташована початкова сторінка розділу, присвяченого роботі з шрифтами в Web. OpenType - це спільна ініціатива Adobe і Microsoft, мета якої - створити єдині формати шрифтів, що завантажуються, як для систем з підтримкою PostScript, так і систем з підтримкою TrueType. По посиланнях з цієї сторінки ви зможете також завантажити утиліту під назвою Microsoft's Web Embedding Fonts Tool (WEFT). Ця утиліта дозволяє створювати шрифти, які стискаються та завантажуються і які можна використати для всього Web-сайта. за адресою http://www.truedoc.com/розташований сайт, присвячений TrueDoc, - винаходу фірми Bitstream, lnc. Web-дизайнери можуть конвертувати шрифти, встановлені на їх системах, в спеціальний формат файлів TrueDoc (цей процес називається спаленням - burnmg) і розміщувати отримані файли TrueDoc на Web-сайтах. Браузери відвідувачів можуть завантажувати файли TrueDoc і використовувати вміщені в них шрифти для відображення Web-сторінок цього сайта. При створенні файлу в форматі TrueDoc вам необхідно вказати ім'я Web-сайта, на якому він буде використовуватися (наприклад, www.whatever.com), або шлях до файлів /-whoever/. В результаті файли TrueDoc можна використати тільки для одного Web-сайта (або шляху). Таке обмеження було додано спеціально, щоб всі власники Web-сайтів купували шрифти. Але в результаті, якщо користувач відвідує декілька сайтів, на яких використовується один і той же шрифт, йому доведеться завантажувати даний шрифт стільки разів, скільки сайтів він відвідає. На сайті Bitstream пропонують завантажити безкоштовні шрифти, які можна використати на будь-яких вузлах. Там же можна завантажити і елемент управління ActiveX, який дозволяє Internet Explorer використати механізм TrueDoc. за адресою www.hexmac.com можна завантажити утиліту під назвою Typograph. Ця утиліта дозволяє конвертувати встановлені на вашому комп'ютері шрифти в формат TrueDoc. Однак при цьому стежте за тим, чи дозволяє вам ліцензія на придбані вами шрифти використовувати їх таким чином.   Таблиця 7. Настройка відстані між символами за допомогою CSS Поле діалогового вікна Назва атрибута CSS Опис і значення Spacing Letter -spacing Збільшує або зменшує відстань між символами на рядку. Одиниця вимірювання за умовчанням - піксель. Position Vertical- align Значення можна побачити на мал.23 Вертикальне позиціювання тексту відносно рядка. Атрибут vertical-align дозволяє підіймати або опускати проміжок тексту відносно його звичайного положення на рядку. Для цього атрибута CSS в якості значення можна використати наступні ключові слова: baseline. При використанні цього ключового слова лінія шрифту підлеглого (що оточується) об'єкта відповідає лінії шрифту батьківського (що отчує) об'єкта. Це - нормальне положення. ПРИМІТКА Лінія шрифту (baseline) - це уявна лінія, на якій розташовані букви тексту на рядку. Деякі символи (наприклад,j і g) можуть виступати за цю лінію. sub. Лінія шрифту підлеглого об'єкта відповідає лінії шрифту оточуючого текст для нижніх індексів. superscnpts. Лінія шрифту підлеглого об'єкта відповідає лінії шрифту оточуючого тексту для верхніх індексів. text-top. Лінія шрифту підлеглого об'єкта відповідає верхній границі навколишнього тексту. middle. Центр звичайних символів підлеглого об'єкта (звичайні символи - це символи без виступів вгору або вниз, наприклад, х) відповідає лінії шрифту оточуючого тексту плюс 1/2 х-висоти оточуючого тексту (х-висота - це висота все того ж символа х). text-bottom. Нижня границя підлеглого об'єкта відповідає нижній границі оточуючого об'єкта. percentage. Підлеглий текст підіймається або опускається по відношенню до оточуючого на частину висоги оточуючого тексту Наприклад, 50% означає, що текст буде піднятий на половину висоти оточуючого тексту. quantity За допомогою цього ключового слова можна вказати положення тексту відносно оточуючого в будь-яких одиницях вимірювання CSS. Саме це ключове слово звичайно застосовується при використанні поля Position вкладки Character Spacing. Настройка властивостей CSS для абзаців У CSS передбачені потужні засоби для форматування абзаців. Відкрити діалогове вікно Paragraph (Мал. 24) можна, скориставшись командою Paragraph в меню Format. Відразу зазначимо, що команди Border і Numbering в цьому ж списку надають у ваше розпорядження додаткові засоби для оформлення абзаців Мал. 24. Діалогове вікно Paragraph призначене для налагодження властивостей CSS для абзацу Назви атрибутів для використання в коді HTML, що відповідають полям цього діалогового вікна, і їх допустимі значення представлені в табл. 8.   Таблиця 8. Атрибути CSS для форматування абзаців Поле діалогового вікна Назва атрибута CSS Опис і допустимі значення Alignment Text-align Вирівнювання тексту. Допустимі ключові слова: Left-по лівому краю Right-по правому краю Center-по центру Justify-по довжині рядка Indent First Line Text-indent Відступ для першого рядка абзацу . Можна вказувати і від'ємні значення. Тоді перший рядок буде видаватися зліва відносно інших рядків абзацу (outdent). Indent Before Text Indentation After Text Spacing Before Spacing After Margin-left Margin-right Margin-top Margin-bottom Ці чотири властивості визначають розмір пустого простору (зліва, справа, зверху, знизу) між елементами і отчуючою його рамкою (якщо товщина лінії рамки дорівнює нулю, то між елементом і уявною рамкою) Spacing Word Word-spacing Настройка відстані між словами. Позитивні значення збільшують відстань, негативні – зменшують Line Spacing Line-height Настройка відстані між рядками. За умовчанням використовується 1,2 розміру шрифта Висота рядків Атрибут line-height дозволяє вказувати висоту рядків в абзаці (не плутайте її з висотою самого шрифту, зовні вона буде відображатися як відстань між рядками по вертикалі). У FrontPage для цього використовуються пікселі, але CSS також дозволяє вказувати висоту рядка в відсотках або як множник по відношенню до висоти шрифту (наприклад, 120 або 1,2) При вказівці висоти рядка в процентах інші об'єкти успадкують не значення в процентах, а отриману абсолютну величину. Ось приклад: {font-size: 12pt; line-height:120%; } fineprint { font-size: 10 pt; } За умовчанням висота рядка для стилю буде дорівнювати 120% x l2 точок =14,4 точки. Оскільки висота рядка за умовчанням задана в процентах, стиль Fineprint успадкує висоту, вказану в абсолютних одиницях вимірювання - крапках. При цьому висота рядка для даного стилю буде рівна 14, 4. {font-size: 12pt; line-height: 1,2; } fineprint { font-size: 10pt; } У другому прикладі за умовчанням висота рядка для стилю буде така ж (1,2 x 12 точок =14,4 точок). Однак, оскільки висота рядка вказана не в процентах, а як множник, стиль Fineprint успадкує не абсолютне значення, а цей множник. У результаті реальна висота рядка буде рівна 1,2 x 10 =12 точок. Така висота рядка по відношенню для шрифту розміром в 10 точок є прийнятнішою. Відступи У CSS передбачені ключові слова для управління як відступами білого кольору навколо об'єктів (margins), так і невеликими буферними зонами навколо об'єктів (padding). Звичайне компонування з використанням відступів, буферних зон і самих об'єктів показане на мал. 25. Мал. 25. Приклад використання відступів і буферних зон Content area (зона розміщення об'єкту) - та область, в якій розміщені самі об'єкти Web-сторінки, наприклад, текст, зображення або таблиця. Padding (буферна область) - оточує зону розміщення вмістимого. При цьому фон буферної області та інші її властивості співпадають з властивостями області розміщення вмістимого. Border (рамка) - розташована між буферною зоною і відступами (а не між зоною розміщення вмістимого і відступами напряму). Margins (відступи) - оточують буферну зону і рамку (якщо вона є). На відміну від буферної зони, фон якої співпадає з фоном, використаним для зони розміщення вмістимого, фон відступів співпадає з фоном оточуючих областей сторінки. Ширину відступів і буферної зони, а також товщину рамки можна вказувати в будь-яких одиницях вимірювання, прийнятих в CSS. Але частіше за все використовуються пікселі. Використання рамок в CSS Для настройки рамок у FrontPage є вкладка Borders діалогового вікна CSS Borders and Shading (яке можна відкрити, скориставшись командою Borderand... з меню Format, див. мал. 21). Вкладка Borders показана на мал. 26. Мал. 26. Вкладка Вогders дiалогового вікна CSS Borders and Shading Як скористатися засобами цієї вкладки: Двічі клацніть мишкою по одному з варіантів в групі Setting: None означає, що рамки використовуватися не будуть. У цьому випадку ніякі додаткові настройки вам не потрібні; Box означає, що виділений вами об'єкт буде обведений рамкою зі всіх чотирьох сторін; Custom означає, що ви можете вибрати рамку тільки з однієї, двох або трьох сторін. Виберіть відповідний стиль для рамки в списку Style. При цьому в полі Preview відразу ж відобразиться зроблений вами вибір. Використайте стандартний набір діалогових вікон Color для вибору кольору рамки. Поле Width дозволяє задавати товщину рамки. Якщо ви вибрали Custom в групі Setting (або просто вирішили скористатися таким підходом), ви можете скористатися значками навколо головного зображення в полі Preview. Ці значки дозволяють застосовувати рамки до різних сторін об'єкта. Група Padding на цій вкладці дозволяє задавати розмір буферної області з різних сторін об'єкта. Відповідність полів на вкладці Borders ключовим словам, що використовуються в коді HTML для роботи з властивостями CSS, приведені в табл. 9. Таблиця 9. Атрибути СSS для роботи з рамками Поле діалогового вікна Назва атрибута CSS Опис і значення Style Border-style Використовується для визначення типу ліній в рамці. Можна використовувати такі значення, як none (нічого), solid (суцільна), dotted (крапками), dashed (рисками), double (подвійна лінія) та інші зі списку Style (див.мал. 26) Color Border-color Використовується для настройки кольору рамки Width Border-width Товщина рамки. Можна використовувати значення thick, medium, thin чи вказати будь-яке значення з використанням одиниць вимірювання CSS (наприклад, пікселів) Кнопки Preview Border-top Border-right Border-bottom Border-left За допомогою цих чотирьох атрибутів можна задавати стиль лінії для рамки з кожної сторони об’єкта окремо. Можна задавати будь-які значення зі списку Style (див.мал.26), а також none (тобто рамки з цієї сторони немає). (немає) Border-top-width Border-right-width Border-bottom-width Border-left-width За допомогою цих чотирьох атрибутів можна задавати товщину лінії для рамки з кожної сторони об’єкта окремо. Якщо ж товщина ліній зі всіх сторін однакова, простіше використати атрибут border-width. Padding Top Padding-Bottom Padding-Left Padding-Right Padding top Padding-bottom Padding-left Padding-right Ці чотири атрибути дозволяють налагоджувати розмір буферної зони між рамкою і самим об’єктом Якщо ви працюєте з рамками CSS в режимі коду HTML, звичайно замість більш докладних атрибутів, наведених в табл. 9, простіше використати більш загальні атрибути border і padding. Наприклад, по значенню: special { border; 2px solid #900; } нічим не буде відрізнятися від довшого рядка: special { border-width: 2px; border-style; solid; border-color; #900; } У більшості випадків не обов'язково дотримуватися чіткого порядку для вказівки атрибутів рамки. Браузер сам зможе розібратися, що імена стилів відносяться саме до стилів рамки, значення кольору - це колір рамки і т. д. Однак, якщо вам необхідно вказати одночасно і товщину рамки, і ширину буферної зони, значення для них в одиницях вимірювання CSS необхідно розташовувати в певному порядку (табл. 10) Друга вкладка діалогового вікна Borders and Shading, яка називається Shading, дозволяє настроїти затінення (або фон). Ця вкладка показана на мал.27, а відповідність її полів атрибутам CSS представлена в табл. 11. Таблиця 10. Як будуть використовуватися значення атрибутів border width (товщина рамки) і padding-width (ширина буферної зони) у випадку, якщо вказано декілька значень. Кількість вказаних значень Номер значення в списку для рамки Зверху Справа Знизу Зліва 1. Перше Перше Перше Перше 2. Перше Друге Перше Друге 3. Перше Друге Третє Друге 4. Перше Друге Третє Четверте Мал. 27. Вкладка Shading діалогового вікна Borders and Shading Таблиця 11. Атрибути CSS для роботи із затіненням (фоном) Поле діалогового вікна Назва атрибута CSS Опис і значення Background Color background-color Колір за умовчанням, який буде використовуватися як фон для елемента Foreground Color color Колір, який буде використовуватися для змісту елемента Для багатьох елементів сторінки, наприклад, це буде колір тексту Background Image background-image Зображення, яке буде фоновим для елемента Vertical Position Horizontal Position Background position Розміщення першого (або єдиного фонового зображення). Можуть використовуватися наступні значення: top (верх), bottom (низ), center (центр), left (зліва), right (справа)- визначають положення відносно області сторінки; Значення в процентах також вказують положення відносно області сторінки. Наприклад, 0% 0% означає верхній лівий кут, 100% 100% означає нижній правий кут. Можна використовувати будь-які одиниці виміру СSS для настройки відстаней від верхнього лівого кута. Repeat background –repeat Цей атрибут визначає, чи буде фонове зображення повторюватися, щоб заповнити весь відведений йому простір. Repeat означає, що зображення буде повторюватися як по горизонталі, так і по вертикалі, repeat-x означає, що зображення буде повторюватися тільки по горизонталі, repeat-y означає, що зображення буде повторюватися тільки по вертикалі, no repeat означає, що зображення буде показане тільки одного разу і більше повторюватися не буде Attachment background-attachment Визначає, чи буде фонове зображення рухатися зі всіма іншими елементами сторінки, чи залишиться нерухомим. scroll - фонове зображення переміщається з іншими елементами сторінки (за умовчанням), fixed - залишається нерухомим. Списки CSS Для роботи зі списками у FrontPage є діалогове вікно Bullets and Numbering (яке можна відкрити, скориставшись командою Numbering з меню Format, див. мал. 21). Це діалогове вікно показане на мал. 28. У цього діалогового вікна є три вкладки: Вкладка Picture Bullets призначена для використання в якості символа початку елемента списку вибраного вами зображення. Шлях до цього зображення можна вказати в полі Picture (або просто вибрати зображення, скориставшись кнопкою Browse). Вкладка Plain Bullets надає у ваше розпорядження чотири стандартних символи для початку елемента списку. Зверніть увагу, що можна вибрати і маркірований список без яких-небудь маркерів. Вкладка Numbers призначена для роботи з нумерованими списками. На ній ви можете вибрати один із шести стандартних варіантів нумерованих списків Мал. 28. Діалогове вікно Bullets and Numbering Відповідність полів діалогового вікна Bullets and Numbering стандартним атрибутам CSS представлена в табл. 12. Треба зазначити, що зі всієї розглянутої відповідності між полями діалогових вікон FrontPage і атрибутами CSS в цьому випадку пряма відповідність мінімальна.   Таблиця 12. Атрибути CSS для роботи зі списками Поле діалогового вікна Назва атрибута CSS Опис і значення Bullet Samples list style-type Визначає тип маркера початку елемента списку (bullet). Можна використати значення disc (чорний кружок), circle (такий же круг, але без заповнення), square (квадратик), decimal (десятеричне число), i (маленькі римські цифри), I (великі римські), А (великі букви), а (малі) і None (ніякого маркера немає). Picture List-style-image URL зображення, яке браузер буде використовувати як маркер початку елемента списку. (немає) list-style-position Показує, де буде розташований маркер всередині поля списку (inside) або поза ним (outside). За умовчанням використовується outside. (все) list-style Ця загальна властивість, яка може використовуватися замість всіх вищеперерахованих. Браузер розпізнає вказані вами атрибути, засновуючись на синтаксисі їх значень. Деякі додаткові атрибути CSS У табл. 13 перераховані додаткові атрибути CSS, які не мають прямих аналогів в діалогових вікнах FrontPage. У деяких випадках ці значення можуть виявитися корисними, особливо якщо ви багато працюєте з кодом HTML.   Таблиця 13. Атрибути CSS, для яких немає прямих аналогів в діалогових вікнах FrontPage Атрибут CSS Опис і значення Width Ширина будь-якого елемента (можна використати будь-які одиниці вимірювання CSS) Height Висота будь-якого елемента (можна використати будь-які одиниці вимірювання CSS) Float Вирівнювання об'єкта по лівому краю (left), по центру (center) і по правому краю (right) Текст буде обтікати ті об'єкти, які розміщені по лівому краю, або по правому краю, але не по центру Якщо цей атрибут не вказаний, то за умовчанням в залежності від типу об'єкта він буде розміщений на одному рядку з текстом або по лівому краю без обтікання текстом. Clear Об'єкт буде розташований на сторінці так низько, щоб він в будь-якому випадку не був розташований з будь-якими іншими елементами, вирівняними по правому краю, лівому краю або по будь-якому краю. Можна використати значення none (за умовчанням, атрибут не діє), left (застосовуваний до об'єктів по лівому краю), right (по правому краю), both (no обом краям) Display Визначає, як буде зображений об’єкт. Можливі значення: block - об'єкт починається з нового рядка (наприклад, абзац або заголовок), іnline - розташований прямо на рядку (наприклад, частина тексту, виділений напівжирним), list-item – об’єктбудет вміщений в спеціальне поле, забезпечене маркером(наприклад, елемент списку), none - елемент відображатися не буде White-space Керує відображенням всіх елементів, замість яких відображається пустий простір (пропусків, символів, табуляції, переведення рядка і т д). Можливі значення: normal (за умовчанням) - всі подібні елементи відображаються як єдиний пропуск, pre - всі ці елементи будуть відображатися відповідно до їх кількості, nowrap - те ж, що і normal, але рядки, які довші, ніж вікно браузера, не будуть автоматично форматуватися відповідно до вікна Спільне використання каскадних таблиць стилів У CSS передбачені два способи, які дозволяють двом різним групам Web-сторінок спільно використовувати один і той же набір стилів. При використанні першого методу в розділ Head кожної сторінки, для якої ви хочете використати загальний набір стилів, вміщується посилання на документ-джерело цих стилів, наприклад: <link rel="StyleSheet" href="sharecss.css" type="text/css"> Вставка таких тегів виготовляється в режимі коду HTML. При цьому тег розміщується на новому рядку безпосередньо після тега <head>. Файл-джерело (в нашому випадку це sharecss.css) може містити тільки вирази CSS. На жаль, цей метод має два істотних обмеження: в кожному файлі може бути тільки одне подібне посилання, і, крім того, ви не зможете в документі використати інші стилі CSS. Якщо ви порушите це правило, браузер запитає відвідувача Web-сайта про те, який набір стилів він вважає за краще використати. Навряд чи вам це потрібно. Другий метод полягає у використанні команди @import в звичайній таблиці стилів, наприклад: <STYLE type="text/css"> @import “stylecss.css" H1 { font-style. Arial, snas-senf;} </STYLE> Використання цього методу дозволяє уникнути обмежень першого методу (з використанням команди link). При цьому ним можна користуватися, взагалі не вдаючись до редагування коду HTML. Ось як виглядає його застосування на практиці: Створіть файл з набором потрібних вам стилів CSS, а потім збережіть його з розширенням .css. Якщо вам треба використати цей набір стилів CSS тільки для деяких сторінок, виберіть ці сторінки. Можливо, простіше усього це зробити в режимі Folder View. У меню Format виберіть Style Sheet Links. Відкриється діалогове вікно, показане на мал. 29. У цьому діалоговому вікні встановіть перемикач в положення All pages, якщо ви хочете застосувати набори стилів до всіх сторінок Web, і Selected page(s), якщо ви плануєте застосувати їх тільки до вибраних. Потім виберіть файли .css, які ви хочете використати як джерела наборів стилів, за допомогою кнопки Add (якщо вони вже вибрані в списку URL, то цього робити не треба). Тепер вам залишилося тільки натиснути OK, і ви зможете використати загальні набори стилів для всіх вибраних вами Web-сторінок. Мал. 29. Діалогове вікно Link Style Sheet

Помоги брату-студенту! Пришли линк на книгу, которой здесь нет!