1.3. Присвоєння стилів

Найпростіший випадок присвоєння будь-якому елемещу Визначеного стилю виглядає так:

ИАЗВА_ЕЛЕМЕНТА { властивість: значення;} , де НАЗВА_ЕЛЕМЕНТА - ім'я HTML-тега (НІ, Р, TD, А і т.д.), а параметри в фігурних дужках - список властивостей елемента і привласнених їм значень.

Приклад: !

НІ {font-size: 30pt; color: blue;}

В даному прикладі всім заголовкам на сторінці, оформленим тегом НІ, привласнюється розмір шрифту 30 пунктів і синій колірР

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

CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ГО="ім'я елемента", що привласнюються будь-якому елементу сторінки.

Параметр CLASS застосовується у випадку, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних). Наприклад, розглянемо опис стилю для класу Ь-з: Ь-з {font-weight: bold; text—align: center}

Всі елементи класу b-c будуть відображатися жирним шрифтом з вирівнюванням по центру сторінки (або комірки таблиці).

<P CLASS="b-c">TeKCT параграфа</Р> —параграфу привласнений стиль класу Ь-с.

<TD CLASS="b-c">TeKCT</TD> - комірці таблиці привласнений стиль класу Ь-с.

Присвоєння стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному ідентифікатору відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно привласнити такий стиль, декілька — це вже клас.

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

2.1. Колір і фон

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

Колір переднього плану: властивість 'color'.

Ця властивість описує колір переднього плану текстового вмісту

елемента.

Значення:

<колір>. •

Наприклад, існує кілька способів задавання червоного кольору:

Приклад:

EM { color: red } /* стандартна назва кольору */

EM {color: rgb(255,0,0) } /* значення системи RGB з

діапазону 0-255 */ • ,—

Список ключових слів, що використовуються для назви кольорів: aqua (колір морської хвилі), black (чорний), blue (синій), fuchsia (фуксія), gray (сірий), green (зелений), lime (жовто-зелений), maroon (темно-бордовий), navy (темно-синій), olive (маслиновий), purple (пурпурний), red (червоний), silver (срібний), teal (темно-бірюзовий), white (білий) і yellow (жовтий). Ці 16 кольорів визначені в HTML 4.0 ([HTML40]). Крім того, користувачі можуть створювати власні ключові слова для позначення кольорів.

Фон. Властивості фону: 'beckground-color', 'beckgro_nd-image', 'beckground-repeat', 'background-attachment', 'beckground-position' і 'beckground'.

Розглянемо роботу з фоновими засобами HTML. Для роботи з фоном є два атрибути:

[) BGCOLOR - задає фоновий колір елемента та присутній в елементах BODY, TABLE, TR, ТН і TD. В специфікації HTML 4.01 позначений як небажаний для використання;

І) BACKGROUND - задає фонове зображення для елемента. Відповідно ДО специфікації HTML 4.01 присутній тільки в елементі BODY і Позначений як небажаний для використання, однаж браузери підтримують даний атрибут для елементів TABLE і TD. У специфікації CSS (CSS-1) є п'ять властивостей для роботи з -фигом.

'background-color' — задає колір фону елемента. Головна іідмінність цієї властивості від атрибута BGCOLOR в тому, що з його допомогою можна задати фоновий колір для будь-якого елемента. Допустимо, потрібно зробити блок, в якому буде сірий фон. За допомогою HTML в такому випадку потрібна таблиця, а за допомогою CSS можна

задати стиль на елемент Р.

HTML

CSS

p {

background-color,: #666; color: #FFF}

<Р>Білий текст на сірому тлі</Р>

<TABLEXTRXTD _GCOLOR=#666666>

<FONT- COLOR=#FFFFFF>Білий текст на сірому TJii</FONT>

</TDX/TR></TABLE>

' background-image' - задає графічне фонове зображення елемента. Якщо вказується фонове зображення, то рекомендується вказувати і фоновий колір, тому що малюнок може не завантажитися або користувач відключить завантаження зображень. В цьому випадку текст може погано читатися на фоні за замовчуванням. Якщо встановлювати ■ фонове зображення для таблиці, то CSS не дає ніяких переваг, однак за допомогою CSS можна задати його для будь-якого елемента. HTML

CSS

Р {

background-image: url(img/bg.gif); color: #FFF}

<P>Білий текст на фоновому малюнку</?>

<TABLEXTRXTD BACKGROUND=img/bg.gif>

<FONT COLOR=#FFFFFF>BMMM текст на фоновому малюнку</РО_Т>

< /TDX /TRX /TABLE>

'background-repeat' - якщо задано фонове зображення, визначає, чи буде повторюватися це фонове зображення і, якщо буде, то яким чином. Значення:

• repeat: зображення повторюється по горизонталі і по вертикалі;

• repeat-x: зображення повторюється тільки по горизонталі;

• repeat-y: зображення повторюється тільки по вертикалі;

• no-repeat: зображення не повторюється.

Приклад використання background-repeat:

BODY { backgruund-image: url(img/bg.gif) ; background-repeat: no-repeat}

<BODY>BM1CT сторінки на фоновому малюнку, що не повторюється</ВООУ>

В HTML подібного атрибуту немає, а за замовчуванням зображення повторюється і по горизонталі, і по вертикалі, тому працювати з фоном тільки засобами HTML дуже складно.

'background-attachment' - задає, чи буде перемішуватися фон разом із у сім вмістом сторінки при скролінгуванні чи ні. ,*:.,

Значення:

• fixed: фон буде залишатися нерухомим, а вміст сторінки буде

перемішуватися щодо нього;

• scroll: фон буде переміщуватися разом з іншим вмістом. Значення за

замовчуванням.

Приклад використання background-attachment:

р t

background-image: url(img/bg.gif) ;

background-repeat: no-repeat; background-attachment: fixed} <Р>Текст на фоновому малюнку, що не повторюється і не рухаеться</Р>.

У HTML немає атрибуту, який рівнозначний даній властивості, а за замовчуванням будь-який фон переміщується при скролінгуванні, тобто має значення scroll.

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

Значення довжини може бути як додатнім, так і від'ємним. Наприклад, правило: Р {background-image: url(img/bg.gif) ;

background-position: -12px 50px} зміщує фонове зображення на 12 пікселів вліво і на 50 пікселів вниз від лівого верхнього кута елементу Р. Крім того, можна вказувати відсоткові співвідношення. Відсотки обчислюються щодо ширини і висоти'блоку елемента. Наприклад, правило:

І background-position: 20% 40%} ■■«..'- ■

ШІІНУС фонове зображення на 20% вправо і на 40% вниз від лівого Іірхіїього кута блоку елемента Р. Значенням за замовчуванням є 0%, що відповідає верхньому лівому куту. Крім того, можна замість числових «МН'їсіи. вказувати- вирівнювання відносно елемента- Так для Вирівнювання по вертикалі можна використовувати три ключових слова:

• top: вирівнювання по верхньому краю;

• center: вирівнювання по центру;

V bottom: вирівнювання по нижньому краю. ,.

Для вирівнювання по горизонталі можна використовувати ключові

слова: ;*

• left: вирівнювання по лівому краю;

• center: вирівнювання по центру; ^ ч»» t right: вирівнювання по правому краю.

Таким чином, правило: t і

bickground-position: 0% 0%} еквівалентне правилу:

т-ч

background-position: top left}

В HTML немає атрибута, який би відповідав даній властивості, а Значення за замовчуванням для фону, заданого засобами HTML, збігається ЗІ значенням за замовчуванням для фону, заданого за допомогою CSS і складає 0% 0%. Р {

•background-image: url(img/bg.gif) ;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: top center}

<Т>Текст на фоновому нерухомому малюнку,що не повторюється і відцентрований по горизонталі</Р>