1.2. Основи css
Стилі елементів HTML-сторінок можуть бути визначені за допомогою каскадних листів стилів (Cascading Style Sheets — CSS) — широкий термін, що позначає застосування до документа засобів представлення. Стилі описують різноманітні характеристики дизайну сторінки, такі як гарнітура шрифту, колір фону, колір тексту, розміри бічних смуг, розташування об'єктів на сторінці і тому подібне. Каскадні листи стилів були розроблені для розділення структури і представлення Web-сторінки. Для цього специфікація HTML 4.0 визначила багато стильових елементів (такі, як font) і атрибути як небажані і в майбутніх версіях мови їх не буде. Замість них рекомендується використовувати листи стилів.
Стиль може бути застосований до всього документа або до окремого елементу за допомогою вбудовування, впровадження і зв'язування:
Вбудовування дозволяє застосувати стиль до будь-якого елементу за допомогою спеціального атрибуту стилю style. Якщо, наприклад, потрібно визначити розмір шрифту тексту абзацу рівним 12 pt, то для цього потрібно додати в його дескриптор атрибут style="font-size: 12pt;".
Впровадження дозволяє управляти стилями всього документа. Виконується за допомогою елементу style, що розташовується в розділі head, або в тілі документа. Стилі, визначені в елементі style, броузер застосовує до всього документа.
Зв'язування - полягає в призначенні всьому документу зовнішнього листа стилів. Це потужний метод, що дозволяє авторові одночасно управляти стилями всіх документів сайту. Файл, що містить зв'язаний лист стилів, має розширення .CSS. Розглянемо докладніше даний тип зв'язування.
1.2.1.Зв'язані листи стилів
Файл .CSS зв'язування з документом за допомогою дескриптора link як правило в заголовку документа, наприклад: <link rel="stylesheet" type="text/css" href="style.css"/>
Синтаксис листів стилів однаковий для всіх методів застосування стилів — вбудовування, впровадження і зв'язування. Листи стилів складаються з перерахованих нижче спеціальних частин.
• Селектори - елементи HTML або XHTML, властивостям яких лист стилів задає певні значення. Існує декілька типів селекторів.
o Селектори елементів. До них відносяться селектори елементів HTML і XHTML, такі, як заголовки h1..., абзац p і тому подібне.
o Селектори класів - дозволяють визначити різні стилі для елементів одного і того ж типу. Селектор класів складається з імені елемента і імені класу, розділених крапкою, наприклад «p.cgray», причому ім'я елемента може бути не вказане «.c_gray»: Після визначеного таким чином імені селектора класу розташовуються оголошення у фігурних дужках. В документі для визначення класу використовується атрибут class, значенням якого служить ім'я класу, наприклад class="p.c_gray".
o Селектори ID схожі на селектори класів. Відмінність полягає в тому, що селекторы ID починаються з символу # і застосовуються в документі за допомогою атрибуту id. Селектор ID застосовується в кожному документі лише один раз. Приклад використання селекторів:
<р class="c_gray" іd="іd_gray">Цей абзац буде відображений стилем, визначеним для селекторів р.с_gray і p#id_gray.</p>
Властивості. Властивість визначає представлення елементів у вікні браузера. Наприклад, якщо селектором є елемент p, то його властивості визначають зовнішній вигляд тих абзаців, на які розповсюджується даний селектор.
Значення. Кожна з властивостей листів стилів може приймати певні значення.
Поєднання властивості і значення називається оголошенням. Поєднання селектора і оголошення (оголошень) називається правилом. Правила записуються таким чином: body { height: 100%;
font-family: Arial, Helvetica, Sans Serif; line-height: 120%; font-size: 11px; color: #333333; background: yellow;
}
.error {
background:red; margin-right: 10px;
}
У даному прикладі описані два правила: - у першому правилі використаний селектор елементу body, для якого оголошені наступні властивості:
height - висота;
font-family - сімейство шрифтів; line-height - висота рядків; font-size - розмір шрифту; color - колір шрифту;
background - фон елементу.
- у другому правилі вказаний селектор класу error, для якого оголошені наступні властивості:
background - фон елементу класу;
margin-right - відступ елементу справа.
І.З.Приклад статичного контенту Web-сайту автоматизованої системи магазину:
Лістинг index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta content="text/html; charset=UTF-8"/> <title>Сайт автоматизованої системи магазину</title> <script src="script.js"> </script>
<link rel="stylesheet" type="text/css" href="style.css"/> </head>
<body onload="greeting()">
<h1>Вітаємо на сайті автоматизованої системи магазину</h1> <hr/><h2>Форма введення даних про товар :</h2> <form method="get" action="index.html">
Назва товару: <input type="text" name="name" />
<br/>
Вид товару:
<select name="vyd_tovary">
<option value="Monitor" selected="selected">Монітори</option>
<option value="Printer">Принтери</option> </select> <br/>
Валюта: <input type="radio" name="vyd_valuty" value="UAH" checked=="checked">UAH <input type="radio" name="vyd_valuty" value="USD">USD <input type="radio" name="vyd_valuty" value="EUR">EUR
<br/>
Опис товару:
<textarea cols="25" rows="5" name="description">Приклад</textarea>
<br/>
Кількість товару: <input type="text" name="quantity" />
<br/>
Ціна: <input type="text" name="price" />
<br/>
Спосіб розрахунку за товар: <input type="checkbox" name="vyd_rozrahunku" value="gotivkovy"/>готівковий <input type="checkbox" name="vyd_rozrahunku" value="bezgotivkovy"/>безготівковий
<br/>
Дата надходження товару: <input type="text" name="receiving_date" />
<br/>
<input type="submit" vаluе="З6ерегти"/> </form> </body> </htm1>
Лістинг JavaScript script.js function greeting() {
alert("Ласкаво просимо до Web-сторінки автоматизованої системи магазину!");
}
Лістинг файлу зі стилями style. css
body { height: 100%;
font-family: Arial, Helvetica, Sans Serif; line-height: 120%;
}
Вітаємо на сайті автоматизованої системи магазину
Рисунок 1.1. - Зовнішній вигляд прикладу Web-сторінки