Глава 2
CSS
Це глава 2 книги Каскадні таблиці стилів, розроблені для Інтернету, від Håkon Wium Lie та Bert Bos (2-е видання, 1999, Addison Wesley, ISBN 0-201-59625-3)
Як ми з'ясували в попередньому розділі, HTML елементи дозволяють дизайнерам веб-сторінки робити розмітку щодо структури цього документа. Специфікація HTML наводить методичні рекомендації про те, як браузери повинні відображати ці елементи. Наприклад, ви можете бути впевнені, що вміст елементa strong буде відображатися жирним. Крім того, ви можете бути впевнені ще в багато чому, більшість браузерів відображають вміст елемента H1 великим розміром шрифту ... принаймні більше, ніж елемент P і більшим, ніж елемент Н2. Але окрім впевненості та надії ви не маєте ніякого контролю над тим, як ваш текст буде відображатися.
CSS змінює це. CSS садить дизайнера в сидіння водія. Ми присвятили більшу частину цієї книги поясненню того, що можна робити за допомогою CSS. У цій главі ми починаємо знайомити вас з основами, писання таблиць стилів CSS і HTML, і як працювати з ними разом, щоб описати структуру і зовнішній вигляд вашого документа.
Правила і таблиці стилів
Щоб почати використовувати CSS, вам навіть не доведеться писати таблиці стилів. Глава 16 розповість вам, як вказати існуючі стилі в Інтернеті.
Існують два способи створення CSS. Ви можете використовувати звичайний текстовий редактор і написати каскадні таблиці стилів (Style Sheets) "від руки", або Ви можете використовувати спеціальний інструмент - наприклад, для веб-дизайну програм - з підтримкою CSS. Спеціальні інструменти дозволяють створювати таблиці стилів без вивчення синтаксису мови CSS. Однак у багатьох випадках, конструктор захоче налаштувати таблицю стилів вручну пізніше, тому ми рекомендуємо, щоб Ви навчилися писати і редагувати CSS вручну. Давайте приступимо!
H1 { color: green }
Те що Ви бачите вище є простим правилом CSS, яке містить одне правило. Правило із заявою про один стилістичний аспект щодо одного або більшої кількості елементів. Таблиця стилів являє собою набір з одного або кількох правил, які застосовуються в документі HTML. Правило вище встановлює колір всього першого рівня заголовків (H1). Давайте коротко розглянемо, яким може бути візуальний результат цього правила:
Малюнок 2.1
![[image]](http://www.w3.org/Style/LieBos2e/enter/0.png)
Ми зараз розглянемо правило.
Структура правила
Правило складається з двох частин:
- Селектор - частина перед лівою фігурною дужкою
- Декларація - частина в
фігурних дужках
![[image]](http://www.w3.org/Style/LieBos2e/enter/anatomy-rule.png)
Селектор є сполучною ланкою між документом HTML і стилями. Він визначає, які елементи залежать від цієї декларації. Декларація є тією частиною правила, що визначає, який буде кінцевий ефект. У наведеному вище прикладі, селектор H1 і Декларації, "color: green". Таким чином, всі елементи H1 будуть зазначені в декларації, тобто вони будуть зеленими. (Властивість color впливає тільки на колір тексту, є й інші властивості фону, межі і т.д.)
Попередній селектор в залежності від типу елемента: вибирає всі елементи типу "h1". Такий селектор називається селектором типу (type selector). Будь-який тип HTML елементу може бути використаний як тип селектора. Селектор типу найпростіших тип селекторів. Ми обговорюваємо інші види селекторів см. CSS селектори. , "CSS селектори".
Структура декларації
Декларація має дві частини розділені на колонки:
- Властивість - та частина перед двокрапкою
- Значення - та частина після
двокрапки
![[image]](http://www.w3.org/Style/LieBos2e/enter/anatomy-decl.png)
Властивість є характеристикою, яка щось обробляє. У попередньому прикладі, це колір. CSS2 (див. в окремому блоці) визначає близько 120 властивостей, і ми можемо привласнити значення всім з них.
Значення точної специфікації властивостей. У прикладі, це властивість є "зеленим", але колір може так само легко бути блакитним, червоним, жовтим, або будь-хто інший.
На наведеній нижче діаграмі показані всі інгредієнти правила. Фігурні дужки (()) і двокрапка (:) робить можливим для браузера розрізняти селектор, властивість і значення.
Малюнок 2.2 Схема системи правління.
![[image]](http://www.w3.org/Style/LieBos2e/enter/anatomy-diag.png)
Угрупування селектора і правила
При проектуванні CSS, метою була стислість. Ми подумали що, якщо б ми могли зменшити розмір таблиць стилів, ми могли б дозволити дизайнерам створювати і редагувати таблиці стилів "вручну". Крім того, короткі таблиці стилів завантажуються швидше, ніж більш довгі. CSS, отже, включає ряд механізмів для скорочення стилів шляхом групування селекторів і декларацій.
Наприклад, розглянемо ці три правила:
H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
Усі три правила мають таке ж саме оголошення - вони встановлюють жирний шрифт (Bold). (Це робиться з використанням font-weight властивості, яку ми обговоримо див. Шрифти.) Оскільки всі три заяви є ідентичними, ми можемо згрупувати селектори розділені комами в список:
H1, H2, H3 { font-style: bold }
Це правило зробить той самий результат, що і перші три.
Селектор може мати більше однієї декларації. Наприклад, ми могли б написати таблицю стилів з цими двома правилами:
H1 { color: green }
H1 { text-align: center }
У цьому випадку, ми визначили всі елементи h1 як зелені та вирівняні по центру сторінки. (Це робиться за допомогою text-align властивості, що детальніше розглядається в розділі 5.)
Але ми можемо досягти того ж результату швидше, за допомогою угруповання декларацій, які відносяться до того ж селектора, наприклад:
H1 {
color: green;
text-align: center;
}
Усі декларації повинні міститися в парі фігурних дужок. Заяви відокремлюється крапкою з комою в кінці кожної декларації, але в кінці останньої декларації крапка з комою не обов'язкові. Крім того, щоб зробити Ваш код більш зручним для читання, ми пропонуємо Вам містити кожну заяву на окремому рядку, як ми робили тут у прикладі. (Браузери на це не звертають уваги, вони просто ігнорують всі зайві пробіли та розриви рядків.)
Тепер у Вас є основи, як створювати CSS правила і таблиці стилів. Однак, Ви ще цього не робили. Для того, щоб стилі мали хоч який-небудь ефект, необхідно "зв'язати" таблиці стилів з HTML документом.
"Зв'язок" таблиць стилів з документом
Щоб будь-який стиль впливав на HTML документ, він повинен бути "пов'язаний" з документом. Тобто, таблиці стилів і HTML документ мають бути об'єднані, для того щоб вони могли працювати разом, щоб представити цей документ. Це можна зробити будь-яким з чотирьох способів:
- Найчастіше, це застосування всього документу таблиць стилів до HTML документу за допомогою элемента стилю (style).
- Застосування стилів до окремих елементів за допомогою атрибуту стилю.
- Поєднання зовнішньої таблиці стилів з HTML документом, використовуючи елемент посилання.
- Імпорт таблиць стилів використовуючи CSS позначення @import.
У наступному розділі ми розглянемо перший метод: використання стилю елемента. Ми обговоримо використання стилю атрибута в розділі 4, "CSS селектори", і з використанням елемента посилання та позначення @import 16 глава, "Зовнішні стилі".
Пов'язання за допомогою елемента стилю
Ви можете пов'язати стилі і HTML документ разом, розмістивши таблицю стилів всередині елемента стилю (style) у верхній частині документа. Елемент стилю був введений в HTML спеціально, щоб дозволити стилям бути розміщенними всередині HTML документів. Ось таблиця стилів (позначено жирним) розміщена в середині документа та пов'язана зі зразком документа за допомогою елемента стилю. Результат показаний на малюнку 2.3.
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE>
H1, H2 { color: green }
</STYLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific
composer. Among his works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
<H2>Historical perspective</H2>
<P>Bach composed in what has been referred to as
the Baroque period.
</BODY>
</HTML>
Малюнок 2.3 Результат додання до таблиці стилів правила, яке робить всі h1 (h2) елементи зеленого кольору, а потім пов'язує їх з документом за допомогою едементів стилю (style). (спробуйте)
![[image]](http://www.w3.org/Style/LieBos2e/enter/1.png)
Зверніть увагу, що стиль елемента ставиться після назви елементу і перед тілом елементу. Назва документа, не з'являється в самому документі, так що це не впливає на стилі CSS.
Вміст елемента стилю це таблиці стилів. У той час як, зміст таких елементів як h1, p і ul з'являється при відображенні документа, зміст елементу стилю не відображається в цьому документі. Швидше, це є наслідком змісту елементу стилю - табиць стилів - що з'являється в документі. Таким чином, Ви не побачите відображенний на екрані текст "(color: green)", Ви побачите замість двох елементів h1 слово або текст зеленим кольором. Не було додано ніяких правил, що зачіпають будь-які інші елементи, так що ці елементи будуть відображатися в кольорі визначеному в браузері за замовчуванням.
Браузери і CSS
Для оновлених оглядів наявних браузерів див на на сторінці W3C огляд
За для того щоб CSS працював, як описано в цій книзі, ви повинні використовувати браузер з CSS-розширенням, то є браузер, що підтримує CSS. CSS-розширення браузера розпізнає стиль елементу як контейнер для стилів і відображає документ, відповідно. Більшість браузерів, які поширюються сьогодні підтримують CSS, наприклад, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) і Opera 3.5 (O3.5). Консервативні оцінки показують, що більше половини людей в Інтернеті використовують CSS-розширення браузера, і ця цифра неспинно зростає. Швидше за все, що люди, які працюють з CSS мають оновлені браузери. Якщо ні, то не було причини для оновлення!
Найкращим джерелом інформації про те, як різні браузери підтримують CSS є WebReview's charts
На жаль, не всі CSS реалізації є досконалими. Коли Ви почнете експериментувати зі стилями, Ви помітите, що кожен браузер поставляється з набором помилок і недоліків. В цілому, нові браузери ведуть себе краще, ніж старі. IE4 і O3.5 є одними з кращих, Netscape пропонує - під кодовою назвою Gecko - так само багатообіцяючу значно поліпшену підтримку CSS.
Ті, хто не користується оновленими CSS браузерами, як і раніше можуть читати сторінки, які використовують стилі. CSS був ретельно спроектований таким чином, що увесь зміст повинен залишатися видимим, навіть якщо браузер нічого не знає про CSS. Деякі браузери, такі як Netscape Navigator версій 2 і 3 не підтримують стилі, але вони знають достатньо про елементи стилів і повністю ігнорують їх. Поряд з підтримкою стилів, це правильне поводження.
Однак в інших браузерах, які не знають елементу стилю, таких як Netscape Navigator 1 і Microsoft Internet Explorer 2, будуть ігнорувати теги в стилі відображення вмісту елементу стилю. Таким чином, користувачеві, в кінцевому підсумку, буде відображено таблиці стилів у верхній частині документа. На момент написання, тільки у кількох відсотків користувачів Мережі буде виникати ця проблема. Щоб уникнути цього, Ви можете додати до таблиці стилів у середині HTML коментарі, які ми обговорювали в Главі 1. Тому що коментарі не відображаються на екрані, розміщуючи свій лист стилів у середині коментаря HTML, Ви уникнете проблем відображення змісту елемента стилю найстаріших браузерів. Браузери з підтримкою CSS-розширення вже знають про цю хитрість і будуть ставитися до змісту елемента стилю, як до таблиці стилів.
Нагадаємо, що HTML коментарі починаються з <!-- і закінчуються -->. Ось частина коду з попереднього прикладу, який показує, як Ви можете писати стилі в коментарях HTML. Коментарі покривають тільки зміст елементу стилю:
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE>
<!--
H1 { color: green }
-->
</STYLE>
<BODY>
..
</BODY>
</HTML>
CSS також має свій власний набір зауважень, які можна використовувати в таблиці стилів. CSS коментарі починаються з "/*" і закінчуються "*/". (Ті, хто знайомий з мовою програмування з цим будуть згодні.) CSS правила всередині CSS коментаря не буде жодним чином впливати на відображиння документа.
Також необхідно вказати браузеру, що Ви працюєте з таблицями стилів CSS. Сьогодні CSS є єдиною мовою таблиці стилів що може працювати з документами HTML і ми не очікуємо змін цього. Для XML становище може бути іншим. Але, так само, є більш ніж одного формату зображення (GIF, JPEG та PNG це ті що приходять на розум), не може бути більше однієй мови стилю. Так що, для браузерів це добре сказати, що вони мають справу тільки з CSS. (Насправді, HTML вимагає це від Вас.) Це робиться за типом атрибуту елемента стилю. Значення типу вказує, який тип таблиці стилів використовується. Для CSS, це значення "text/css". Нижче наводиться частина коду з наших попередніх зразків документа, який показує Вам, як можна було б написати це (у поєднанні з використанням HTML коментаря):
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: green }
-->
</STYLE>
<BODY>
..
</BODY>
</HTML>
Коли браузер завантажує документ, він перевіряє, чи це є документ який уживає мову таблиць стилів. Якщо це так, він буде намагатися читати стилі, інакше він буде ігнорувати їх. Атрибут типу (див. розділ 1 обговорення атрибутів HTML) вказаний у елементі стилю допомагає браузеру визначити, який стиль використовується. Тип атрибуту повинен бути включений.
При наведенні прикладів легше читати стилі, які не в HTML коментарі, але ми використовуємо атрибут типу в цій книзі.
Деревоподібні структури та успадкування
Нагадаємо, з глави 1 обговорення представлення HTML документа з деревоподібною структурою, і як елементи в HTML документі мають дітей та батьків. Є багато причин того, щоб документ був деревоподібної структури. Для стилів, є одна дуже хороша причина: успадкування. Подібно до того, як діти успадковують від своїх батьків, так само роблять і HTML елементи. Замість того, щоб постійно успадковувати гени та багатство, HTML елементи успадковують стилістичні властивості.
Розпочнемо з короткого огляду на зразок документа:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a
<STRONG>prolific</STRONG> composer. Among his
works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
</BODY>
</HTML>
Деревоподібна структура цього документа:
![[image]](http://www.w3.org/Style/LieBos2e/enter/anatomy-tree.png)
Через механізм успадкування, значень CSS власностей, встановлених до одного елементу, будуть передані вниз по стовбуру, для його нащадків. Наприклад, наш приклад до цих пір, встановлює зелений колір для елементів h1 і h2. Тепер, Ви хотіли б встановити такий самий колір всім елементам у документі. Ви можете зробити це шляхом перерахування всіх типів елементів у селекторі:
<STYLE TYPE="text/css">
H1, H2, P, LI { color: green }
</STYLE>
Однак, більшість HTML документів є більш складними, ніж наші зразки документів, у такому разу, Ваш стиль буде досить великим. Існує більш кращій, і коротший, шлях. Замість того щоб встановлювати стиль на кожен тип елемента, ми поставили його на елемент body:
<STYLE TYPE="text/css">
BODY { color: green }
</STYLE>
Оскільки інші елементи успадковують властивості від елемента body, всі вони будуть наслідувати зелений колір (мал. 2.4).
Малюнок 2.4 Результат наслідування. (Спробуйте)
![[image]](http://www.w3.org/Style/LieBos2e/enter/2.png)
Як ви бачили вище, успадкування системи передачі, яка буде поширювати стилістичні властивості елементам нащадків. Оскільки елемент body є спільним батьком для всіх відображаємих елементів, body (тіло) є зручним селектором, коли ви хочете встановити стилістичні правила для всього документа.
Переважне успадкування
У попередньому прикладі, всі елементи отримали той самий колір у спадщину. Однак, іноді діти не схожі на своїх батьків. Не дивно, в CSS також. Скажімо, ви хотіли б для елементів H1 встановити синій колір, а для решти зелений колір. Це легко виражається в CSS:
<STYLE TYPE="text/css">
BODY { color: green }
H1 { color: navy }
</STYLE>
H1 є дочірнім для елемента body (і, таким чином, успадковує від body), два правила у наведеній вище таблиці стилів, що є суперечливими. Перше встановлює колір елемента body (і, тим самим, колір елемента h1, у спадщину), а друге встановлює колір беспосередньо для елемента h1. Яке правило переможе? Давайте з'ясуємо:
![[image]](http://www.w3.org/Style/LieBos2e/enter/3.png)
Причиною перемоги другого правила є те, що воно є більш конкретним, ніж перше. Перше правило дуже загальне - воно зачіпає всі відображені елементи. Друге правило, впливає тільки на елементи H1 в документі, і тому є більш конкретним.
Якщо CSS був би мовою програмування, порядок, у якому зазначені правила визначав би, яке з них переможе. CSS не є мовою програмування, і в наведеному вище прикладі, порядок не має значення. Результат буде такий самий, якщо ми використаємо цю таблицю стилів:
<STYLE TYPE="text/css">
H1 { color: navy }
BODY { color: green }
</STYLE>
CSS був розроблений для вирішення конфліктів між таблицями стилів, як наведено вище. Специфіка є одним з аспектів цього. Ви можете знайти подробиці в главі 15 ,"Каскадність і спадковість"
Властивості, які не успадковуються
Як правило, властивості CSS отримують спадоковість від елементів батьків до дитини, як описано в попередніх прикладах. Однак, деякі властивості не успадковуються, і тому завжди є добра причина. Ми будемо використовувати властивість background (фон) (описану в главі 11), як приклад, властивостей, що не успадковуються.
Припустимо, Ви хочете встановити фоновий малюнок для сторінки. Це досить поширена практика в Інтернеті. У CSS, Ви можете написати:
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
BODY {
background: url(texture.gif) white;
color: black;
}
</STYLE>
<BODY>
<H1>Bach's <EM>home</EM> page</H1>
<P>Johann Sebastian Bach was a prolific
composer.
</BODY>
</HTML>
Властивість background (фон) має URL ("texture.gif"), що вказує на фонове зображення як значення. При завантаженні зображення, документ виглядає наступним чином:
![[image]](http://www.w3.org/Style/LieBos2e/enter/4.png)
Є кілька примітних речей у наведеному вище прикладі:
- Фонове зображення покриває поверхню як шпалери - також і фон, характерний для h1 і p елементам. Це не через спадщини, та ще є той факт, що, якщо інший фон не встановлено, всі власності фону є прозорими. Отже, оскільки ми нічого не встановили для h1 або h елементів до чогось іншого, батьківський елемент body буде просвічувати.
- На додаток до URL зображення, також був вказаний колір (білий) як фон. У випадку, якщо зображення не може бути знайдено, Ви побачите звичайний колір замість фону.
- Колір body елемента був встановлений чорним. Щоб забезпечити контраст тексту та фону, є доволі гарною звичкою завжди встановлювати color (колір) коли встановлено влативість background (фон).
Так чому саме background (фон) не успадковує значення? Візуально, ефект прозорості схожий на спадкування: Схоже, що всі елементи мають однаковий фон. Є дві причини: по-перше, прозорий фон є швидшим для відображення (бо немає нічого для відображення!), а ніж інші властивості фону. По-друге, фонові зображення відповідають і належать елементу, в іншому випадку в кінці документа не завжди йде гладка поверхня відображення.
Загальні завдання CSS
Налаштування кольору і фону, як описано вище, відносяться до числа найбільш поширених завдань, що виконуються CSS. Інші загальні завдання включають в себе встановлення шрифтів і білого простору навколо елементів. Цей розділ надає Вам керування по CSS властивостях що найчастіше використовуються.
Загальні завдання: fonts (шрифти)
Давайте почнемо зі шрифтів. Якщо Ви використовували програми для публікації документів в минулому, Ви повинні вміти читати цю маленьку таблицю стилів:
H1 { font: 36pt serif }
Правило наведене вище встановлює шрифт для елементів h1. Перша частина значення (36pt) встановлює розмір шрифту у 36 пікселів. "Крапка/Пункт" - це стара друкарська одиниця виміру, яка вижила в епоху цифрових технологій. У наступному розділі ми розповімо вам, чому ви повинні використовувати "em" одиницю замість "pt", але поки ми будемо дотримуватися пунктів. Друга частина значення (Serif) говорить браузеру використовувати шрифт serif (з маленькими гачками на кінцях символів, глава 5 роскаже Вам все про них). Більш прикрашені serif шрифти були більше вживані на сторінках, як зразок Bach's home page, оскільки сучасні sans-serif шрифти (шрифти без гачків), не були використані в свій час. Ось результат:
![[image]](http://www.w3.org/Style/LieBos2e/enter/5.png)
Властивість font (шрифт) є скороченною властивостю, для встановлення ряду інших властивостей одночасно. Використовуючи її, Ви можете скоротити Ваші таблиці стилів і набір значень за всіма властивостями. Якщо Ви вирішите використовувати розширену версію, Вам доведеться встановити всі параметри, щоб замінити наведений вище приклад:
H1 {
font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal;
}
Іноді Ви тільки бажаєте встановити одне з них. Наприклад, ви можете встановити текст з нахилом в деяких елементах. Ось приклад:
UL { font-style: italic }
Font-style властивість не буде змінювати розмір шрифту чи сімейства шрифтів, буде торкатися тільки для нахилу існуючого шрифту. При встановленні ul елемента, li елементи всередині ul стануть з нахилом, так як стиль шрифту успадковується. Ось результат при застосуванні до тестової сторінки:
![[image]](http://www.w3.org/Style/LieBos2e/enter/6.png)
Крім того, font-weight властивість використовується для зміни ширини - літер. Ви можете підкреслити пункти списоку, встановивши для їх батька значення bold:
UL {
font-style: italic;
font-weight: bold;
}
Що це дає:
![[image]](http://www.w3.org/Style/LieBos2e/enter/7.png)
Останні властивості, font-variant і line-height, підтримуються не всіма браузерами до цих пір, і тому ще не так часто використовуються.
Загальні завдання: margins (відступу)
Налаштування відступу (простору) навколо елементів є основним інструментом у друкарстві. Заголовок над цим пунктом має простір над ним і (трохи менше) простору під ним. Цей пункт, як надруковано в книзі, має місце з ліва і (трохи менше) справа. CSS можна використовувати, щоб встановити, яким має бути простір навколо різних елементів.
За замовчуванням, браузер знає зовсім небагато про те, як відобразити різні типи елементів HTML. Наприклад, він знає, що list (список) і blockquote (цитата) елементи повинні мати відступ від іншого тексту. Як дизайнер, Ви можете побудувати сторінку на цих параметрах і, в той же час, забезпечити власні уточнення. Давайте скористаємося blockquote елементом як прикладом. Ось тестовий документ:
<HTML>
<TITLE>Fredrick the Great meets Bach</TITLE>
<BODY>
<P>One evening, just as Fredrick the Great was
getting his flute ready, and his musicians
were assembled, an officer brought him a
list of the strangers who had arrived. With
his flute in his hand he ran over the list,
but immediately turned to the assembled
musicians, and said, with a kind of
agitation:
<BLOCKQUOTE>"Gentlemen, old Bach is come."
</BLOCKQUOTE>
<P>The flute was now laid aside, and old Bach, who
had alighted at his son's lodgings, was immediately
summoned to the Palace.
</BODY>
</HTML>
Малюнок, наведений нижче, є знімком з екрану та відображає, як типовий HTML браузер буде відображати цей документ:
![[image]](http://www.w3.org/Style/LieBos2e/enter/8.png)
Як Ви можете бачити, браузер додав простору на всіх сторонах цитованого тексту. У CSS це називають "полями" чи "відступами", а всі елементи мають такі поля по всіх чотирьох сторонах. Властивості називаються: margin-top, margin-right, margin-bottom і margin-left. Ви можете змінити спосіб відображення елемента blockquote і додати трохи стилів:
BLOCKQUOTE {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
font-style: italic;
}
"em" група розглядатиметься детально в наступному розділі, але ми можемо вже зараз розкрити свій секрет: воно масштабується з порівнянням розміру шрифту. Таким чином, вищенаведений приклад призведе до того, що вертикальні поля будуть вище, ніж розмір шрифту (1em) від blockquote, а горизонтальні поля маютимуть нульову ширину. Щоб переконатися, текст у лапках ще можна відрізнити курсивом (нахилом). Результат:
![[image]](http://www.w3.org/Style/LieBos2e/enter/9.png)
Так само, як скорочені властивості font для встановлення декількох властивостей шрифтів одночасно, margin є скороченною властивістю, яка встановлює всі властивості полів. Наведений вище приклад може бути записаний:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
}
Перша частина значення (1em) присвоюється margin-top. Звідти, за годинниковою стрілкою: 0em присвоюється margin-right, 1em присвоюється margin-bottom і 0em присвоюється margin-left.
З лівого краю відступ дорівнює нулю, але тексту в лапках потрібно встановити більше стилів, щоб його відділити від решти тексту. У цьому допомагає налаштування font-style курсивом та додання кольору фону:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
background: #EDB;
}
Результат:
![[image]](http://www.w3.org/Style/LieBos2e/enter/10.png)
Як і очікувалося, колір фону тексту в лапках змінився. На відміну від попереднього прикладу, колір, вказаний в червоний/зелений/синій (red/green/blue) (RGB) компоненті. RGB кольори докладньо описані у розділі 11.
Одна стилістична проблема в наведеному вище прикладі, колір фону ледве покриває текст в лапках. Простір навколо цитати (різниця області) не використовує колір фону елемента. CSS має інший тип простору, так званий padding (оббивка), який використовує колір фону елемента. В інших відносинах padding властивості схожі на margin у властивостях: вони додають простору навколо елементу. Додамо padding для тексту в лапках:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
background: #EDB;
padding: 0.5em;
}
До результату встановленого padding додано простір між текстом і прямокутником, що його оточує:
![[image]](http://www.w3.org/Style/LieBos2e/enter/11.png)
Зверніть увагу, що властивості padding було визначено лише одне значення (0.5em). Так само, як margin властивість, padding може вбирати 4 значення, які призначені зверху, праворуч, внизу і зліва відступ відповідно. Проте, коли иреба встановити однакові значення на всі сторони, вистачить вказати значення тільки один раз. Це вірно як для padding і margin (а також для деяких інших властивостей простору, які описані див. Простір навколо блоків.).
Загальні завдання: link (посилання)
Щоб зробити CSS більш зручним для користувачів, для перегляду гіпертекстових документів, посилання повинні мати стиль, який відрізняє їх від звичайного тексту. HTML браузери за замовчуванням підкреслюють текст гіперпосилання. Крім того, різні схеми кольорів були використані для того, щоб вказати чи користувач раніше відвідав посилання, чи ні. Оскільки гіперпосилання є основною частиною Інтернету, CSS має спеціальну підтримку для їх відображення. Ось простий приклад:
A:link { text-decoration: underline }
Наведений вище приклад вказує, що відвідані посилання повинні бути підкреслені:
![[image]](http://www.w3.org/Style/LieBos2e/enter/12.png)
Підкреслені посилання, як ми визначили, але вони також є синіми, проте ми цього не робили. Якщо автори не вказують всі можливі стилі, браузери використовують стандартні стилі для заповнення прогалин. Взаємодії між автором стилю, типового стилю браузера і стилів визначених користувачем (за власними уподобаннями користувача) є ще одним прикладом врегулювання конфліктів правил CSS. Він називається каскад ( "С" у CSS скороченні). Ми обговоримо каскад нижче.
Селектор (A:link) заслуговує
на особливу згадку. Ви, мабуть, пізнаєте "A"
як елемент HTML, але остання частина є новою.
":link" є одним з низки так званих
псевдо-класів в CSS. Псевдо-класи
використовуються, щоб надати стилі
елементів на основі інформації, за межами
самого документа. Наприклад, автор
документа не може знати напевно, чи було
переглянуте користувачем це посилання чи
ні. Псевдо-класи докладно описані в главі 4,
І ми лише наведемо декілька прикладів:
A:visited { text-decoration: none }
Це правило надає стиль відвіданим посиланням, а A:link дає стиль не відвіданим посиланням:
A:link, A:visited { text-decoration: none }
A:hover { background: cyan }
Останнє правило упроваджує новий псевдо-клас :hover. Припускаючи, що користувач наводить вказівний пристрій (наприклад, миша), вказаний стиль буде застосовуватися до елемента, коли користувач переміщує вказівник на ("парить" (hovers) над ним) посилання. Загальний ефект полягає в зміні кольору фону. У прикладі вона виглядає наступним чином:
![[image]](http://www.w3.org/Style/LieBos2e/enter/13.png)
Псевдо-клас :hover має цікаву історію. Він був введений в CSS2, після того як цей ефект став популярним серед JavaScript програмістів. Рішення JavaScript складніше в порівнянні з CSS псевдо-класом, і це є прикладом збирання CSS ефектів, які стали популярними серед веб-дизайнерів.
Кілька слів про каскади
Принциповою особливістю CSS є те, що більш ніж одна таблиця стилів може впливати на відображиння документів. Ця функція називається каскадною, оскільки різні стилі застосовуються відносно їх надходження в ряді. Каскад є однією з бизисних особливостей CSS, тому ми зрозуміли, що будь-який документ в кінцевому підсумку можна зробити красивим з таблицями стилів з різних джерел: браузера, дизайнера і, можливо, користувача.
В останньому наборі прикладів, ви бачили, що колір тексту посилання був синім і без зазначення в таблиці стилів. Так само, браузер знає як відображати елементи blockquote і h1 без прямого визначення. Все, що браузер не знає про можливості формування зберігається в таблиці стилів за умовчанням браузера і поєднується з таблицями стилів автора при відображенні документа.
Ми вже багато років знали, що дизайнери хочуть розвивати свої власні таблиці стилів. Однак, ми виявили, що користувачі теж хочуть мати можливість впливати на відображення своїх документів. За допомогою CSS, вони можуть зробити це шляхом подання особистих стилів, які будуть об'єднані зі стилями браузера та стилями дизайнера. Будь-які конфлікти між різними стилями вирішуються в браузері. Як правило, таблиці стилів дизайнеру будуть мати найбільшу перевагу у цьому документі, після чого користувач, а потім стилі браузера за умовчанням. Проте, користувач може вказати, що їого правило дуже важливо і воно буде перевизначати авторські або стилі браузера.
Ми вдавалися в подробиці про каскадних в Главі 15 "Каскадність і спадковість". До цього, треба ще багато чого дізнатися про шрифти, простори і кольори.