Лабораторна робота №7. Каскадні таблиці стилів.
Таблиця стилів (CSS) – є набором правил, які визначаються вживанням стилів форматування до дескрипторів HTML – документа.
CSS припускає три типи таблиці стилів: вбудована, внутрішня, зовнішня.
Вбудована (embedded). Властивості стилю указують у верхній частині HTML – документа – в межах дескриптора <style>. Таким чином, стиль, який призначений певному дескриптору, буде успадковуваний всіма такими ж дескрипторами в даному HTML – документі.
Внутрішня (inline). Атрибути стилю можуть бути оголошувана в будь-якій частині кода Web –страницы.
Зовнішня (linked). Властивості стилів знаходяться в окремому файлі. Подібні файли можуть бути пов'язані з будь-ким HTML – документом.
Каскадна таблиця стилів є набором правил форматування HTML – дескрипторів. Введемо форматування дескриптора body, а саме – властивості стилю background привласнено значення black(чорний). В результаті вживання цього правила колір фону всього HTML – документа зміниться на чорний. Якщо необхідно змінити колір шрифту на білий, то дві властивості цього правила розділено комі: body{background:black; color:white}.
Вбудовані стилі застосовуються до всього HTML – документа, він повинен бути оголошений в межах дескриптора <head>, між дескрипторами <style> </style>.
Наприклад, для розміщення посилання, використана таблиця кольору морської хвилі, колір всієї решти таблиць – жовтий. В документі цієї сторінки оголошено два стилі table. Майбутніх стилю class (nav, rest), розділених крапкою.
Приклад 1. Вбудований стиль.
<head>
<style type=”text/css’>
table.nav{background:aqua}
table.rest{background:yellow; text-aling:center;color:black}
а:link {color;red;text-decoration:none}
</style>
</head>
Зовнішні стилі зберігаються в текстовому файлі, який зв'язується з документом HTML дескриптором <link>
Приклад 2.
<head>
<link rel=”styesheet”href=”mystyles.css”type=text/css>
</head>
В даному прикладі з HTML-документом пов'язаний файл mystyles.css, в якому зберігаються всі властивості форматування.
Властивості внутрішніх стилів знаходяться в межах HTML-дескриптора, формат якого необхідно змінити. Внутрішній стиль не використовує дескриптор <style>.
Приклад 3. Внутрішній стиль.
<table.style=”background:aqua” width=”100”>
<table.style=”background:yellow; text-aling:center;color:black” ” width=”100”>
Для внутрішніх стилів використовується не дескриптор <style>, а однойменний атрибут – style. Крім того, декілька властивостей стилю в межах одного дескриптора, як і в попередніх випадках, розділено крапкою з комою.
За допомогою CSS можна визначати стиль і вид тексту. Аналогічно тому, що використовується тег FONT, задаючий властивості шрифту, але стилі володіють великими можливостями і дозволяють скоротити код HTML.
Властивості шрифту
Властивість |
Опис |
font-family |
Задає список шрифтів |
font-style |
Зображення шрифту. Можливі значення: normal (значення за умовчанням) або italic (курсив) |
Font-size |
Розмір шрифту. Значення цієї властивості указують в пунктах (pt) або в процентному відношенні від розміру шрифту тексту іншого дескриптора |
font-variant
|
Капітель (особливі прописні букви) Нормальна жирність Світле зображення
|
font-weight
|
Напівжирний шрифт. Можливі значення: light (звичайне зображення шрифту) або bold (напівжирний)
|
Background |
Колір фону тексту |
Color |
Колір шрифту |
text- align |
Вирівнювання тексту. Можливі значення:left (вліво), right (управо), сеnter(по центру), justify (по ширині сторінки) |
text-indent |
Величина відступу - фіксоване значення або процентне співвідношення. |
text-decoration |
Видозміна шрифту. Можливі значення: underline (підкреслений), overline (підкреслений зверху), strikthrough (закреслюваний) |
Зауваження:
Коли розмір шрифту задається абсолютними значеннями, тобто указується конкретне значення шрифту в пунктах або пікселях, то змінити цю величину за допомогою опції браузера Вигляд | Розмір шрифту неможливо. Якщо шрифт встановлений дуже дрібним, то виправити цей недолік читачу простими засобами не представляється можливим. Тому краще задавати розмір шрифту у відсотках (Приклад 1).
Приклад 1. Завдання властивостей шрифту за допомогою CSS
<html> <style>
H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: | light }
</style>
<body>
<H1>Заголовок</H1>
Звичайний текст
</body>
</html>
Гіперпосилання – це невід'ємна частина будь-якої Web-сторінки. Нижче приведені класи CSS, скориставшись якими можна змінити встановлений за умовчанням (підкреслений синього кольору) формат гіперпосилання:
а: link – формат не активізованого посилання.
а: visited- формат раніше активізованого посилання
а:active – формат посилання, активізованого в даний момент.
а:hover- формат посилання, на якому в даний момент знаходиться покажчик миші.
Властивості стилів гіперпосилань
Властивість |
Примітка і можливі значення |
Background-color |
Колір фону гіперпосилань |
Color |
Колір тексту |
Font-family |
Шрифт тексту |
Text-decoration |
Зображення шрифту. Можливі значення: underline (підкреслений), overline (підкреслений зверху), strikthrough (закреслюваний) |
Для управління видом рамки надається вісім значень параметра border-style.
Перші дві - dotted і dashed сталі підтримуватися браузерами Netscape і Internet Explorer тільки із старших версій. <p style="color: yellow;
background-color: deepskyblue; text-decoration: underline; text-transform: uppercase;
border: pink inset 25;
PADDING: 20; font-size: larger; line-height: 40px; text-align: сеnter;"> ... </p>Атрибут style="." задає стильове оформлення абзацу Атрибут color: yellow; задає колір тексту
Атрибут background-color: deepskyblue; задає колір фону для абзацу Атрибут text-decoration: underline; задає підкреслення для тексту Атрибут text-transform: uppercase; задає режим заголовних букв для тексту
Атрибут border: pink inset 25; задає рамку навкруги абзацу, відповідно, рожеву опуклу завтовшки 25 пікселів Атрибут PADDING: 20; задає Атрибут font-size: larger; задає розмір шрифту АТРИБУТ line-height: 40px; задає міжрядковий інтервал АТРИБУТ text-align: сеnter; задає вирівнювання тексту усередині абзацу по центру
Завдання: Використовуючи CSS змінити формат тексту і гіперпосилань в Web – сторінці.
Література, що використовується
С.В.Симоновіч Інформатика. Базовий курс. Видавництво «Пітер» 1999
. Матросів А., Сергєєв А., Чаунін М. HTML 4.0. – СПб.: БХВ-Санкт-Петербург, 2000.
Дідре Хейз Освой самостійно HTML XHTML М.:2002.
1