Лабораторна робота № 5
Тема:Каскадні таблиці стилів
Мета:
навчитися форматувати текст засобами каскадних таблиць
Теоретичні відомості
Каскадні таблиці стилів або CSS (Cascading Style Sheets) були революцією, WWW, що потрясла. Якщо до цього Web-дизайнер не знав, як виглядатиме його творіння в різних програмах Web-оглядачів, то тепер він може контролювати все: від зображення шрифту до положення картинки на сторінці.
Припустимо, вам потрібно змінити колір тексту в HTML-документі з чорного на синій. Ви поміщаєте його в пару тегів <FONT> і </FONT> наступного вигляду:
<P><FONT color="blue">Це текст синього кольру</FONT></P>
А зараз уявимо, що ви внесли визначення зовнішнього вигляду тексту в інше місце документа:
P.bluetext { color: blue }
Цей рядок означає, що ми визначили для тексту, що знаходиться усередині тега <P> і поміченого стильовим класом bluetext, синій колір шрифту. Така конструкція HTML називається визначенням стилю або просто стилем.
В результаті в HTML-тексті у нас залишаться тільки теги логічного форматування тексту:
<P class="bluetext">Це синій текст</P>
Тут ми помітили потрібний текст за допомогою атрибуту class, привласнивши йому значення bluetext. Атрибут class задає ім'я стильового класу для тега, і його підтримують всі теги.
Ви можете перепризначувати кольори тексту для всіх тегов <P>. В цьому випадку ми не задаємо ім'я стильового класу:
P { color: blue }
Або ви можете задати форматування для стильового класу, не прив'язаного ні до якого тегу:
bluetext{ color: blue }
І тепер ви можете привласнювати стильовий клас тексту, ув'язненому в будь-які теги:
<H1 class="bluetext">Це синій колір</H1>
<CENTER class="bluetext">Це синій колір</CENTER>
Це
<B class="bluetext">жирний синій</B> текст
Ви можете дати спеціальне форматування тегу тільки в тому випадку, якщо він поміщений всередину іншого тега:
H7 B { color: blue }
І тепер:
<H7><B>Этот</B> текст буде синім</H7>
<P>А <B>этот</B> - не буде!</P>
Більш того, ви можете вбудувати визначення стилю прямо в тег:
<P style="color: blue">Це синій текст</P>
Це досягається за допомогою атрибуту style, який також підтримують всі теги HTML.
І ще один спосіб прив'язати стиль до якого-небудь тегу - використовувати атрибут id, задаючий унікальне ім'я елементу HTML.
#headerofdocument { font-size: 20pt }
Тут ми задали розмір шрифту 20 пунктів.
<H1 id="headerofdocument">Це заголовок документа</H1>
Ви можете задавати декілька атрибутів у визначенні стилю. В цьому випадку вони розділяються крапкою з комою:
P { color: blue; fotn-size: 9ptl; text-align: center }
Визначення стилів, винесені в заголовок HTML-документа, складають таблицю стилів. Таблиця стилів полягає в теги <STYLE> і </STYLE>:
<Style [type="text/css"]>
. . .
</STYLE>
Тег <STYLE> може містити необов'язковий атрибут type, що містить обов'язкове значення text/css.
Таблицю стилів можна винести в окремий файл і використовувати відразу в декількох документах. В цьому випадку в заголовку HTML-документа необхідно розмістити тег <LINK>, вказуючий на цю таблицю стилів:
<LINK rel="stylesheet" href="{ Адреса файлу таблиці стилів}">
Властивості шрифту
font - задає параметри шрифту елементу сторінки.
Замінює атрибути font-family, font-height, font-size, font-style, font-variant і font-weight. Значення цих атрибутів можуть розташовуватися у будь-якому порядку.
font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];
Значення за умовчанням - normal normal normal medium normal "Times New Roman".
Альтернативний формат:
font: caption|icon|menu|message-box|small-caption|status-bar;
В цьому випадку доступні шість зумовлених значень, задаючі один із стандартних шрифтів, використовуваних в елементах інтерфейсу Windows:
font: caption; - шрифт заголовка кнопок, текстових міток і т.п.;
font: icon; - шрифт підписів під піктограмами;
font: menu; - шрифт пунктів меню;
font: message-box; - шрифт вмісту стандартних вікон-попереджень;
font: small-caption; - дрібний шрифт заголовків;
font: status-bar; - шрифт вмісту рядка стану.
Підтримується IE починаючи з 4.0
font-family - вказує ім'я шрифту або шрифтового сімейства, використовуваного в елементі сторінки.
font-family: { Ім'я шрифту}|serif|san-serif|cursive|fantasy|monospace;
Як значення цього атрибуту задається або безпосередньо ім'я потрібного шрифту, або одне з п'яти зумовлених значень, задаючих ім'я шрифтового сімейства. Можна задавати одночасно декілька шрифтів, розділивши їх імена комами; в цьому випадку Web-оглядач зможе вибрати з них той, який встановлений на комп'ютері клієнта. Якщо ім'я шрифту містить пропуски, його слід узяти в лапки.
font-family: "Times New Roman",sans-serif;
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
font-weight - задає "жирність" шрифту, використовуваного в елементі сторінки.
font-weight: normal|bold|bolder|lighter|100..900;
"Жирність" може бути задана трьома способами. По-перше, зумовленими значеннями normal і bold, задаючими звичайне і жирне зображення відповідно. По-друге, відносними значеннями bolder і lighter, що роблять шрифт елементу сторінки жирніше і світліше. І, по-третє, одним з дев'яти значень від 100 до 900; тут нормальному зображенню відповідає значення 400, а жирному - 700.
font-weight: normal; - звичайний;
font-weight: lighter; - світліше;
font-weight: bold; - жирний;
font-weight: bolder; - жирніше;
font-weight: від 100 до 900 - будь-яке значення, кратне 100 (200,700).
Значення за умовчанням normal.
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових. При цьому IE 4.0 і старіші версії розпізнавали тільки значення normal і bold цього атрибуту.
Підтримується NN починаючи з 4.0
font-size - задає розмір шрифту, використовуваного в елементі сторінки.
font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{ Абсолютний розмір}|{ Відносний розмір}%;
Можливе завдання або абсолютного розміру шрифту в одній з підтримуваних CSS одиниць вимірювання, або як відсоток від розміру шрифту батька. Також доступні дев'ять певних значень.
font-size: 200% - відносна величина (відсотки)
font-size: 150px - розмір в пікселях
font-size: 300pt - розмір в пунктах
font-size: {xx-small,small,medium,large,x-large,xx-large} - задають один з семи розмірів шрифтів, підтримуваних HTML
font-size: {smaller,larger} - задають розмір шрифту, який на розмір або більше, або менше батьківського шрифту відповідно
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
font-style - задає зображення шрифту.
font-style: normal|italic|oblique;
font-style: normal; - задає звичайний вид шрифту (використовується за умовчанням);
font-style: italic - курсивне зображення;
font-style: obligue - похиле зображення (легкий нахил нормального шрифту) (IE відображає як курсив, а NN не підтримує).
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
font-variant - задає вид малих букв шрифту, використовуваного в елементі сторінки.
font-variant: normal|small-caps;
font-variant: normal; - задає звичайний вид малих букв шрифту (використовується за умовчанням);
font-variant: small-caps; - робить їх такими, як великі букви, тільки меншого розміру (капітель).
Підтримується IE починаючи з 4.0
Колірна гамма
color - Визначає колір елементу.
color: { Колір};
Підтримується IE починаючи з 3.02 для текстових елементів сторінки і починаючи з 4.0 для нетекстових. Підтримується NN починаючи з 4.0
background - задає всі властивості фону елементу сторінки в один прийом. Замінює собою атрибути background-attachment, background-color, background-image, background-position і background-repeat.
background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
Значення цих властивостей можуть розташовуватися у будь-якому порядку.
Значення за умовчанням transparent none repeat scroll 0% 0%.
Підтримується IE починаючи з 3.02; завдання значень background-position і background-repeat підтримується починаючи з 4.0
background-color - задає фоновий колір Web-сторінки або її елементу.
background-color: { Колір}|transparent;
Зумовлене значення transparent задає "прозорий" фон. Воно ж є значенням за умовчанням.
Підтримується IE починаючи з 4.0, у складі атрибуту background - з 3.02
Підтримується NN починаючи з 4.0
background-image - задає фоновий малюнок Web-сторінки або її елементу.
background-image: url({ Інтернет-адреса файлу малюнка})|none;
Зумовлене значення none відключає фоновий малюнок. Воно ж є значенням за умовчанням.
Підтримується IE починаючи з 4.0, у складі атрибуту background - з 3.02
Підтримується NN починаючи з 4.0
background-attachment - даний атрибут дозволяє "зафіксувати" фоновий малюнок, щоб він не прокручувався разом з вмістом Web-сторінки.
background-attachment: scroll|fixed;
background-attachment: scroll; - фонове зображення прокручується разом з вмістом сторінки (значення за умовчанням);
background-attachment: fixed; - фонове зображення фіксується на одному місці і не прокручується з вмістом сторінки.
Застосовується тільки для тега <BODY>.
Підтримується IE починаючи з 4.0, у складі атрибуту background - з 3.02
background-repeat - встановлює порядок повторення малюнка фону на Web-сторінці або її елементі.
Іноді цей атрибут необхідний, щоб зайняти весь вільний простір, якщо фоновий малюнок дуже малий, щоб покрити простір без повторення.
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
background-repeat: repeat; - розмножує фонове зображення на всіх напрямках (значення за умовчанням);
background-repeat: no-repeat; - забороняє фоновому зображенню повторюватися;
background-repeat: repeat-x; - розмножує фонове зображення тільки по горизонталі;
background-repeat: repeat-y; - розмножує фонове зображення тільки по вертикалі.
Підтримується IE починаючи з 4.0
background-position - задає місцезнаходження фонового малюнка. Це комбінований атрибут, замінюючий атрибути background-position-x і background-position-y.
background-position: [{background-position-x}] [{background-position-y}];
Якщо задана тільки одна координата, то вона вважається горизонтальною, а для вертикальної приймається значення 50%.
Значення за умовчанням 0% 0%.
Підтримується IE починаючи з 4.0
background-position-x - задає горизонтальну координату фонового малюнка.
background-position-x: {X}|{X}%|left|center|right;
Координата може бути задана цілим числом (абсолютна координата), відсотком від відповідного розміру фонового малюнка (відносна координата) або зумовленим значенням. Доступні три зумовлені значення: left, center, right, які задають вирівнювання фонового малюнка на сторінці по лівому краю, по центру і по правому краю відповідно.
Значення за умовчанням 0%.
Підтримується IE починаючи з 4.0
background-position-y - задає вертикальну координату фонового малюнка.
background-position-y: {Y}|{Y}%|top|center|bottom;
Координата може бути задана цілим числом (абсолютна координата), відсотком від відповідного розміру фонового малюнка (відносна координата) або зумовленим значенням. Доступні три зумовлені значення: top, center, bottom, які задають вирівнювання фонового малюнка на сторінці по верху, по центру і по низу сторінки відповідно.
Значення за умовчанням 0%.
Підтримується IE починаючи з 4.0
scrollbar-3dlight-color - задає колір верхньої і лівої меж смуги прокрутки, її бігунка і стрілок.
scrollbar-3dlight-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-arrow-color - задає колір стрілок на кнопках смуги прокрутки.
scrollbar-arrow-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-base-color - задає колір бігунка і кнопок-стрілок смуги прокрутки.
scrollbar-base-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-darkshadow-color - задає колір "тіні", що відкидається бігунком і кнопками прокрутки смуги прокрутки (колір правих і нижніх гранієй).
scrollbar-darkshadow-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-face-color - задає колір бігунка і кнопок прокрутки смуги прокрутки.
scrollbar-face-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-highlight-color - задає колір "освітленої" частини бігунка і кнопок прокрутки смуги прокрутки (колір лівих і верхніх їх граней).
scrollbar-highlight-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-shadow-color - задає колір "неосвітленої" частини бігунка і кнопок прокрутки смуги прокрутки (колір правих і нижніх їх граней). Не плутати з кольором "тіні", атрибутом scroll-darkshadow-color, що задається.
scrollbar-shadow-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-track-color - задає колір робочої частини смуги прокрутки, тобто тій її частині, по якій переміщається бігунок.
scrollbar-track-color: { Колір};
Підтримується IE починаючи з 5.5
Властивості тексту
text-decoration - задає спеціальне оформлення тексту: підкреслений, закреслений і т.п.
text-decoration: none|underline|overline|line-through|blink;
text-decoration: none; - відміняє спеціальне оформлення (значення за умовчанням для більшості тегов);
text-decoration: underline; - підкреслює текст (значення за умовчанням для тегов <A>, <INS> і <U>);
text-decoration: overline; - межа зверху тексту;
text-decoration: line-through; - закреслює текст (значення за умовчанням для тегов <DEL>, <S> і <STRIKE>);
text-decoration: blink; - мигання тексту (відсутній в IE)
text-decoration: uppercase - всі букви стають заголовними;
text-decoration: lowercase - всі букви стають маленькими (прописними);
text-decoration: capitalize - кожне слово в рядку починається з великої букви.
Підтримується IE починаючи з 3.02 для текстових елементів сторінки і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
text-underline-position - задає місцезнаходження лінії підкреслення: вище або нижче за текст. Має сенс, якщо атрибут text-decoration рівний underline або overline.
text-underline-position: below|above;
text-underline-position: below; - розміщує лінію підкреслення під текстом (значення за умовчанням);
text-underline-position: above; - над текстом ("надчеркиваніє").
Підтримується IE починаючи з 5.5
text-align - визначає горизонтальне вирівнювання тексту.
text-align: left|right|center|justify;
text-align: left; - вирівнювання тексту по лівому краю (значення за умовчанням);
text-align: right; - вирівнювання по правому краю;
text-align: center; - вирівнювання по центру;
text-align: justify; - вирівнювання по обох краях (по ширині).
Підтримується IE починаючи з 3.02; значення justify підтримується починаючи з 4.0
Підтримується NN починаючи з 4.0
text-align-last - задає горизонтальне вирівнювання останнього рядка абзацу.
text-align-last: auto|inherit|left|right|center|justify;
text-align: auto; - вирівнює останній рядок абзацу так само, як і решту рядків (грунтуючись на значенні атрибуту text-align) (значення за умовчанням);
text-align: inherit; - так само, як вирівняний текст ;
text-align: left; - вирівнювання тексту по лівому краю;
text-align: right; - вирівнювання по правому краю;
text-align: center; - вирівнювання по центру;
text-align: justify; - вирівнювання по обох краях (по ширині).
Підтримується IE починаючи з 5.5
text-indent - встановлює відступ червоного рядка.
text-ident: { Відступ}|{ Відступ}%;
Відступ може бути заданий як абсолютною величиною, так і відсотком від ширини.
Значення за умовчанням 0.
Підтримується IE і NN починаючи з 4.0
text-height - інтервал між рядками тексту.
text-height: { Інтервал}|{ Інтервал}%;
Інтервал може бути заданий як абсолютною величиною, так і відсотком від ширини.
Підтримується IE і NN починаючи з 4.0
text-transform - Задає перетворення регістра символів тексту.
text-transform: none|capitalize|uppercase|lowercase;
text-transform: none; - відключає будь-які перетворення регістра символів (значення за умовчанням);
text-transform: capitalize; - перетворить першу букву кожного слова тексту у верхній регістр;
text-transform: uppercase; - перетворить всі символи тексту у верхній регістр;
text-transform: lowercase; - в нижній регістр.
Підтримується IE і NN починаючи з 4.0
clear - задає поведінку тексту при "обтіканні" ним деяких елементів сторінки, таких як зображення.