 |
Теоретичні відомості
|
|
|
|
Лабораторна робота № 6
Тема: Стилі відображення гіпертексту CSS.
Мета: здійснити ознайомлення студентів з поняттям «каскадні таблиці стилів» та навчити працювати з стилями відображення гіпертексту CSS.
Теоретичні відомості
Мова HTML ніколи не буде чимось більшим ніж мовою розмітки гіпертексту з дуже обмеженими можливостями. Вона була створена для того, щоб визначати структуру документа для розміщення його в Веб-середовищі, а не для роботи зі стилями.
Поступово в HTML були додані теги та технології, які дозволяли створювати та контролювати структуру та вигляд документа, з’явилися таблиці, фрейми, інструменти що вирівнюють текст, з’являється мова JavaScript.
У зв’язку з тим, що HTML не мав можливості управління зовнішнім виглядом Веб-сторінок, щоб вирішити ці проблеми, консорціумом W3C була розроблена технологія Cascading Style Sheets або CSS (Каскадні таблиці стилів) - технологія опису зовнішнього вигляду документа, написана мовою розмітки. В CSS надається можливість призначити усім об'єктам стиль, опис якого може зберігатися в самому HTML-файлі, або в окремому файлі.
ПРАВИЛА В CSS. CSS надає можливість створювати правила, які легко змінювати, редагувати і застосовувати до усіх визначених нами елементів. Кожне правило, складається з двох частин. У лівій частині міститься селектор (selector), а у правій - блок визначення (declaration block). Блок визначення складається з набору властивостей (property) та їх значень (value).
Селектор – елемент, який визначає правило.
Властивість описує елемент, що вводиться.
Значення визначають природу властивостей.
| селектор | блок визначення |
| селектор | {властивість: значення;} |
ДОДАВАННЯ ТАБЛИЦЬ СТИЛІВ В HTML-ДОКУМЕНТ. Існують три способи додавання правил CSS в HTML-документи:
|
|
|
- СПОСІБ ПЕРШИЙ: ДОДАВАННЯ CSS В HTML-ТЕГ.
У цьому способі CSS додається в HTML-документ за допомогою HTML-атрибуту style у середині будь-якого HTML-тегу, що знаходиться у контейнері <body>.
<html>
<head>
<title>Приклад №1</title>
</head>
<body style="background-color: #FF0000;">
<p>Колір фону цієї сторінки - червоний</p>
</body>
</html>
Цей спосіб використовується у тому разі коли окремому елементу потрібно надати декілька стилів не використовуючи вбудовані або зовнішні стилі.
Застосування цього способу несе за собою певні недоліки:
- збільшується об’єм файлу, що приводить до збільшення часу завантаження веб-сторінки;
- ускладнює редагування документів.
- СПОСІБ ДРУГИЙ: ВСТАНОВЛЕННЯ СТИЛЮ ДЛЯ ТЕГІВ В HTML-ДОКУМЕНТІ
CSS додається в HTML-документ за допомогою HTML-тегу <style> в середині контейнеру <head>. В ньому описуються всі стилі, що будуть використані.
<html>
<head>
<title>Приклад №2</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
<p>Колір фону цієї сторінки - червоний</p>
</body>
</html>
- СПОСІБ ТРЕТІЙ: ПОСИЛАННЯ НА ТАБЛИЦЮ СТИЛІВ
Зовнішня таблиця стилів являє собою звичайний текстовий файл з розширенням css.
Для того щоб зробити посилання на зовнішній файл із HTML-документа (index.htm) на файл таблиці стилів (style.css) треба у контейнері <head>вставити наступну стрічку:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Це посилання указує браузеру, що він повинен використовувати правила відображення HTML-файлу з CSS-файлу.
<html>
<head>
<title>Приклад №3</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
</body>
</html>
Найважливішим тут є те, що один CSS-файл можна використовувати для управління відображення багатьох HTML-документів.
ГРУПУВАННЯ СЕЛЕКТОРІВ. При розробці стилю сайту виникає ситуація, коли використовуються параметри, що повторюються. Для того щоб ці параметри не повторювалися використовується групування селекторів за певними властивостями.
|
|
|
| без групування | з групуванням |
| H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #000aff; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #aaaaaa; } | H1, H2 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #000aff; } H2 { font-size: 135%; color: #aaaaaa; } |
КОЛІР ТА ФОН. Властивість color описує колір переднього елементу. Наприклад, ми бажаємо встановити зелений колір тексту абзаца, для цього у файлі style.css створимо таке правило:
p{
color: #00ff00;
}
<html>
<head>
<title>Приклад №4</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p> Колір тексту у цьому абзаці зелений</p>
</body>
</html>
Властивість background-color описує колір фону елемента. Для того, щоб замінити фон всієї веб-сторінки властивістьbackground-color слід застосувати до тегу <body>.
Також властивість background-color можна застосовувати до інших елементів веб-сторінки.
У файл style.css внесемо зміни, що описують фон абзацу.
p{
color: #00ff00;
background-color:#ff0000;
}
<html>
<head>
<title>Приклад №5</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p> Колір тексту у цьому абзаці зелений на червоному фоні.</p>
</body>
</html>
За допомогою властивості background-color, зображення можна не тільки помістити на задній план елементу або зробити фоном веб-сторінки, але задати його положення на веб-сторінці.
У цьому прикладі ми в якості зображення будемо використовувати зображення шару.
Щоб зробити дане зображення фоном веб-сторінки достатньо в файлі style.css застосувати параметри тега <body>
body{
background-image: url("../images/ball.jpg");
}
Властивість BACKGROUND-REPEAT. Результатом виконання попереднього прикладу було повторення зображення шару, як по вертикалі так і по горизонталі, щоб керувати цим повторенням застосовується властивість background-repeat.
| Таблиця значень background-repeat | |
| Значення | Властивість |
| background-repeat: repeat-x | Зображення повторюється тільки по горизонталі. |
| background-repeat: repeat-y | Зображення повторюється тільки по вертикалі |
| background-repeat: repeat | Зображення повторюється по горизонталі і вертикалі. |
| background-repeat: no-repeat | Зображення не повторюється. |
body{
|
|
|
background-image: url("../images/ball.jpg");
background-repeat: repeat-x;
}
Властивість BACKGROUND-ATTACHMENT надає можливість фіксування фонового зображення або прокручувати його разом з текстом.
| Таблиця значень background-attachment | |
| Значення | Властивість |
| background-attachment: scroll | Зображення не фіксується |
| background-attachment: fixed | Зображення зафіксовано. |
body{
background-image: url("../images/ball.jpg");
background-repeat: repeat-x;
background-attachment: fixed;
}
За замовчуванням фонове зображення розміщається у лівому куті екрану. За допомогою властивості background-position зображення можна розміщати у будь-якому місці екрану.
Значення властивості background-position являють собою вісь координат.
body{
background-image: url("../images/ball.jpg");
background-repeat: no-repeat;
background-position: 5cm 5cm
}
Після виконання цього прикладу ми побачимо, що зображення розташовано на 5 см зліва та на 5 см зверху.
В якості значень властивості background-position можна використовувати значення у процентах, ключові слова (right, left, top, bottom).
body{
background-image: url("../images/ball.jpg");
background-repeat: no-repeat;
background-position: 100% 25%
}
Властивості background, що були розглянуті, можна записувати у скороченому вигляді.
Розглянемо фрагмент код:
background-color:#ff0000;
background-image: url("../images/ball.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 5cm 5cm
Для того, щоб властивість background можна було записати однією стрічкою, необхідно розташувати його властивості у такому порядку:
[background-color] | [background-image] | [background-repeat] |
[background-attachment] | [background-position].
background: #ff0000 url("../images/ball.jpg") no-repeat fixed 5cm 5cm;
Якщо властивість відсутня, то вона автоматично отримує значення за замовчуванням. Наприклад, якщо властивості background-attachment та background-position відсутні то вони отримують свої значення за замовчуванням.
Управління шрифтом. В старих версіях HTML шрифт оформлявся за допомогою тегу <font> але цей тег треба було додавати кожного разу, коли було необхідно встановити шрифт, від цього збільшувався розмір веб-сторінки, незручно було змінювати властивість шрифту.
|
|
|
Щоб задати сімейство шрифтів використовується властивість font-family. В цій властивості завжди вказується ряд шрифтів, розділених комою, наприкінці списку вказується сімейство шрифтів. При застосуванні шрифтів до веб-сторінки завжди задається основний шрифт, а потім альтернативний. У разі відсутності на комп’ютері користувача заданих шрифтів то веб-сторінка, як мінімум буде відображена шрифтом, що входить до цього сімейства.
Існують п’ять сімейств шрифтів:
| Шрифт | Сімейство шрифтів |
| Times New Roman Georgia | serif(з засічками) |
| Arial Candara | sans-serif (без засічок) |
| Courier Courier New | monospace (моноширинний) |
| Bradley Hand ITC Edwardian Script ITC | cursive (рукописний) |
| Webdings | fantasy (декоративний) |
Шрифти сімейства serif найкраще підходять для основного тексту сторінки. Засічки допомагають направляти увагу читача уздовж рядка
Шрифти сімейства sans-serif використовуються для оформлення заголовків, панелей посилань та посилань. Шрифти без засічок звертають на себе більше уваги, але погано підходять для довгого читання.
У моношириних шрифтах усі символи мають однакову ширину. Слід зазначити, що у моноширинних шрифтах збільшується між символьний інтервал, як зліва так і з права символу (цей інтервал є невід’ємною частиною символу). Моноширинні шрифти допускаються тільки для створення якихось особливих ефектів оформлення — наприклад, у даній роботі моношириним шрифтом набрано фрагменти коду HTML та CSS. У моноширинному шрифті всякий символ має одну і ту ж ширину.
У файлі style.css створимо для оформлення абзацу таке правило:
p{font-family: Arial, Candara, Century-Gothic, sans-serif}
<html>
<head>
<title>Приклад №6</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p> Шрифт цього абзацу відноситься до сімейства sans-serif</p>
</body>
</html>
У цьому прикладі основним шрифтом абзацу є шрифт Arial у разі його відсутності буде загружено наступний, у разі відсутності усіх шрифтів абзац буде оформлено шрифтом сімейства sans-serif.
Властивість font-style визначає стиль шрифту з обраного сімейства може мати наступні значення:
- normal – звичайний шрифт;
- italic – курсивний шрифт (більш декоративний шрифт з нахилом в право);
- oblique – нахилений шрифт (звичайний шрифт нахилений в право).
У файлі style.css створимо таке правило:
h1{
font-family: Arial, Candara, Century-Gothic, sans-serif;
font-style: normal;
}
h2{
font-family: Times New Roman, Georgia, serif;
font-style: italic;
}
p{
font-family: Times New Roman, Georgia, serif;
font-style: oblique;
}
<html>
<head>
<title>Приклад №7</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<h1>Шрифт цього заголовку звичайний</h1>
<h2>Шрифт цього заголовку курсив</h2>
|
|
|
<p> Шрифт цього абзацу нахилено вправо</p>
</body>
</html>
Властивість font-variant використовується для вибору між варіантами normal і small-caps.
Параметр normal задає звичайні літери.
Параметр small-caps задає малі заголовні букви (upper case) замість букв нижнього регістру.
У файлі style.css створимо таке правило:
p{
font-family: Arial, Candara, Century-Gothic, sans-serif;
font-style: normal;
font-variant: small-caps;
}
<html>
<head>
<title>Приклад №8</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Абзац оформлено малими прописними літерами</p>
</body>
</html>
Властивість font-weight описує, наскільки товстим, або "важким", повинен відображуватися шрифт. Шрифт може бути normal або bold. Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для опису ваги шрифту.
Іноді при значенні "500" або "600" браузери відображають "проміжну" насиченість між normal і bold.
У файлі style.css створимо таке правило:
p{
font-family: Arial, Candara, Century-Gothic, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 600
}
<html>
<head>
<title>Приклад №9</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Товщина шрифту абзацу дорівнює 600</p>
</body>
</html>
Властивість font-size задає розмір шрифту для відображення вмісту елементу. Щоб задати розмір шрифту використовуються різні одиниці виміру (наприклад, пікселі або відсотки).
h1{
font-family: Arial, Candara, Century-Gothic, sans-serif;
font-style: normal;
font-size: 30px;
}
h2{
font-family: Times New Roman, Georgia, serif;
font-style: italic;
font-size: 100pt;
}
h3{
font-family: Times New Roman, Georgia, serif;
font-style: italic;
font-size: 120%;
}
Властивості font, що були розглянуті, можна записувати у скороченому вигляді. Розглянемо фрагмент коду оформлення абзацу:
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Використовуючи скорочений запис, код можна спростити:
p{
font: italic bold 30px arial, sans-serif;
}
Порядок розташування властивостей такий:
font-style | font-variant | font-weight | font-size | font-family.
УПРАВЛІННЯ ТЕКСТОМ
Властивість text-indent задає відступ першого рядка при відображенні блокових елементів. Відступ може бути, як позитивним так і негативним і задається одним з наступних способів:
| Значення | Дія |
| <розмір> | визначає, що відступ першого рядка фіксований |
| <відсоток> | визначає, що відступ обчислюється щодо ширини блоку, що вміщується. |
p{text-indent:3pt;}
p{text-indent:10%;}
Властивість text-align задає вирівнювання тексту при відображенні блокових елементів. Воно може набувати наступних значень:
| Значення | Дія |
| left | Вирівнювання по лівому краю. |
| right | Вирівнювання по правому краю. |
| center | Вирівнювання по центру. |
| justify | Вирівнювання за шириною. |
p{
text-indent: 3pt;
text-align: justify;
}
Властивість text-decoration прикрашає текст при відображенні елементів. Воно може набувати наступних значень:
| Значення | Відображення |
| none | Звичайний текст. |
| underline | Підкреслений текст. |
| overline | Надкреслений текст. |
| line-through | Перекреслений текст. |
| blink | Блимаючий текст. |
p{
text-indent: 3pt;
text-align: justify;
text-decoration: line-through;
}
Властивість letter-spacing задає інтервал між буквами при відображенні тексту. Його значення задається одним з наступних способів:
| Значення | Відображення |
| normal | Звичайний текст. |
| <розмір> | Задає інтервал в додаток до стандартного інтервалу. Це значення може бути негативним. |
p{letter-spacing: normal;}
p{letter-spacing: 2em;}
Властивість text-transform задає перетворення тексту при відображенні елементів. Воно може набувати наступних значень:
| Значення | Дія | Приклад |
| none | Без перетворення. | Це приклад. |
| capitalize | Робити першу літеру кожного слова прописною. | Це Приклад. |
| uppercase | Виводити текст прописними літерами. | ЦЕ ПРИКЛАД. |
| lowercase | Виводити текст рядковими літерами. | це приклад. |
ПОСИЛАННЯ
Псевдокласи. Властивості гіперпосилання засобами CSS можна визначати по-різному, залежно від того, відвідали вже посилання, чи активне воно, чи знаходиться покажчик миші над посиланням. Це дозволяє додати цікаві ефекти на ваш веб-сайт. Щоб оформити гіперпосилання засобами CSS, треба використовувати так звані псевдокласи.
Псевдоклас дозволяє враховувати різні стани або події при визначенні властивостей html-тега. У гіперпосилання є декілька станів та подій.
Псевдоклас: link використовується для посилань на сторінки, які користувач ще не відвідував.
a: link{
color: #0000ff;
font-weight: normal;
}
Псевдоклас: active використовується для активних посилань.
a: active {
color: #00bfff;
background-color:ffd700;
{
У цьому прикладі у посилання буде змінено колір шрифту та колір фону.
Псевдоклас: visited використовується для посилань на сторінки, які відвідав користувач.
a: visited {
color: #0000ff;
font-weight: 400;
}
Псевдоклас: hover використовується для посилань, над котрими находиться вказівник миші.
a: hover{
font-weight: normal;
text-trasform: uppercase;
letter-spacing: 10px;
}
У цьому прикладі при шрифт посилання буде нормальної товщини, текст буде відображатися прописними літерами, відстань між літерами буде складати 10px.
Видалення підкреслювання посилань. Видалити підкреслювання посилань дуже просто. Для видалення підкреслювання достатньо встановити властивість text-decoration зі значенням none.
a: link{
color: #0000ff;
font-weight: normal;
text-decoration: none;
}
|
|
|
