» ВЛАСТИВОСТІ ТЕКСТУ
Отпуск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. Використовуючи негативні значення відступів і підбираючи потрібне значення, ми домагаємося того, що верхній шар як би наповзає на попередній…
<BODY bgcolor=white>
<DIV class=”z1″>EC-NET</DIV>
<DIV class=”z2″>EC-NET</DIV>
</BODY>
Відкриємо наш улюблений 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:
<LINK REL=STYLESHEET TYPE=”text/css” HREF=”styles.css”>
Оскільки файл зі стилями буде перебувати в тім же каталозі сервера, що й інші сторінки, параметр HREF=”URL” у нашому випадку буде просто ім’ям нашого файлу стилів (styles.css).