Тема 7. Каскадні таблиці стилів css (Cascading Style Stoeets)

План лекції ,

1. Основи CSS.

1.1. Призначення CSS. „.!'$■ Додавання стилів на web-сторінку.

1,3. ПрИСВОЄННЯ СТИЛІВ. jjg,

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

2.1. Колір і фон.

2.2. Текст.

2.3. Шрифти.

2.4. Списки.

3. HTML форми.

3.1. Синтаксис форм.

3.2. Теги форми.

3.3. Меню вибору у формах.

Ключові слова: специфікація CSS, стиль, таблиця стилів CSS, йіксель, оглядач, гліф, тег.

1. Основи css

1.1. Призначення css

Дизайн Web-вузлів - це точне розміщення компонентів HTML-сторінок відносно один одного в робочій області вікна браузера.

Проте позиціювання компонентів на сторінці є одним із найслабкіших місць у HTML.

До компонентів сторінки відносяться: блоки тексту, графіку та вбудовані додатки. Розмір і межі кожного з цих компонентів в рамках HTML-розмітки задаються з різним ступенем точності. Розмір графіки і додатків можна задати з точністю до пікселя. Розміри текстових блоків у HTML задати не можна: вони обчислюються браузером, виходячи з відносного розміру шрифту за замовчуванням

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

В початкових версіях браузерів CERN для платформи NEXT і в браузерах WWW автор сторінки мав можливість перевизначити параметри налагодження браузера* за замовчуванням через HTML-розмітку. Але цей підхід не одержав поширення в комерційних продуктах.

Інший спосіб управління параметрами налагодження браузера -програмування на JavaScript. Бурхливий розвиток цієї мови дозволяє говорити про можливості повного контролю над процесом відображення HTML-сторінок. Недолік JavaScript - відмова від декларативного характеру розмітки і великий обсяг коду для перевизначення властивостей елементів розмітки.

Специфікація CSS (Cascading Style Sheets) дозволяє залишатися в рамках декларативного характеру розмітки сторінки і повністю контролювати форму представлення елементів HTML-розмітки.

Каскадні таблиці стилів призначені для вирішення протиріччя між точністю визначення розмірів картинок і додатків, з одного боку, і точністю визначення розмірів блоків тексту і його накреслення - з іншою.

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

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

засіб поділу логічної структури документа і форми його представлення,

■йїгічна структура документу визначається елементами HTML-розмітки, у

той час, як форма представлення кожного з цих елементів задається CSS-_

описом елементу. " щ

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

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