Властивості елементів, керованих за допомогою CSS

У цей час мова CSS нараховує досить велика кількість властивостей елементів HTML, якими він може управляти. Але через те, що цей стандарт ще дуже молодий, у повному обсязі його поки не підтримують найбільш популярні броузери (Netscape Navigator й Microsoft Internet Explorer). Останні версії цих броузерів можуть працювати з досить більшою кількістю команд CSS, а от 3-и версії або зовсім не підтримують його (Netscape Navigator 3), або підтримують, але лише частково (Microsoft IE 3). Більше того, оскільки розроблювачі із цих компаній ніяк не можуть домовитися між собою, останні версії броузерів підтримують неоднаковий набір властивостей CSS. Все це робить малоприемлемым використання CSS у повному обсязі, тому що, при використанні CSS для форматування елементів сторінки й перегляді її за допомогою броузера версії нижче 4-ї, є більша ймовірність побачити щось таке, що вам не сподобається. Тому буде розумніше втриматися від використання CSS для форматування основної структури сторінок до загального переходу на останні версії броузерів. У той же час, застосовуючи «безпечні», тобто сумісні з максимальною кількістю броузерів елементи CSS, ви можете сильно полегшити собі життя й зробити ваші Web-сторінки більше привабливими в плані шрифтового оформлення, а користувачі, що подорожують по Internet за допомогою застарілих броузерів, просто цього не побачать, але також вони не побачать і тих кошмарів, які з'являються при використанні CSS для верстки сторінок.

ВЛАСТИВОСТІ ШРИФТУ
font-family	Використається для вказівки шрифту або шрифтового сімейства, яким буде відображатися елемент. P {font-family: Times New Roman, sans-serif;}
font-weight	Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter, bold, bolder B {font-weight: bolder;}
font-size	Установлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так й абсолютній величині (пункти, пікселі, сантиметри) H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;}
font-size	Установлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так й абсолютній величині (пункти, пікселі, сантиметри) H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;}
КОЛЬОРИ ЕЛЕМЕНТА Й КОЛЬОРИ ТЛА
color	Визначає кольори елемента I {color: yellow;}
background-color	Установлює кольори тла для елемента – саме для елемента, а не для сторінки. Зверніть увагу, що броузери відображають цю властивість по-різному: Microsoft IE відводить під тло елемента всю доступну ширину сторінки, а Netscape Navigator – лише ширину, займану цим елементом. Подивитеся приклад (мал. 3, 4), от його вихідний код: <HTML> <HEAD> <TITLE>Приклад використання CSS</TITLE> <STYLE type=”text/css”> H1 {font-size: 300%;} </STYLE> </HEAD> <BODY bgcolor=white> <center><BR> <H1 style=”background-color: teal; color: white;”>Cascading</H1> <H1 style=”background-color: navy; color: yellow;”>Style</H1> <H1 style=”background-color: gold; color: brown;”>Sheets</H1> </BODY> </HTML> У цьому прикладі в розділі <STYLE> всім елементам <Н1> на цієї сторінці був установлений розмір 300 % від норми. Потім кожному з елементів <H1> були привласнені власні значення кольорів тла й кольори символів.
ВЛАСТИВОСТІ ТЕКСТУ
text-decoration	Установлює ефекти оформлення шрифту, такі, як підкреслення або закреслений текст H4 {text-decoration: underline;} A {text-decoration: none;} .wrong {text-decoration: line-through;}
text-align	Визначає вирівнювання елемента. P {text-align: justify} H1 {text-align: center}
text-indent	Установлює відступ першого рядка тексту. Найчастіше використається для створення параграфів з табульованим першим рядком. P {text-indent: 50pt;}
line-height	Управляє інтервалами між рядками тексту. P {line-height: 50 %}
ВЛАСТИВОСТІ ГРАНИЦЬ
margin-left	Установлюють значення відступів навколо елемента. IMG { margin-right: 20pt} P { margin-left: 2cm}
margin-right margin-right margin-top	Установлюють значення відступів навколо елемента. IMG { margin-right: 20pt} P { margin-left: 2cm}
ОДИНИЦІ ВИМІРУ
px	Пікселі
cm	Сантиметри
mm	Міліметри
pt	Пункти (типограф.)
%	Відсотки

Отже, перейдемо до вивчення безпечних елементів CSS. Опис властивостей елементів в CSS складається з назви властивості з наступним присвоєнням йому певного значення. Назва властивості і його значення розділені двокрапкою.

Указуючи абсолютні, а не відносні розміри шрифтів, ви позбавляєте людей, що переглядають ваші сторінки, можливості збільшувати або зменшувати розмір шрифтів за допомогою спеціальної кнопочки в броузері відповідно до дозволу їхнього дисплея й зором. Шрифти будуть відображатися тільки такого розміру, що ви вказали при написанні сторінки.

Тому, якщо використання абсолютних розмірів шрифтів не обумовлено художнім задумом або підступним наміром, рекомендую вам використати для цих цілей вказівка розмірів у відсотках. У цьому випадку розмір шрифту буде менше (більше) на зазначене вами кількість відсотків, чим при оформленні його за допомогою стандартного HTML-тегу.

Є ще одна невелика, але дуже корисна хитрість - це спосіб сховати від застарілих броузерів опису стилів, що розташовуються в тегу <STYLE>, усередині роздягнула <HEAD>. Оскільки броузер був написаний кілька років назад, коли ніякого CSS ще й у планах не було, він просто не зрозуміє, що це таке написано усередині <STYLE>...</STYLE>, і видасть всі описи стилів на сторінку, як звичайний текст. Для того щоб запобігти це, необхідно укласти описи стилів у тег коментарів. Робиться це дуже просто.

<HEAD><STYLE type="text/css"><!-іопису стилів-- ></STYLE></HEAD> де<!-і - тег, що відкриває коментар, а > - закриваючий.

Застарілі броузери порахують все укладене між тегами коментарів інформацією невідображеної, а нові й кмітливі броузери визначать, що це - опис стилів, і задіють їх.

Ще один із цікавих варіантів застосування CSS ховається за, здавалося б, простою можливістю: ви можете вказувати значення відступів навколо об'єктів, як негативні величини! Це дозволяє накладати один шар тексту на інший й одержувати досить цікаві й привабливі результати.

Домогтися такого ефекту не дуже складно, давайте спробуємо створити сторінку із заголовком, що буде виглядати тривимірним, але не буде використати графіку.

Створимо новий html-файл і складемо опис стилів для трьох об'єктів:

<HEAD><STYLE type="text/css">BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}.z1 { color: silver; margin-top: 100px; margin-left: 70px;}.z2 {color: navy; margin-top: -118px; margin-left: 68px;} </STYLE></HEAD>

У цьому описі ми привласнили <BODY> (втім, це міг бути практично будь-який інший тег) розмір, шрифт і накреслення - у такому стилі будуть відображатися всі елементи сторінки. Це було зроблено лише заради прагнення зменшити розмір файлу сторінки, замість цього можна було описати ці параметри двічі: для кожного із класів z. Далі ми описуємо два стилі, які відрізняються кольорами й розміром відступів навколо них: нижній шар описується стилем z1, а верхній - z2. Використовуючи негативні значення відступів і підбираючи потрібне значення, ми домагаємося того, що верхній шар як би наповзає на попередній...

Відкриємо наш улюблений Web-редактор Notepad і створимо файл із майбутньою назвою styles.css (назва файлу може бути кожним). Опишемо в цьому файлі стиль параграфа <P>, що буде використатися на всіх сторінках нашого сайту:

P {font-family: Times New Roman, serif; color: #000000; margin-left: 15%; margin-right: 15%; margin-top: 1pt; margin-bottom: 1pt;text-indent: 1cm; text-align: justify;}

Усередині опису стилю для зручності форматування ви можете використати будь-яку кількість пробілів і переносів рядків - при читанні стилю броузер просто відкине всі зайві пробіли.

У цьому стилі ми задали, що параграфи <P> на всіх сторінках, які використають цей опис, будуть відображатися шрифтом Times New Roman або у випадку, якщо цей шрифт на машині не встановлений, іншим шрифтом, але із цього сімейства (serif). Кольори шрифту ми встановили чорний, вирівнювання - повне (по обидва боки).

Також ми встановили для параграфа ряд значень відступів. Це було зроблено з наступною метою: за замовчуванням параграф в HTML відображається рівним практично 95 % сторінки й з інтервалами між параграфами, рівними 180 % міжстрічкового інтервалу. Читати такі параграфи не дуже зручно, тому що інтервали між ними занадто великі, а ширина параграфа занадто більша. Подивитеся на журнал, що ви зараз тримаєте в руках: текст зверстаний у колонки для того, щоб його було зручніше читати. У стилі параграфа, що ми створили, установлені бічні відступи в 15 % ширини вікна й вертикальні відступи в 1 пункт - так текст статті буде набагато читабельніше.

Давайте так само створимо стиль для заголовків статей:

H2 {font-family: Verdana, Arial Cyr, Arial;font-weight: bold;font-size: 14pt; color: black;margin-left: 20%; margin-top: 1cm; text-align: left;}

Всі заголовки наших сторінок, оформлені тегом <H2>, будуть відображатися жирним шрифтом Verdana або, якщо цей шрифт не встановлений, шрифтом Arial. Розмір заголовка ми встановимо рівним 14 пунктам, кольори чорний, відступ ліворуч дорівнює 20 % ширини сторінки, а відступ зверху - 1 див. Заголовок буде вирівнюватися щодо лівого краю сторінки.

Завдяки тому, що бічні відступи заголовка й параграфа встановлені нами у відсотках від ширини вікна броузера, при перегляді наших сторінок на комп'ютерах з різним дозволом дисплея пропорції й розташування заголовка, основного тексту й відступів будуть збережені.

Для того щоб «прив'язати» створені нами стилі до наших сторінок, в усі html-файли в розділі <HEAD> ми повинні помістити рядок з посиланням на файл стилів і із вказівкою про використання CSS:

Оскільки файл зі стилями буде перебувати в тім же каталозі сервера, що й інші сторінки, параметр HREF="URL" у нашому випадку буде просто ім'ям нашого файлу стилів (styles.css).

ЗАВДАННЯ

Переробити шрифтові виділення на сайті використовуючи каскадні таблиці стилів.

КОНТРОЛЬНІ ПИТАННЯ

1.Вкажіть основну дію css.

2.Яка властивість встановлює: